最近導入している最新のCSSとHTMLコーディング

2024年になって色々と各ブラウザのCSS、HTMLの実装状況も変わってきたので今後使っていきたいコーディングテクニックを紹介してみる。

CSSでネストが使えるようになった

CSSのネストはこれまではSCSSの書き方でCSSでは使えなかった。
（CSSのネストとは以下のような書き方）
.sample{
　　text-align:left;
　　.inner{
　　　　text-align:center;
　　}
}
通常のCSSの場合は
.sample{
　　text-align:left;
}
.sample .inner{
　　text-align:center;
}

上ぐらい簡単なネストなら別に通常の書き方でもいいけど複雑になればなるほどネストが使えた方が便利になる。ただ、SCSSの場合はコンパイルが必要になるので煩わしいし、インラインでstyleタグを追記して書くとか出来なかった。

私の仕事の半分以上がどこかの誰かが作ったサイトをぶん投げられて無理やり修正する更新作業なのでサイト全体に影響するような修正ではなく、ページ単位でのCSS追加が多い。そういうのって大本のSCSSを触るよりもとりあえずヘッダーにCSS書いて変更した方が早いのでいつも直でCSSを書き込んでいる。

このインラインでの書き込み修正がCSSのネストを使える様になったことで非常に楽にできるようになったのはここ数年で一番と言ってもいいぐらい大きな変化だと思う。

昨年2023年にChromeで使えるようになったと話題になったがその時点ではサファリやファイヤーフォックスでは使えなかったので使えるようになるのを待っていたが2024年時点で全てのブラウザで使えるようになり、今後はCSSのネストを当たり前のように使える環境が整った。

pictureタグが便利

IE11が駆逐されてかなりの年月が流れたことでIEを気にしないでもいい時代が完全に訪れたように感じる。

そこで最近導入したのがpictureタグである。

なんやそれ？と思う人もいるかもしれないが画像を表示するのに非常に便利なタグでスマホ用の画像とPC用の画像を自動で切り替えることが出来るタグである。他にも画面サイズごとに切り替えることが出来たり、画面の解像度ごとに切り替えることが出来たりする多機能ぶり。

これまではスマホ用とタブレット用とPC用で画像を切り替えようと思ったらCSSのメディアクエリを使って出し分けを行っていたわけだが、CSSのメディアクエリの場合はHTMLとCSSが別であるためHTML側で画像がPC用とSP用の2種類読み込まれていた。
それがpictureタグの場合はHTMLで出し分けしているので画像読み込みはSPならSP用の画像が一枚だけ、PCならPC用の画像が一枚だけ読み込まれるため表示速度が上がる。

画像数が多いサイトとか、PC用の画像が大きいサイトとかだとスマホでの表示速度がかなり改善される可能性がある。

ということで今後のサイト作成ではpictureタグを使うのが標準になる。

pictureタグのサンプル

    <picture>
      <source media="(min-width:768px)" srcset="img/low.jpg 1x, img/img.jpg 2x">
      <source media="(max-width:768px)" srcset="img/sp.jpg">
      <img src="img/img.jpg" alt="テスト" >
    </picture>

以下、サンプルの表示例（スマホならスマホ用の画像、高解像度のディスプレイなら高解像度用の画像、低解像度のディスプレイなら低解像度用の画像が表示される）