前編・中編では、文字や背景のスタイル、要素の大きさや余白の調整、要素の横並び、セレクタの使い方について学びました。後編では、CSS 設計とレスポンシブデザインについて簡単に紹介します。
6. CSS 設計って何？
CSS 設計とは、保守性や拡張性の高い CSS コードを書くためのルールや方法論のことです。CSS 設計を意識することで、コードの見通しが良くなり、バグの発生を防ぎ、効率的に開発を進めることができます。
BEM などの命名規則
CSS 設計の基本は、適切な命名規則に従って、セレクタに名前を付けることです。命名規則には、BEM、SMACSS、OOCSS など、いくつかの種類があります。
ここでは、BEM (Block, Element, Modifier) という命名規則を紹介します。BEM では、セレクタを以下の3つの要素に分けて命名します。
- Block：独立したコンポーネントのルート要素（例：
header、menu、button） - Element：Block を構成する要素（例：
menu__item、button__text） - Modifier：Block や Element の状態やバリエーション（例：
button--disabled、menu__item--active）
BEM では、Block、Element、Modifier を以下のような形式でつなげてセレクタ名にします。
- Block：
block-name - Element：
block-name__element-name - Modifier：
block-name--modifier-nameまたはblock-name__element-name--modifier-name
html
<header class="header">
<nav class="header__nav">
<ul class="header__menu">
<li class="header__menu-item header__menu-item--active">ホーム</li>
<li class="header__menu-item">サービス</li>
<li class="header__menu-item">会社概要</li>
</ul>
</nav>
</header>css
.header {
/* ヘッダー全体のスタイル */
}
.header__nav {
/* ナビゲーションのスタイル */
}
.header__menu {
/* メニューのスタイル */
}
.header__menu-item {
/* メニュー項目のスタイル */
}
.header__menu-item--active {
/* アクティブなメニュー項目のスタイル */
}このように BEM を使うと、セレクタ名からコンポーネントの構造や状態を把握しやすくなります。
コンポーネント指向って？
近年では、コンポーネント指向という考え方に基づいて CSS を設計するのが主流になっています。コンポーネント指向とは、ウェブページを独立した再利用可能な部品（コンポーネント）の組み合わせとして捉える考え方です。
例えば、ボタン、フォーム、カード、リストなどの UI 部品をコンポーネントとして定義し、それらを組み合わせてページを構築します。コンポーネント指向を採用することで、コードの再利用性が高まり、開発効率や保守性の向上につながります。
7. レスポンシブデザインに挑戦！
レスポンシブデザインとは、様々なデバイス（PC、タブレット、スマートフォンなど）の画面サイズに合わせて、ウェブページのレイアウトやデザインを最適化する手法です。
ビューポートの設定
レスポンシブデザインを実現するには、まず HTML の <head> 内に <meta name="viewport"> タグを追加し、ビューポートの設定を行う必要があります。
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width：ページの幅をデバイスの幅に合わせます。initial-scale=1.0：ページの初期ズーム倍率を 1.0（等倍）に設定します。
メディアクエリで画面サイズごとにスタイル変更
メディアクエリを使うと、画面サイズなどの条件に応じて、異なるスタイルを適用することができます。メディアクエリは、@media ルールを使って記述します。
css
/* 画面幅が 768px 以上の場合 */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* 画面幅が 1024px 以上の場合 */
@media (min-width: 1024px) {
.container {
width: 960px;
}
}この例では、画面幅が 768px 以上の場合に .container の幅を 750px に、1024px 以上の場合に 960px に設定しています。
rem などの相対単位を活用しよう
レスポンシブデザインでは、px などの絶対単位ではなく、rem や % などの相対単位を使うことが推奨されています。相対単位を使うことで、画面サイズに応じて要素のサイズを柔軟に変更することができます。
rem：ルート要素（<html>）のフォントサイズを基準とした相対単位%：親要素のサイズを基準とした相対単位
css
html {
font-size: 16px;
}
.container {
width: 90%; /* 親要素の幅の 90% */
max-width: 60rem; /* 最大幅は 960px (16px × 60) */
margin: 0 auto;
}
.text {
font-size: 1rem; /* 16px */
}
@media (min-width: 768px) {
.text {
font-size: 1.2rem; /* 19.2px (16px × 1.2) */
}
}この例では、ルート要素のフォントサイズを 16px に設定し、.text のフォントサイズを rem 単位で指定しています。メディアクエリを使って、画面幅が 768px 以上の場合にフォントサイズを大きくしています。
モバイルファーストって？
レスポンシブデザインを適用する際には、モバイルファーストという考え方が重要です。モバイルファーストとは、まずスマートフォンなどの小さな画面向けにデザインやコーディングを行い、その後、タブレットや PC などの大きな画面向けにスタイルを追加していく手法です。
モバイルファーストを採用することで、モバイルユーザーにとって使いやすいウェブサイトを提供できるだけでなく、パフォーマンスの向上にもつながります。
コラム：CSS の歴史と進化
CSS は 1996 年に最初のバージョンである CSS1 が勧告されました。その後、1998 年に CSS2、2011 年に CSS2.1 が勧告され、現在では CSS3 が広く使われています。
CSS3 では、セレクタやプロパティの種類が大幅に増え、より表現力豊かなスタイル指定が可能になりました。また、メディアクエリや Flexbox、Grid などの新しいレイアウトモジュールが登場し、レスポンシブデザインが容易に実現できるようになりました。
近年では、CSS の機能を拡張した CSS プリプロセッサ（Sass、Less、Stylus など）や、CSS in JS（Styled Components、Emotion など）といった技術も登場しています。これらの技術を使うことで、より効率的かつ柔軟に CSS を記述することができます。
CSS はウェブ技術の中でも特に進化の早い分野です。常に最新の動向をキャッチアップし、新しい技術を学ぶことが重要です。