TIPS
・ホバー時の色は、カラーコードではなくopacity（透明度）をいじると良いかも
・基本的には要素同士の関係よりクラスで指定した方が良いが、
liとか、絶対にタグが変わらないものとかは関係でもOK
・タブレットで表示した時の見え方は、meta viewportでPC版に合わせる。そうするとタブレットの微妙な画面幅のことを考えなくて良くなる?
・コーディングに入る前に、繰り返し使えそうなパーツは何かを考える
・余白はパーツのスタイルに入れず、利用箇所ごとで設定するとパーツの再利用性が上がる
・BEMの命名は、セクションごとではなくパーツごと
（ヘッダーにBlockが4個くらいあったりする）
・flexboxで、カラム数を「2or4」みたいにしたい時は、要素を2つずつdivで囲む
・色は最初に定義しておくとやりやすい
・li:not(:last-child):not(:first-child)でfirst-childとlast-child以外という指定ができる
・flexboxで段組みを作る時は、要素の幅(width: calc(100% / 3)など)だけメディアクエリで調整すれば良い
・block要素の幅を文字量に応じて変更したい時にはwidth: fit-contentが使える
・marginは相殺されるので、margin-topかmargin-bottomはどちらか一方を使った方が良い
→margin-topを使おうと思う。
・border-radiusの値は変数に保存して使い回す（統一する）。
・<br class="sp">などで、レスポンシブ時の改行位置を修正する。
・flashはtransition等で表示、非表示をふわっとさせる
・Chromeのdeveloper toolで、option + 上下キーで値を0.1ずつ動かすことができる
・object-fit: coverで画像をトリミングできる
・tableに枠線を引くときは、table,th,tdそれぞれにborderを設定した後、tableにborder-collapse: collapseを設定する
・justify_content: space-evenlyで要素を等間隔で配置できる
ハマったポイント
・display: tableを持つ要素には、overflow: scrollが効かない
・tableにdisplay: blockを指定すると、widthが効かなくなる
→tableはdivで囲っておくのが無難
・classに対して:first-childやnth-of-type()などを指定すると、特殊な動きをする
・display:inline-blockを使うと、謎の余白が生まれることがある。
→親要素にfont-size: 0を指定すると解消。
（参考：inline-blockの隙間をなくす方法）
・select要素に:beforeをつけたら、developer tool上では存在していることになっていても画面上のどこにも見つからなかった。selectとは相性が悪いのかも
→親要素のdivにbeforeをつけて対応
・tableのwidthを100%に設定しているのに、横幅が親要素からはみ出してしまっていた
→table-layout: fixedで解決
・画像の幅が固定されている時、親要素にpaddingを当てる画像が右によってしまう
→画像にwidth: 100%; height: auto:で解決
・input要素に擬似要素は効かない
・上側のpaddingが効かなかった
→display: blockを指定して解決