「モダンCSS」でCSSの書き方はどう変わる？ - itstaffing エンジニアスタイル

進化したCSSは「モダンCSS」と呼ばれています。Webサイトのデザイン変更には欠かせない言語ですが、Webブラウザの進化とともに、書き方も少しずつ変化しています。今回はモダンCSSの特徴をコードとともに解説。知らなかった便利な書き方があるかも？

Webブラウザの変化とCSSの複雑化

パソコンやスマートフォンで使われているWebブラウザにはさまざまな製品があります。WindowsではMicrosoft Edgeが、macOSやiOS、iPadOSではSafariが、AndroidではGoogle Chromeが標準でインストールされていますが、他にもMozilla FirefoxやOpera、などがあり、個人が使いやすいと感じるWebブラウザを導入している人もいるでしょう。

それぞれのWebブラウザによって使用できるHTMLのタグや属性、CSSに指定できる内容が異なっており、同じHTMLファイルを開いても見た目が異なることがあります。同じWebブラウザを使っていても、パソコンとスマートフォンのように画面サイズが異なると表示は変わります。

Internet Explorerのサポート終了や、W3CによるWeb標準の仕様策定などにより、一昔前と比べると見た目が崩れにくくはなったものの、いまだにWebブラウザ間の表示には差があるものです。

できるだけ同じ見た目を実現するために調整されるCSSはどんどん複雑になっており、大規模なWebサイトでは設定内容も多くなり、その管理は大変なものです。そこで、このように複雑になるCSSの問題を解決するために、Sass（Syntactically Awesome Style Sheets）が使われるようになりました。

SassはCSSを拡張して扱いやすくしたメタ言語で、CSSに変換（コンパイル）して使います。

Sassが不要になる時代

Sassは上記のように変換が必要なので手間がかかりますが、ネストや変数などを使ってCSSを便利に書くことができます。

たとえば、次のような入れ子になったHTMLにCSSを適用することを考えます。

<div>
    <h1>タイトル</h1>
</div>
<div>
    <h2>サブタイトル</h2>
</div>
<h1>見出し</h1>

この最初の「<h1>タイトル</h1>」の文字色を赤にしたい場合、これまでは次のように記述していました。

div h1  {
    color: red;
}

続く「<h2>サブタイトル</h2>」の文字色を青にしたい場合は、次のように記述します。

div h2  {
    color: blue;
}

また、divタグにマージンを設定したい場合は、次のように記述します。

div {
    margin: 10px;
}

これまでのCSSでは、これをすべて個別に書いていましたが、Sassのネストを使うと、次のようにまとめてかけます。

div {
    margin: 10px;
    h1  {
        color: red;
    }
    h2  {
        color: blue;
    }
}

また、見出しやボタンなどの色に統一感を持たせるため、多くの要素に対して同じ色を指定することもありました。このとき、プログラミングのように変数を使って、Sassのファイルの先頭で色を定義し、それぞれの要素で色を指定するときに、その変数を読み込む方法がよく使われていました。

こういった書き方をするには、これまではSassを使う必要がありました。しかし、現在ではいずれもCSSだけで実現できるようになっており、Sassが不要になりつつあるのです。

モダンCSSの便利な機能（1） :has()セレクタのサポート

上記のHTMLにおいて、「h1」タグが含まれる、1つ目の「div」タグに枠線をつけたいとします。このとき、これまでであれば、枠線をつけたい要素にHTMLでクラス属性を付与して、それに対するCSSを指定することが一般的でした。たとえば、次のように指定します。

<div class=”border”>
    <h1>タイトル</h1>
</div>
<div>
    <h2>サブタイトル</h2>
</div>

この要素を指定するには、CSSで「.border」というようにクラスに対するセレクタを記述します。

.border {
    border: 1px solid #000;
}

これでも正しく表示されますが、こういったクラスを使った指定が多くなるとHTMLで属性を記述する要素が増え、HTMLの修正が大変になります。

このような場合、CSSに新たに用意された「:has()セレクタ」を使うと、最初のHTMLを書き換えることなく、次のようなCSSを記述できます。

div:has(h1) {
    border: 1px solid #000;
}

:has()セレクタは、括弧内に指定した要素を含むことを意味し、今回はdivタグの中にh1タグがあるときだけ、そのdivタグに枠線をつけられます。当然、h1タグがない2つ目のdivタグには枠線はつきません。

他にも新しいセレクタが追加されているため、これを組み合わせることでさまざまな指定が便利になっています。

モダンCSSの便利な機能（2）新しいビューポート単位の普及

Webサイトで文字サイズやマージンなどを指定するとき、これまではピクセル単位で指定する「px」や、親要素と比較した想定的な値で指定する「%」や「em」などの単位が使われてきました。

これはわかりやすい一方で、画面サイズに応じて大きさが変わるものではありませんでした。そんな中、最近はスマートフォンやタブレットなど画面サイズが大きく異なる端末が増えています。

この画面サイズに応じて文字サイズやマージンを変えたいときに便利なのが「vw」という単位です。これは、「Viewport Width」の略で、それぞれの端末での表示幅を意味します。vwを使ってサイズを指定することで、Webブラウザの横幅に対する割合で計算できます。

画像に重ねて文章を配置したい場合など、画像の縮小と合わせて文字サイズを縮小する、といった使い方をするときに便利です。

この「vw」の他にも、画面の高さを指定する「vh」や、幅と高さの小さい方を基準とする「vmin」、大きい方を基準とする「vmax」などが多くのWebブラウザで使えるようになっています。

そして、このビューポートを使った「svh」や「svw」、「lvh」や「lvw」、「dvh」や「dvw」といった指定が登場しています。これらは、スマートフォンの画面などでスクロール時にアドレスバーが隠れたりして、ビューポートのサイズが変わることに対応できるものです。

スマートフォンでの全画面表示などを検討しているときには知っておきたい指定です。

さいごに

上記で挙げたセレクタやビューポートなどは、最近のCSSで用意されているもののほんの一部ですが、こういった指定方法を学ぶことで効率よくデザインできます。これまで通りの指定で正しく表示されることに満足するのではなく、新しいCSSの記述方法なども学んでいきましょう。

【筆者】増井敏克さん
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかりプログラミングのしくみ』『「技術書」の読書術達人が教える選び方・読み方・情報発信&共有のコツとテクニック』、最新刊の『実務で使えるメール技術の教科書』（以上、翔泳社）がある。

▼注目の「サクッとわかるITトレンド」
・Pythonはなぜこれほど人気なのか
・Javaで開発するプログラマに将来性はあるのか
・ITエンジニアはWeb3とどう向き合えばいいのか
・プログラマならではの「ChatGPT」の使い方
・新年度は「Obsidian」で新しいノートを作ろう
・プログラミング的思考はiPhone１台でも学べる時代！
・「パスキー」とは？話題のログイン方法を解説
・Copilotとは？コーディングを支援するAIを解説
・Officeスクリプトとは？Microsoftの自動化ツールを解説
・WebP（ウェッピー）とは？次世代画像ファイル形式を解説
・Hotwireとは？HTMLに書き足すだけでページが動く
・Gmailガイドライン変更。送信ドメイン認証とは
・続々登場する「Copilot」。有料・無料版の違いは？