１．初級編
見出し以外の文には＜ｐ＞要素

＜ｉｍｇ＞要素はテキストを囲むことが無いため、終了タグは不要

＜ｌｉ＞要素は囲む要素によって種類が変わる
＜ｕｌ＞は黒点
＜ｏｌ＞は数字が連番
list-style: none;で黒点無し

「 font-family: フォント名; 」
フォント名にスペースがある場合はダブルクォーテーションで囲む

タグにはドットは不要　classはドットが必要

レイアウトは＜ｄｉｖ＞要素によって構成していく
「div」は「division」の略で、要素をグループ化するために使用される

２．中級編

containerクラスを中央寄せにする
中央に寄せるためにはmarginの左右にautoを指定する
marginにautoを指定するときは、必ずwidthを併せて指定する

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;

メニューアイコンはデフォルトでは非表示にし、画面幅が670px以下（スマートフォンサイズ）の時にのみ表示されるようにする↓
要素を非表示にするにはdisplay: none;を用いる
非表示にした要素を表示させる時は、display: block;を用いて表示する

4.Flexbox編
リストを横並びにするにはdisplay: flex;
横並びにしたリストを画面幅いっぱいにするにはflex: auto;

折り返したい要素の親要素にflex-wrap: wrapを指定する
折り返したい要素自身には列数に応じたwidthを指定
2列にしたい場合はwidth: 50%を指定

縦に並べたいときは親要素にflex-direction: column
margin: 0 auto;とwidthで中央寄せ