CSS使える小技まとめ

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

ダークモード時のスタイルを変更する
sectionごとにスクロールさせる
スムーズスクロールを実装する
スクロールで要素を固定する
画像をトリミングする方法
Webフォントのページ表示を最適化する
要素に連番を付ける方法

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

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

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

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

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

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

<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>

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

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

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

scroll-snap-align

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

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

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

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

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

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

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

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

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

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

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

position: sticky - Can I use?

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

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

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

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

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

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

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

@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選択画面でフォントを選択すると自動で追加されるそうです）

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

要素に連番を付ける方法

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

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

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

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

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

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

counter-increment - MDN