google chromeでブラウザをリロードしても反映されないとき

コードを変更しても内容が反映されないので、 キャッシュクリアしようと思ったけど、探すのにハマったのでメモ。

Developer Toolsを開く
開いた状態でブラウザのリロードボタンをクリック長押しすると、
通常の再読み込み　cmd+R
ハード再読み込み　shift+cmd+R
キャッシュの消去とハード再読み込み

と表示されるので、「キャッシュの消去とハード再読み込み」でできる。

よく使うCSS tips

カウントアップ

olで数字にcssを使いたい時

ol{
  counter-reset:number;
}
li:before{
  counter-increment: number;
  content: counter(number);
  //数字の装飾
}

天地中央寄せ

dipalay:table-cell;
vertical-align:middle;
が使えないとき。

position: absolute;
top:50%;
left:50%
transform:translateY(-50%,-50%);

borderはショートコードを使わない

ベースとなるクラスを作成して、色や線の種類などのクラスを割り当てるようにする

.border{
  border-width:1px;
  border-style: solid;
}
.border-red{
  border-color:red;
}