HTML/CSSの便利なテクニックまとめ

こんにちは、ゆうきです。

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

少し前まではJavaScriptで行わなければならなかったことがHTMLとCSSだけで行えるようになったりするので、

最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。

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

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

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

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

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

紙芝居のように、セクションごとにスクロールするようなページを実装したいときは、scroll-snapプロパティを使えばCSSだけでそれを実現することが出来ます

親要素にscroll-snap-typeを指定して、子要素にscroll-snap-alignを指定すればOKです

sectionの高さを100%にしておかないとセクションごとに切り替えるような見た目にならないので注意が必要です

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

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

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

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

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

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

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

textareaのリサイズを禁止する

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

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

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

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

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

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

まとめ

どうでしたか？

HTML/CSSの便利なテクニックをまとめると、

・ダークモード時にスタイルを変えることが出来る

・セクションごとにスクロールすることが出来る

・スマホでタップした時のハイライトを無効にすることが出来る

・スマホでのスクロールを滑らかにすることができる

・textareaのリサイズを禁止することができる

・画像の遅延ロードをHTMLだけで実現することが出来る

です

これらを覚えると役に立つと思うので、みなさん是非使ってみてください😊

現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ

詳しくはこちらの記事をご覧ください。

programmingkun.hatenablog.com