HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。
少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。
今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。
目次
- 1 1. ダークモードの時にスタイルを変える
- 2 2. セクションごとにスクロールする
- 3 3. スマホでタップした時のハイライトを無効にする
- 4 4. スマホでのスクロールを滑らかにする
- 5 5. textareaのリサイズを禁止する
- 6 6. CSSで中身が空の要素だけ非表示にする
- 7 7. 画像の遅延ロードをHTMLだけで実現
- 8 8. スムーズスクロールをCSSだけで実装
- 9 9. 最初の文字だけスタイルを変える
- 10 10. HTMLだけでアコーディオンを表示する
- 11 11. コンテンツが少ないページでフッターを画面の下に固定する
- 12 12. フォームに選択肢の候補を表示する
- 13 13. カラーピッカーを表示する
1. ダークモードの時にスタイルを変える
最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。
prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。
1 2 3 4 5 6 | @media (prefers-color-scheme: dark) { body { background: #333; color: #fff; } } |
2. セクションごとにスクロールする
紙芝居のように、セクションごとにスクロールするようなページを実装したい
scroll-snapプロパティを使えばCSSだけでそれを実現することができます。
1 2 3 4 5 6 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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はベンダープレフィックスが必要だったり、部分的なサポートとなっています。
3. スマホでタップした時のハイライトを無効にする
スマホでaタグやbuttonタグなどをタップすると、グレーやその他の色のハイライトが表示されます。
-webkit-tap-highlight-colorプロパティを使用すれば、ハイライトを無効にすることができます。
1 2 3 | .class { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } |
4. スマホでのスクロールを滑らかにする
CSSでoverflowプロパティを使用してスクロール領域を作った場合、スマホで触ってみるとスクロールがカクカクして使いづらくなってしまう場合があります。
-webkit-overflow-scrollingプロパティを使えばこのスクロールを滑らかにすることができます。
1 2 3 | .class { -webkit-overflow-scrolling: touch; } |
5. textareaのリサイズを禁止する
ブラウザによって、textareaのサイズをユーザーが調整できるような機能が備えられている場合があります。
UXの観点ではリサイズできた方が望ましい場合もありますが、デザイン的にリサイズを無効にしたい場合はresizeプロパティを使用すると無効にすることができます。
1 2 3 | .textarea-class { resize: none; } |
Chrome、Safariは対応していますが、IE、Edgeは対応していません。
6. CSSで中身が空の要素だけ非表示にする
動的にコンテンツを生成するような場合に、要素の中身が空になってしまうことがあります。その要素にスタイルを当てている場合、空の要素にスタイルが適用されてしまうのでそれを消したい場合がありますね。
そんな時は、:emptyを使いましょう。
1 2 3 4 5 6 7 | .box { /* 通常時のスタイル */ } .box:empty { display: none; } |
7. 画像の遅延ロードをHTMLだけで実現
画像を遅延ロード（Lazy load）させることによって、ページの読み込み速度を向上し、ユーザー体験の向上を実現することができます。
これまではJavaScriptでスクリプトを書いて対応していましたが、下記のようなコードで画像の遅延ロードを組み込むことができます。
1 | <img src="image.jpg" loading="lazy" alt="image" /> |
ただし、現段階で対応しているブラウザはChromeのみとなっており、それ以外のブラウザで画像の遅延ロードを行いたければ従来どおりJavaScriptなどで記述する必要があります。
8. スムーズスクロールをCSSだけで実装
ページ内リンクをクリックした時に、なめらかなスクロールを使って移動させる機能のことを「スムーズスクロール」と呼びます。
こちらもJavaScriptで実装する方法が一般的かもしれませんが、実はCSSだけで実現することができます。
1 2 3 | html { scroll-behavior: smooth; } |
こちらも対応ブラウザが限られており、SafariやEdgeは未対応です。
9. 最初の文字だけスタイルを変える
長い文章を表示する時に、最初の文字だけ色を変えたりフォントサイズを変えるなど、スタイルにアクセントを付けたデザインを見かけることがあります。
first-letter疑似要素を使えばCSSだけで簡単にスタイルを適用することができます。
1 2 3 | <span class="token selector">.class:first-letter</span> <span class="token punctuation">{</span> <span class="token comment">/* 任意のスタイル */</span> <span class="token punctuation">}</span> |
10. HTMLだけでアコーディオンを表示する
FAQページなどで活躍するアコーディオンですが、こちらもHTMLだけで実装することができます。
detailsタグの中にsummaryタグで囲った本文と、見出しを入れ込むだけなので実装も簡単です。
1 2 3 4 | <span class="token tag"><span class="token punctuation"><</span>details<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>summary<span class="token punctuation">></span></span>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?<span class="token tag"><span class="token punctuation"></</span>summary<span class="token punctuation">></span></span>A keyboard. <span class="token tag"><span class="token punctuation"></</span>details<span class="token punctuation">></span></span> |
初期状態だとカーソルが変わらなかったり枠線が表示されてしまうので、下記のようにスタイルを当てるのがおすすめです。
1 2 3 4 5 6 7 | <span class="token selector">details</span> <span class="token punctuation">{</span> <span class="token property"> cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">summary</span> <span class="token punctuation">{</span> <span class="token property"> outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
detailsを押せることがわかるように、cursor: pointer;は指定しておいた方がいいですね。summaryにoutline: none;を指定しておくと自然な見た目になります。
11. コンテンツが少ないページでフッターを画面の下に固定する
コンテンツが少ないページを表示した時に、フッターが画面の途中に配置されてしまう場合があります。
下記のようにスタイルを適用すれば、そのような場合でもフッターを画面の一番下に配置する事が可能です。
1 2 3 4 5 6 | <span class="token tag"><span class="token punctuation"><</span>html<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>body<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>footer <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>footer<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>body<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>html<span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token selector">html, body</span> <span class="token punctuation">{</span> <span class="token property"> margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property"> height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.wrapper</span> <span class="token punctuation">{</span> <span class="token property"> display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property"> flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token property"> min-height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.footer</span> <span class="token punctuation">{</span> <span class="token property"> margin-top</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
ブラウザによってデフォルトでbodyにmarginが適用されている場合があるため、margin: 0;を指定することで画面ぴったりに合わせることができます。
min-height: 100vh;と指定することによって同じことができますが、スマホのブラウザなどから表示した時にずれてしまうので、htmlとbodyのheightを100%にして.wrapperでmin-height: 100%を使えるようにしています。
12. フォームに選択肢の候補を表示する
テキストの入力フォームで候補を表示するようなものを見たことがあると思いますが、実はCSSだけでそれを作ることができます。
1 2 3 4 5 6 7 8 9 | <span class="token tag"><span class="token punctuation"><</span>form<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>animals<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>datalist <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>animals<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>option <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>option<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>option <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>option<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>option <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>elephant<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>option<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>datalist<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>form<span class="token punctuation">></span></span> |
inputタグの中で、list="animals"のようにdatalistのidを指定することで候補を表示することができます。
13. カラーピッカーを表示する
あまり知られていないかもしれませんが、inputタグにtype="color"を指定することで簡単にカラーピッカーを表示させることができます。
1 | <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#e66465<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
inputにtype="color"を指定してするだけなのでとても簡単ですね。value="#e66465"のようにデフォルト値を指定することもできます。
あまり使う機会はないかもしれませんが、ユーザーに色を選択してもらいたい時に使えそうです。