HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。

少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。

今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。

1. ダークモードの時にスタイルを変える

最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。

prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。

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

prefers-color-scheme - MDN

2. セクションごとにスクロールする

紙芝居のように、セクションごとにスクロールするようなページを実装したい

scroll-snapプロパティを使えばCSSだけでそれを実現することができます。

<main class="container">
  <section class="section">Section 1</section>
  <section class="section">Section 2</section>
  <section class="section">Section 3</section>
  <section class="section">Section 4</section>
</main>


html,
body {
  height: 100%;
}

.container {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  height: 100%;
}

.section {
  scroll-snap-align: start;
  height: 100%;
}

親要素にscroll-snap-typeを指定して、子要素にscroll-snap-alignを指定すればOKです。sectionの高さを100％にしておかないとセクションごとに切り替えるような見た目にならないので注意が必要です。

Chrome、Safariは対応していますが、EdgeやIEはベンダープレフィックスが必要だったり、部分的なサポートとなっています。

CSS Scroll snap - Can I use

3. スマホでタップした時のハイライトを無効にする

スマホでaタグやbuttonタグなどをタップすると、グレーやその他の色のハイライトが表示されます。

-webkit-tap-highlight-colorプロパティを使用すれば、ハイライトを無効にすることができます。

.class { 
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}

4. スマホでのスクロールを滑らかにする

CSSでoverflowプロパティを使用してスクロール領域を作った場合、スマホで触ってみるとスクロールがカクカクして使いづらくなってしまう場合があります。

-webkit-overflow-scrollingプロパティを使えばこのスクロールを滑らかにすることができます。

.class { 
-webkit-overflow-scrolling: touch; 
}

5. textareaのリサイズを禁止する

ブラウザによって、textareaのサイズをユーザーが調整できるような機能が備えられている場合があります。

UXの観点ではリサイズできた方が望ましい場合もありますが、デザイン的にリサイズを無効にしたい場合はresizeプロパティを使用すると無効にすることができます。

.textarea-class {
  resize: none;
}

Chrome、Safariは対応していますが、IE、Edgeは対応していません。

CSS resize property

6. CSSで中身が空の要素だけ非表示にする

動的にコンテンツを生成するような場合に、要素の中身が空になってしまうことがあります。その要素にスタイルを当てている場合、空の要素にスタイルが適用されてしまうのでそれを消したい場合がありますね。
そんな時は、:emptyを使いましょう。

.box {
  /* 通常時のスタイル */
}

.box:empty {
  display: none;
}

7. 画像の遅延ロードをHTMLだけで実現

画像を遅延ロード（Lazy load）させることによって、ページの読み込み速度を向上し、ユーザー体験の向上を実現することができます。

これまではJavaScriptでスクリプトを書いて対応していましたが、下記のようなコードで画像の遅延ロードを組み込むことができます。

<img src="image.jpg" loading="lazy" alt="image" />

ただし、現段階で対応しているブラウザはChromeのみとなっており、それ以外のブラウザで画像の遅延ロードを行いたければ従来どおりJavaScriptなどで記述する必要があります。

Lazy loading via attribute - Can I use

8. スムーズスクロールをCSSだけで実装

ページ内リンクをクリックした時に、なめらかなスクロールを使って移動させる機能のことを「スムーズスクロール」と呼びます。

こちらもJavaScriptで実装する方法が一般的かもしれませんが、実はCSSだけで実現することができます。

html { 
　　scroll-behavior: smooth; 
}

こちらも対応ブラウザが限られており、SafariやEdgeは未対応です。

Scroll-behavior - Can I use

9. 最初の文字だけスタイルを変える

長い文章を表示する時に、最初の文字だけ色を変えたりフォントサイズを変えるなど、スタイルにアクセントを付けたデザインを見かけることがあります。

first-letter疑似要素を使えばCSSだけで簡単にスタイルを適用することができます。

.class:first-letter { 
　　/* 任意のスタイル */ 
}

10. 要素の形に合わせてテキストを表示する

雑誌の紙面などで、画像の曲線に合わせてテキストの1行の幅が揃えられたようなデザインを見たことがあると思います。

shape-outsideプロパティを使えばWebサイト上で同様のデザインを作成することができます。

See the Pen
Wrapping Text Around A Circular Image With CSS Shapes by Dudley Storey (@dudleystorey)
on CodePen.

上記の例では、shape-outside: circle();と指定されていますが、shape-outside: url('/images/image.png');のように画像のURLを指定すれば画像に合わせることも可能です。ただし、このように使用する場合は透過情報を保持しているPNGファイルを使用する必要があるので注意してください。

11. HTMLだけでアコーディオンを表示する

FAQページなどで活躍するアコーディオンですが、こちらもHTMLだけで実装することができます。

detailsタグの中にsummaryタグで囲った本文と、見出しを入れ込むだけなので実装も簡単です。

<details>
　　<summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>A keyboard.
</details>

初期状態だとカーソルが変わらなかったり枠線が表示されてしまうので、下記のようにスタイルを当てるのがおすすめです。

details { 
　　cursor: pointer; 
} 

summary { 
　　outline: none; 
}

detailsを押せることがわかるように、cursor: pointer;は指定しておいた方がいいですね。summaryにoutline: none;を指定しておくと自然な見た目になります。

12. コンテンツが少ないページでフッターを画面の下に固定する

コンテンツが少ないページを表示した時に、フッターが画面の途中に配置されてしまう場合があります。

下記のようにスタイルを適用すれば、そのような場合でもフッターを画面の一番下に配置する事が可能です。

<html>
  <body>
    <div class="wrapper"></div>
    <footer class="footer"></footer>
  </body>
</html>
html,
body {
　　margin: 0;
　　height: 100%;
}

.wrapper {
　　display: flex;
　　flex-direction: column;
　　min-height: 100%;
}

.footer {
　　margin-top: auto;
}

ブラウザによってデフォルトでbodyにmarginが適用されている場合があるため、margin: 0;を指定することで画面ぴったりに合わせることができます。
min-height: 100vh;と指定することによって同じことができますが、スマホのブラウザなどから表示した時にずれてしまうので、htmlとbodyのheightを100%にして.wrapperでmin-height: 100%を使えるようにしています。

13. フォームに選択肢の候補を表示する

テキストの入力フォームで候補を表示するようなものを見たことがあると思いますが、実はCSSだけでそれを作ることができます。

<form>
　　<input list="animals" type="text" />
　　<datalist id="animals">
　　　　<option value="dog"></option>
　　　　<option value="cat"></option>
　　　　<option value="elephant"></option>
　　</datalist>
</form>

inputタグの中で、list="animals"のようにdatalistのidを指定することで候補を表示することができます。

14. カラーピッカーを表示する

あまり知られていないかもしれませんが、inputタグにtype="color"を指定することで簡単にカラーピッカーを表示させることができます。

<input type="color" value="#e66465" />

inputにtype="color"を指定してするだけなのでとても簡単ですね。value="#e66465"のようにデフォルト値を指定することもできます。

あまり使う機会はないかもしれませんが、ユーザーに色を選択してもらいたい時に使えそうです。

おすすめの記事