１．初級編
見出し以外の文には＜ｐ＞要素
＜ｉｍｇ＞要素はテキストを囲むことが無いため、終了タグは不要
＜ｌｉ＞要素は囲む要素によって種類が変わる
＜ｕｌ＞は黒点
＜ｏｌ＞は数字が連番
list-style: none;で黒点無し
「 font-family: フォント名; 」
フォント名にスペースがある場合はダブルクォーテーションで囲む
タグにはドットは不要 classはドットが必要
レイアウトは＜ｄｉｖ＞要素によって構成していく
「div」は「division」の略で、要素をグループ化するために使用される
２．中級編
containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにする
セレクタ:hoverではスペースを挟まない
opacityには要素の中身全てを透明にするという性質がある。色のみを透明にするには、rgbaというものを使う必要がある
クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになる。
・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる
z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意する。
３．上級編
メディアクエリ ＠ｍｅｄｉａ(max-width: 1000px) {
cssを記述
}
1000pxの後にセミコロン付けない
box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになる
box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されている
*はすべての要素に対してCSSを適用したい場合に用いる
border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなる
レスポンシブデザインを適用する準備として、＜ｈｅａｄ＞タグ内にviewportを設定する
viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しない
responsive.cssを読み込む際には、必ずviewportよりも下の行に記述するようにする
float解除にclear: left;
4.Flexbox編
リストを横並びにするにはdisplay: flex;
横並びにしたリストを画面幅いっぱいにするにはflex: auto;
折り返したい要素の親要素にflex-wrap: wrapを指定する
折り返したい要素自身には列数に応じたwidthを指定
2列にしたい場合はwidth: 50%を指定
縦に並べたいときは親要素にflex-direction: column
margin: 0 auto;とwidthで中央寄せ
