全ページ共通で適用しているCSS

更新

全ページに共通して適用しているベースのCSSを紹介します。

2023年8月1日現在使用しているものです。

リセットCSSにはDestyle.cssを使用する

Destyle.cssはブラウザのデフォルトのスタイルをイイ感じにリセットしてくれる、リセットCSSです。

リセットCSSにしてほしいことをすべてやってくれるので、愛用しています。

ソースコード

Destyle.cssがだいたいのことをよしなに設定してくれるので、それで足りないところをベースのCSSで補っています。

html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  line-height: 1;
  overflow-wrap: break-word;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

解説

html

html {
  overflow-x: hidden;
  overflow-y: auto;
}

  • overflow-x: hidden;
    横スクロールが発生しないようにするため指定します。

  • overflow-y: auto;
    縦のスクロールは許可します。

body

body {
  line-height: 1;
  overflow-wrap: break-word;
}

  • line-height: 1;
    行の高さが1倍、つまり行の高さが1文字の高さと同じになります。
    line-height: 1;じゃないとテキストの上下に余白を指定するときに調整がしづらいので指定しています。正直好みの問題なので、上記の煩わしさを特に問題としないなら指定しなくてもよいです。

  • overflow-wrap: break-word; 単語の区切りじゃないところでも改行します。
    URLのような長い英単語の羅列をベタ書きしたときに、改行されずに枠からはみ出すことを防ぐために指定します。

li

li {
  list-style: none;
}
  • list-style: none;
    デフォルトのリストスタイル（「・」や数字）をキャンセルします。
    ulやolにlist-style: none;を指定しても同じことができます。しかし、liに指定しておくと再びデフォルトのリストスタイルが必要になったとき、そのliにlist-style: inherit;を指定すれば復活させられるのでちょっと便利です。

img

img {
  max-width: 100%;
}
  • max-width: 100%;
    画像が実際のサイズ以上に拡大されるのを防ぎます。親要素の幅が画像サイズ以下のときは、親要素の幅に合わせて縮小されます。
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}
  • image-rendering: -webkit-optimize-contrast;

Google Chromeでは縮小して表示した画像がぼやけて表示されます。Chromeのバグらしいです。しかも、Retinaディスプレイのような高解像度のディスプレイでは問題なく綺麗に見えるのですが、普通のディスプレイだとぼやけてしまうみたいです。なので普段からMacをメインのマシンにして制作しているとなかなか気付けません。

色々解決方法はあるみたいですが、image-rendering: -webkit-optimize-contrast;を指定するのが一番よさそうです。

なお、影響を最小限にするため、@media screenでChromeのみにこのスタイルが適用されるよう指定しています。

このバグがアップデートで修正されたら、上記の指定は必要なくなります。