ウェブデザインにおけるCSSは、すべてを正しく動作させることはもちろん、思い通りの見た目を構築するのに重要な役割を担います。CSSは、カスケーディングスタイルシート（Cascading Style Sheets）の略で、HTML要素にスタイルを適用する言語です。

CSSはさまざまな方法で扱うことができますが（インラインなど）、特に効果的な使い方がいくつかあります。それはどれも機能的で無駄がなく、きれいに整理されたコードの記述を行うためのベストプラクティスにつながるものです。

この記事では、初心者向けのCSSベストプラクティスを14個ご紹介します。初心者向けの内容になりますが、経験豊富なウェブデザイナーにとっても、基礎知識を振り返る良い機会になるはずです。

初心者向けのCSSベストプラクティスについて動画での解説もご用意しています。

1. スタイルシートを整理する

まず最初に挙げたいのが、スタイルシートの整理。その方法はプロジェクトによって異なりますが、一般的に従うべきルールをいくつかご紹介していきます。

一貫性を保つ

整理方法を問わず、スタイルシート全体およびウェブサイト全体で一貫性を意識しましょう。

クラスの名前から行のインデント、コメントの構造まで、すべてを統一することで、作業内容をより簡単に把握することができます。また、後で変更が必要になったときにも助かります。

改行を多用する

見た目が悪くてもCSSは機能しますが、改行を多用して各コードを独立させることで、読みやすくなります。読みやすいコードは、自分自身にとっても、コードを扱う他の開発者にとってもメリットになります。

一般的には、プロパティと値のペアはそれぞれ別の行に配置するのがベストとされています。

CSSコード
CSSコード

セクションで分ける

スタイルシートの設定方法は、サイトの種類によって大きく異なりますが、基本的には使用するスタイルに応じてセクション（セクションタグを使用）を作成することをお勧めします。例えば、テキストのスタイル用、一覧とカラム用、ナビゲーションとリンク用といった具合です。また、商品ページやよくある質問ページなど、違ったスタイルを持つページを区別できるようにセクションを利用するのが得策です。

コードにコメントを残す

たとえ他の人に共有することがなくても、コメントを残しておくのが賢明です。コメントは、以下のように記述できます。

/* 一般的なCSSのコメントはこんな感じです */

このように説明や概要を残しておけば、すべての行を読み込まなくても、各セクションの関係性を一目で把握することができます。

また、セクションを定義したり、備忘録として決定事項を記述したりしておくのにも便利です。

大規模なプロジェクトでは複数のスタイルシートを使用する

すべてのウェブサイトに該当するわけではありませんが、大規模なサイトで特定のCSSが大量に必要になる場合は、複数のスタイルシートを使用するのがおすすめです。膨大な量のコードが並ぶ一つのスタイルシートの中から1行のコードを探し出すのは、考えただけで気が遠くなります。

特にサイトのセクションごとにまったく違ったスタイルを実装する場合は、スタイルごとにスタイルシートを作成することができます。

例えば、ベースとなるスタイル用と、商品説明、見出し、価格などの固有のスタイルを持つオンラインストア用のスタイルシートは分ける、といった配慮が推奨されます。

2. インライン、外部ファイル、styleタグの使用

CSSの実装方法には、3つの種類があります。それぞれの特徴を押さえて、プロジェクトに応じて使い分けましょう。

  • インラインCSS─特定のHTML要素にスタイルを設定
  • 外部CSS─スタイルシートなどのファイルを使ってサイト全体のスタイルを設定
  • styleタグを使用したCSS（内部/埋め込みスタイルシートとも）─特定の要素ではなく、ページ全体にスタイルを設定

キャッシュなどの観点から、多くの開発者がインラインCSSの使用を避けています。また、CSSを複数のファイルに分割し使用することも基本的には避けてください。少なくとも、インラインCSSの使用はほどほどに。

インラインCSSは、サイトの1つのセクション、テキストの一部、または1つのページで、ちょっとしたスタイルを加えるのに使用するのがベストプラクティスであり、それ以外で必要になることはほぼないはずです。

それ以外では、外部CSSまたはstyleタグを使用しましょう。一度スタイルを決定すれば、ウェブサイト全体に適用することができます。

3. スタイルシートの圧縮

CSSのもう1つのベストプラクティスは、スタイルシートの圧縮です。スタイルシートの読み込み時間の短縮に利用できる圧縮ツールは多数あり、KinstaのCDNもその1つです。

KinstaのCDNでコード圧縮を設定
KinstaのCDNでコードを圧縮

このように、MyKinstaではウェブサイト全体のコード圧縮の設定を簡単に行うことができます。

4. プリプロセッサを使用する

SassやScssなどのプリプロセッサを使用すると、変数や関数でCSSを整理することができ、作業の効率化につながります。プリプロセッサの構文を用いたCSS作成が可能になります。

プリプロセッサとは、CSSをより使いやすいものにするための技術で、CSS自体にはない機能があります。この機能を利用することで、出力されるCSSの可読性が上がり、ナビゲーションが容易になります。

なお使用するには、ウェブサイトのサーバー上でのCSSコンパイルが必要になります。人気の高いプリプロセッサには、Sass、LESS、Stylusなどがあります。

Sass
Sass

5. CSSフレームワーク導入の是非

CSSフレームワークは便利であるものの、多くの場合必須ではありません（特に小規模なサイトでは）。

フレームワークを利用することで、大規模なプロジェクトを素早く展開することができ、バグの回避にもつながります。加えて、標準化できるメリットもあり、複数のユーザーでプロジェクトを同時に動かす場合には欠かせません。

チームメンバー全員が同じ命名方法、レイアウト設定、コメントの形式を使用することができます。

とは言え、その一方で、一般的な外観のウェブサイトになり、ほとんどのコードが使用されずに終わるという懸念もあります。

Bootstrap
Bootstrap

CSSフレームワークという名前は、多くの人が聞いたことがあるはずです。有名どころは、BootstrapやFoundationでしょう。その他にもTailwind CSSやBulmaなどがあります。

6. リセットCSS

すぐに取り入れられるベストプラクティスに、リセットCSSがあります。normalize.cssなどを利用すると、すべてのブラウザでページ要素が一貫してレンダリングされるようになり、最新の標準に準拠してブラウザの不一致を最小限に抑える効果があります。

このリセットCSSの正体は、CSSファイルです。これをウェブサイトにアップロードすることで、各ブラウザにてデフォルトで指定されているCSSをリセットし、ブラウザ間のCSSの表示を揃えることができます。

7. クラスとid

CSSを使用する上で気をつけたいのが、クラスとidの扱いです。以下、簡単にそれぞれの定義を押さえておきましょう。

  • クラス─クラスセレクタ（.classname）は、特定のclass名が付属した要素を選択するものです。class属性の付されたHTML要素（複数でもOK）に特定のスタイルを適用することができます。
  • id─idセレクタ（#）は、特定のid名が付属した要素を選択するものです。id属性は、セレクタの値と一致している必要があります。こちらは、固有の要素に一度だけ使用します。

大事な違いとして、idは1つの要素に、classは複数の要素に使用できます。つまり、前者は1つのHTML要素、後者は複数のHTML要素にスタイルを適用するのに使用可能です。この基本ルールに従えば、コードをきれいにまとめることができ、不要なコードやその重複を最小限に抑えることができます。

先ほど触れたインライン、外部CSS等の議論同様、1つの要素にスタイルを適用するにはidを使用してください。基本的に、idはページ上の例外的なスタイルに使用する目的で作られており、ページやウェブサイト全体に適用する包括的なスタイルには適していません。

8. 冗長なコードは避ける

CSSが冗長になるのはできるだけ避けましょう。以下、具体的な実践方法をいくつかご紹介します。

DRYの原則

DRYは「Don’t Repeat Yourself」の略語で、同じコードは繰り返すべきでないという考え方です。スタイルを何度も繰り返し書けば余計な手間がかかり、さらにはサイトの速度を低下させる可能性もあります。

日頃から冗長性回避を意識してコードを見直す癖をつけましょう。例えば、同じセクションでフォントサイズを定義するタグは、一度使用すればOKです。重複を排除することで、コードの読みやすさとパフォーマンスが向上します。

省略記法を活用する

CSSの省略記法は、本来の性能を保ちつつコードの量を減らすことができる画期的な技術です。複数のスタイルを1行にまとめることができ、例えば、特定のdivのスタイルを設定する場合、margin、padding、font、font size、colorをすべて1つの行に記述することができます。

要素に複数のクラスを指定する

1つの要素に複数のクラスを指定することで、冗長になるのを避けることもできます。例えば、ページのコンテンツが.leftクラスとfloatにより、すでに左に寄っているものの、ある列を右側に配置したいとします。要素にそのクラスを指定すれば、混乱を防ぎながら、ベースの左揃えに加えて、どの要素を右側に寄せるかを具体的に記述することができます。

また、半角スペースで区切れば、要素に好きなだけクラスを指定できるのも便利です。

要素を組み合わせる

要素を1つずつ並べるよりも、組み合わせて並べるほうが、スペースと手間の削減になります。基本的に、1つのスタイルシート内の要素は同じ（または類似の）スタイルを持つことになり、ページ上のすべてのテキスト要素についてフォント、色、配置を列挙する必要はありません。以下のようにまとめることができます。

h1, h2, h3, p {
font-family: arial,
color: #00000
}

不要なセレクタは省略する

サイトのデザインを完成させる過程で、コードが少し乱雑になることも。そのため、不要なセレクタがないかを確認し削除することが重要です。また、複雑すぎるセレクタにも気をつけましょう。例えば、ウェブサイトでリストを装飾するには「.classname li {」だけでOKで、bodyやcontainerなどのセレクタは不要です。

9. フォントを適切に取り込む

フォントを適切に取り込んで使用することも、CSSの最適化につながります。

@font-faceを使用する

フォントの追加方法はさまざまですが、正しく動作させるには以下の手順に従ってください。

Font SquirrelのWebfont Generator
Font SquirrelのWebfont Generator
  1. 使用するフォントをダウンロード─GoogleやAdobeなど、さまざまなプラットフォームでフォントを見つけることができます。選択したフォントの.ttfファイル（True Type）をダウンロードしてください。
  2. Font SquirrelのWebfont Generatorにフォントをアップロード─ウェブフォントキットを生成したらダウンロードします。これの中には.ttf, .woff, .woff2, .eotなどの複数のファイルが入っています。CSSファイルもここに含まれます。
  3. FTPを使ってウェブフォントキットをサイトにアップロード─お使いのホスティングサービスによって異なりますが、FTPクライアントまたはcPanelなどのコントロールパネルのファイルマネージャーを使用して、サイトのファイルにアクセスするのが一般的です。
  4. テキストエディターでCSSファイルを編集─NotePadやSublimeなど、好きなHTMLテキストエディターを使用してください。CSSファイルには、ソースURLが記載されており、ウェブフォントキットがサーバーのどこに格納されているかを反映するために書き換えが必要です。ウェブサーバー上の各フォントファイルが保管されている場所を指すようにファイルパスを貼り付けます。実際には以下のようになります。
@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}

そしてCSSファイルでfont-familyタグを使い指定してください。

パフォーマンスの向上のため、そして、読み込み中にサイトのレイアウトが意図せず調整されるのを防ぐため、フォントを事前に読み込んでおくことができます。フォントを事前に取り込み、WOFF2形式のフォント（または最小のフォントサイズ）を最初に読み込むことで、パフォーマンスが劇的に改善されます。これは、<head>タグ内に1行のコードを記述するだけで実行可能です。Better Web Typeの簡単な例は以下の通り。

<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

別の方法として、利用する文字を制限（サブセット化と呼ばれる）することもできます。特定の文字しか利用していないフォントがある場合（ヘッダーやロゴでしか使用していない等）、フォントファイルの全体を呼び出す必要はなく、実際に必要な数文字のみ呼び出せばOKです。the new codeの説明に従えば、「Hello」という文字だけを呼び出すには、以下のコードが使用できます。

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

ローカルにインストールしたフォントを使用する

上記で挙げた方法は、ローカルにインストールされているフォントを使用する前提で、これがベストプラクティスです。表示速度が大幅に改善され、サイトの読み込み処理を他のサイトの速度に依存する必要がなくなります。

フォントの使いすぎに注意

さまざまなフォントを組み合わせることは、個性を出したり、明るい印象を与える上で効果的な手法となり得ます。しかし一歩誤れば、サイトが破損する恐れもあります。

font-variation-settings下で複数のスタイルを指定すると、重なり合って一方がもう一方を上書きしてしまう可能性が高くなります。そのため、シンプルにフォントのプロパティを使用してください。

.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}

予備のフォントを用意する

たとえフォントを取り込んでCSSで使用しても、確実に動作するとは限りません（特に古いブラウザでアクセスした場合）。サイト訪問者には、できる限り優れたブラウジング体験を提供したいものです。

そのためには、指定のフォントが正しく読み込まれない場合に備えて、フォールバックフォントを設定しておきましょう。font-familyにフォントを指定した後、続けてフォールバックフォントも記述するのが得策です。これによって、まずは指定したフォントを呼び出し、問題があれば次に記述されたフォント、それも読み込めなければその次のフォント…というように処理されるようになります。

W3Schoolsによると、フォントファミリーは、主に5つのカテゴリに分類されています。各カテゴリで人気のフォールバックフォントには、以下のようなものが挙げられます（欧文フォント）。

  • セリフ体：Times New Roman、Georgia、Garamond
  • サンセリフ体：Arial、Tahoma、Helvetica
  • 等幅フォント：Courier New
  • Cursive（筆記体）：Brush Script MT
  • Fantasy（ファンタジー）：Copperplate、Papyrus

10. アクセシビリティを意識する

すべてのユーザーに向けたウェブサイトの構築は非常に重要であり、CSSのベストプラクティスにもつながります。できる限り多くのユーザーに訪問、利用してもらうために、障がいを抱えたユーザーに配慮したアクセシビリティ対応策は欠かせません。

以下の点を意識し、アクセシビリティ向上を目指しましょう。

  • 別の色を適用してリンクを目立たせる。
  • ポップアップをEscキーで消せるようにする。音声読み上げソフト（スクリーンリーダー）や拡大読書器を使用しているユーザーは、ポップアップを非表示にする「X」が見えないことが多く、キー操作で消すことができるようにすることが重要。
  • そもそもポップアップが表示されないデバイスもあるため、重要な情報はポップアップ画面以外で伝える。
  • ツールチップのようなホバー要素は、マウスホバーだけでなくTabキーでも出現するようにする。
  • アウトラインが消えないブラウザでは、キーボードがフォーカスしている要素の周りに自動的にアウトラインを表示する。outline:noneで無効化することができるが、音声読み上げソフトを使用しているユーザーや、視力が低下し、ナビゲーションに強調要素などが必要なユーザーにとっては不可欠な要素であるため非推奨。
  • フォーカスインジケーターの改善。フォーカスされた要素のアウトラインは、ナビゲーションのため多くのユーザーにとって欠かせないが、デフォルトのアウトラインはほとんど見えないことも。見えやすくなる様、:focusを使用して、フォーカス中の要素を目立たせるスタイルを指定することが大切。同じことを:hoverで実行して、ホバー効果（カーソルが画像やリンクなどの上を通過すると変化が起こること）を高めることも有効。以下は、ワシントン大学のアクセシビリティガイドラインに掲載されている、:focusを使用した好例です。
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}

上記コードでは、白い背景に黒いテキストでリンクが表示されますが、キーボードフォーカス（ユーザーが要素にTabキーを押したとき）に移動すると、背景が白いテキストに変わります。また、カーソルを合わせたときにも同じ効果があります。

11. 命名規則を使用する

一見大したことではありませんが、一度決めた名前は、将来にわたって使用し続けるものであり、適切でない名前をつけてしまうと、後々問題になり、修正に手間や費用がかかる可能性があります。CSSの記述を始める前にあらかじめ命名規則を決めて、それに従うようにしましょう。

そうすることで、誤った要素を参照する可能性が低くなり、後々デバッグにかける時間を大幅に削減することができます。FreeCodeCampは、CSSの標準表記（例えば、font-weightは「fontWeight」）を継承することを推奨しています。

BEMを取り入れる

クラス名の一貫性を保つには、BEMを取り入れましょう。BEMは、ユーザーインターフェースを再利用可能な要素に分割する構造です。

BEMは、Block（ブロック）、Element（要素）、Modifier（修飾語）の頭文字をとった略語であり、それぞれの単語は以下を意味します。

  • ブロック─メニュー、ヘッダー、フッター、カラムなど、サイト上のあらゆるデザインの塊。「.main-nav」や「.footer」などの名前が好ましい。
  • 要素─フォント、色、ボタン、一覧、リンクなど、各ブロックを構成する要素や部品。BEMでは、各要素名の前にアンダースコア（ _ ）を2つ付ける。例えば、サイトのヘッダーで使用されているフォントに名前をつける場合は「.header__font」となります。
  • 修飾子─フォント名、太さ、サイズ、色の値、配置の値など、ブロック内の要素のスタイルを設定するもの。例えば、サイトのヘッダーのフォントカラーを指定する場合は、要素と修飾子をハイフン（–）2つで区切り、「.header__font–red」となります。

BEM、あるいはチームで採用した別の命名規則に従うことで、後の編集やデバッグの作業が効率化されます。

12. !importantタグはなるべく使用しない

!importantタグの使いすぎにも気をつけましょう。

このタグはエラーを解決してくれる優れものですが、それゆえに多用してしまう傾向も。エラーを解消できる反面、このタグに依存することで、最終的にコード全体に!importantタグが散乱し、サイトの破損につながりかねません。

これには、特異性が関係しています。ウェブブラウザは、特異性の高いセレクタを優先、つまりより重要であると判断します。!importantタグは、他よりも重要なプロパティを識別するために使用されます。

したがって、!importantタグを複数使用すると、時に前のタグが上書きされてしまうことがあります。また、多用することでサイトが壊れたり、スタイルが正しく読み込まれなかったりすることも。このタグは一時的な解決策として使用されるのが一般的ですが、結果として長期的に使用してしまうことも多々あり、特にデバッグ時にエラーを引き起こすことがあります。

!importantタグの使用が推奨されるのは、エンドユーザーが音声読み上げソフトなどの補助ツール用にスタイルを上書きできるようにする場合のみです。また、ユーティリティクラスを扱う際にも有用になります。

13. フレックスボックスを活用する

CSSを扱う際には、フレックスボックスを活用することで作業効率が上がるかもしれません。フレックスボックスとは、従来のfloatプロパティに代わるもので、ページ上の要素を柔軟に並べることができます。

CSS-Tricksは、フレックスボックスについて、柔軟なボックスモジュールであり、コンテナ内でのレイアウトの配置や分散に気をつけながらCSSを構成することができる手法と紹介しています。一番の特徴は、コンテナのサイズを指定する必要がなく、サイズの変化に合わせて、プロパティが柔軟に調整されること。モバイル端末対応のレスポンシブデザインの作成に理想的です。

またもう1つの大きな強みは、方向に捉われないという点。つまり、レイアウトが垂直方向にも水平方向にも縛られることがありません。そのため、画面の向きが大きく変化する複雑なサイトやアプリケーションの設計に適しています。標準的なCSSレイアウトはブロックベースであり、一方でフレックスボックスのレイアウトは「flex-flow」の値に依存します。CSS-Tricksが以下のようなわかりやすい図を提示しています。

フレックスボックスレイアウトの仕組み（出典: CSS-Tricks）
フレックスボックスレイアウトの仕組み（出典: CSS-Tricks）

フレックスボックス内にある要素は、主軸と交差軸で構成され、各要素とプロパティはフレックスコンテナのサイズに応じて「流動的に動く」ように設計されています。

14. WordPressのテーマファイルは直接編集しない

最後にご紹介するのは、WordPressユーザー向けのベストプラクティスです。WordPressテーマのファイルは、直接編集しないこと。サイトの更新によって、変更内容が消えてしまったり、サイトが壊れてしまったりする可能性があります。そのようなリスクはなんとしても避けましょう。

その代わりに、テーマカスタマイザーの「追加CSS」機能を使って柔軟に編集を行うことができます。ただし、この方法ではCSSがhead内に挿入されることは念頭に置いてください。

しかし「追加CSS」フィールドに記述した内容は、テーマやサイトの更新、またはテーマを変更してもそのまま残ります。

大規模な編集が必要になった場合は、別途スタイルシートを使用するか、子テーマのstyle.cssファイルを編集することをお勧めします。この場合も、更新による影響を受けることはありません。

まとめ

初心者にとっては、正確かつ整理された状態でCSSを記述するのは至難の業。それでも、最初のうちから面倒くさがらずにベストプラクティスを学び、取り入れていくことで、後々発生することになる手間や頭痛の種を回避することができます。

CSSのベストプラクティスを集約した今回の記事が、今後何年にもわたって、機能的かつアクセシビリティの高いウェブサイトの構築の道標的存在になれば本望です。

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.