今までJavaScriptを使わなければ実装できなかったことが、CSSで可能となったりと使える小技が増えてきたのでまとめてみました。

ダークモード時のスタイルを変更する

最近のOSでは、黒を基調とした「ダークモード」が搭載されるようになりました。

このダークモードに対応したスタイルを適応させたい場合、CSSのメディアクエリを使用して、別のスタイルを記述します。

CSS

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fefefe;
  }
}

sectionごとにスクロールさせる

今までjQueryを使って実装していた、セクションごとにスクロール(切り替え)が、scroll-snapプロパティを使用することで、CSSでもできるようになりました。

HTML

<div class="container">
  <section class="section one">
    <h1>Section ONE</h1>
  </section>
  <section class="section two">
    <h1>Section TWO</h1>
  </section>
  <section class="section three">
    <h1>Section THREE</h1>
  </section>
  <section class="section four">
    <h1>Section FOUR</h1>
  </section>
</div>

CSS

body, html {
  width: 100%;
  height: 100%;
}
.container {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory; /* Y軸にスナップ */
}
.section {
  height: 100%;
  scroll-snap-align: start; /* 親要素の上部にスナップ */
}

  • scroll-snap-type : 縦軸・横軸、スナップさせるかどうかを親要素に指定
  • scroll-snap-align : どの位置にスナップさせるかを子要素に指定

scroll-snap-type

親要素に指定して、どの方向にスナップさせるかを指定します。

また、指定できる値が2つあり、「mandatory」は、ユーザーがスクロールを停止するたびに、ブラウザがスナップポイントにスナップされます。「proximity」は、mandatoryより厳密ではなく、適切な場合はスナップポイントにスナップされます。

scroll-snap-align

親要素のどの位置にスナップさせるかを、子要素に指定します。

  • start: Y軸の場合は上に、X軸の場合は左にスナップされます。
  • center: 親要素の真ん中にスナップされます。
  • end: Y軸の場合は下に、X軸の場合は右にスナップされます。

スムーズスクロールを実装する

ページ内リンクをクリックした時に、スルスルとページ内のリンク先に移動するスムーズスクロールもCSSのみで実装できるようになっています。(※Safari, IEは非対応です 2019年12月現在)

CSS

html {
  scroll-behavior: smooth; /* スムーズスクロール */
}

See the Pen scroll-behavior by gri-t (@gri-t) on CodePen.

スクロールで要素を固定する

ある要素を一定の位置で固定させたい時に便利なのが、「position: sticky;」です。(※IEは非対応です 2019年12月現在)

ただ、固定させたい要素を含め、親、先祖要素のどれか一つにでも「overflow: hidden」が当たっていると「sticky」が効かないので、使用する場合はちょっと注意が必要です。

CSS

h2 {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;

See the Pen position: sticky; by gri-t (@gri-t) on CodePen.

画像をトリミングする方法

object-fit: cover;を使用すると画像を自動的に拡大・縮小して、指定したサイズに合わせてトリミングしてくれます。

CSS

img {
  width: 300px;
  height: 300px;
  object-fit: cover; /* これを追加します */
}

See the Pen object-fit by gri-t (@gri-t) on CodePen.

Webフォントのページ表示を最適化する

Webフォントを指定していると、フォントが読み込まれるまでテキストが表示されないことがあります。

その表示されない時間を回避するために、フォントが読み込まれるまで、代替フォント(フォールバック)を表示させるよう「@font-face」を使って設定してあげます。

CSS

@font-face{
   font-family: 'Noto Sans JP';
   font-weight: 400;
   font-display: swap; /* これを指定します */
   src: url('font-name.woff2') format('woff2'), 
      url('font-name.eot') format('eot');
 }

Google Fontsに適応させる場合は、フォントの読み込みコードのURLの末尾に「&display=swap」を追加するだけです。(※Google Fonts選択画面でフォントを選択すると自動で追加されるそうです)

HTML

<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap" rel="stylesheet">

要素に連番を付ける方法

olタグを使用せずに、CSSのcounter-incrementを使うと要素に連番を付けることができます。

連番を付けたい要素にcounter-incrementを付けて、擬似要素にcounters()関数を指定します。

CSS

dt {
  counter-increment: title;
}
dt::before {
  content: counter(title); 
}

区切りを追加したい場合は、次のように記述すると数字の後に「.」が追加されます。

CSS

dt::before {
  content: counter(title)"."; 
}

See the Pen counter-increment by gri-t (@gri-t) on CodePen.