CSS

Memo__________

【複数セレクタ】
・複数セレクタは,でつなぐ
.class1, class2 {property: value}

【displayについて】
・block（図形要素）divなど
・inline（文字要素）
サイズや余白の設定ができない
・inline-block（文字+図形）
・none（消す）

【スペースで複数classを作る】
class =“class1 class2 class3”

【.でつなぐことで、特定のクラスにのみ適応させる】
li.class2 {プロパティ: 値}

【中央寄せ】
・margin: 0 auto;
ブロック要素に対して行う

・text-align: center;
インライン/インラインブロック要素に対して行う

・positionを利用
positionで親子指定してabsoluteのleftとrightの値を0にする。

【メディアクエリ】
@media (条件) { cssの記述 }
条件の例：max-width: ??px / min-width
ブレイクポイント：670~1000px

【*の使い方とbox-sizing: border-boxの指定】
*（アスタリスク）はcss全体を指定することができる。
・border-boxは*で指定することが推奨されている。（レイアウトのズレを防ぐ）
*{box-sizing: border-box;}

【floatを子要素に指定した際の、親要素の高さ】
子要素にfloatを指定した際の、親要素の高さは0になる。
子要素の最後に空のdivタグを1つ作り、clear: left;でfloatを解除できる。

【Sassでの&は親を指定】
・$:hover {プロパティ: 値}

【Sassでの変数の使い方】
・$変数名: 値;
変数は入れ子構造の一番外（スコープ）、また読み込むために最上部に記載する。
プロパティ: $変数名（←で使用）

【始めに記述するべきコード】
html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {font-family: }
li {list-style: none;}
a {text-decoration: none;}
*{box-sizing: border-box;}

Elements__________

・セレクタ{プロパティ: 値}
・/* aaa */

・list-style: none;

・letter-spacing: 1 px;
文字間の指定

・font-weight: 100;
文字の太さ
normal/bold/lighter/bolder/100~900

・opacity : 0.1;
不透明度

・rgba: 255 255 255 0.1;
色相+不透明度

・display: inline-block;
要素の種類の変更
block/inline/inline-block/none/flex/fixed

・box-sizing: content-box
ボックスのサイズにpaddingとborderを含めるのかどうか
(content-box含めない/border-box含める/inherit親要素に従う）

・border-radius: 1px;
角の丸さ

・line-hight: 1px
文字列の高さ（heightの高さと合わせることで中央寄せが可能）

・text-align: center;
文字要素に対しての配置指定
left/right

・background-image: url(ファイル名);
・background-size: cover;
写真を画面全体に表示

・cursor: 種類;
マウスカーソルの形（text/pointer/default）

・box-shadow: 右軸px 下軸px ぼかしpx #fff ;
ボックスの影

・transition: all 1s;
アニメーションの対象や時間の指定

・position: relative;
要素の位置（relative/absolute/fixed）

・z-index: 1;
重ね順

・@media (条件) { cssの記述 }
条件の例：max-width: ??px / min-width
ブレイクポイント：670~1000px

・@import “_ファイル名.css”;
cssファイルの読み込み

・:hover
カーソルを乗せた時

・:active
クリックしている時

・flex: auto;
横幅の自動調整指定

・flex-wrap: wrap;
子要素のサイズに応じた折り返し指定

・flex-direction: column;
子要素を上から下へ並べる

【Sass/Scss】

・@mixin mixin名 {プロパティ: 値}
セレクタ {@include mixin名;}（←で使用）

・@mixin mixin名(引数値){プロパティ: $引数名;}
セレクタ{@include mixin名($引数名);}（←で使用）
mixinで引数を利用

・セレクタ: 関数名(値1,値2)

・darken(色, 暗さ%);
・lighten(色, 明るさ%);
・rgba(色, 不透明度);

・@import “ファイル名”;