Web制作初心者が知るべき管理しやすいコーディング

2023年12月29日2024年9月4日

自分のコードがあとから見るとわかりにくい…
どこかを触れば別のところが崩れそうで怖い…

Webサイトを作る際に、直面するのが「管理しやすいコーディング」の難しさです。

この課題は初心者にとっては特に難しく感じられるかもしれませんが、基本的なテクニックを理解すれば、効率的で管理しやすいコーディングが実現可能です。

ここでは、2年以上のWeb制作経験を生かして、初心者でも容易に採用できる「管理しやすいコーディングのコツ」を5つご紹介します。
これらのテクニックを活用することで、Webサイトの管理が大幅に楽になるため、ぜひ最後までご覧ください。

HTMLとCSSを明確に区別する

Web制作を行う際にHTMLとCSSの違いを正しく理解し、その役割を明確に区別することは、最も基本的な考え方で大切です。

役割を明確にすると以下のようになります。

HTML：ウェブページの骨組みを作るための言語で、ページの構造や内容を定義します
CSS：ウェブページの装飾やデザインを担う言語で、ページの外観やスタイルを指定します。

例えば、HTMLタグの中に直接スタイル属性を記述することで、フォントの大きさや色を定義する以下の方法は明確化されていない例です。

    <h1 style="color: blue; font-size: 24px; margin-bottom: 20px;">サンプルタイトル</h1>
    <p style="color: green; font-family: Arial, sans-serif; font-size: 16px;">これはサンプルの段落です。</p>
    <p style="color: green; font-family: Arial, sans-serif; font-size: 16px; margin-top: 10px;">もう一つの段落です。</p>

この方法は、短いコードや単一のページでは問題ないかもしれませんが、大規模なサイトや複数のページにまたがるプロジェクトでは大きな問題を引き起こします。

HTMLとCSSが混在すると、以下のような問題が発生する可能性があります。

保守性の低下: スタイル情報が各HTML要素に散らばっているため、デザインの変更や更新が複雑で時間がかかるようになります。また、同じスタイルを複数のページで再利用するのが困難になります。
コードの冗長性: 同じスタイルを複数の場所で定義する必要があり、コードの重複が生じます。これは、ファイルサイズの増加につながり、結果としてページの読み込み速度が遅くなる可能性があります。
可読性の低下: HTMLとCSSが混在すると、コードの見通しが悪くなり、開発者がコードを理解しにくくなります。これは特に、チームでの開発や後に他の開発者がコードを引き継ぐ際に問題となります。

太字にするためだけにhタグをつかったりする下記のような例も、明確に分けられていない状態なので、気をつけましょう。

<h2>今日の特別メニュー</h2>

タグは見出しを意味するために存在しますが、この例では単にテキストを太字にするために使われています。

これは見出しが「今日の特別メニュー」であれば問題はありませんが、太字にするためだけに使用されていることが問題です。

太字にするのはページの外観やスタイルを指定するCSSの領域なので、下記のようにマークアップしてCSSでスタイリングしましょう。

<p><strong>今日の特別メニュー</strong></p>

このようHTMLとCSSを適切に使い分けることで、Webサイトのコードがより整理され、管理しやすくなると共に、SEOやアクセシビリティにも良い影響を与えます。

クラス名をつけてCSSを徹底する

CSSはタグやidに対しては使用せずにクラス名に対して使用するというルールを設けると、詳細度が均一になり管理しやすくなります。

   .css {
        color: red;
    }

詳細度に関してはCSSの優先度のようなものです。

以下のようなルールに基づいてCSSは優先度が決まっています。

セレクタのタイプ	詳細度のスコア
インラインスタイル	1000
IDセレクタ	100
クラスセレクタ	10
属性セレクタ	10
要素（タグ）セレクタ	1
疑似クラス	10
疑似要素	1
全称セレクタ (*)	0
継承またはデフォルト値	0

この表は、異なるタイプのセレクタが持つ詳細度のスコアを示しています。

詳細度のスコアが高いほど、そのセレクタはより強い優先度を持ちます。

インラインスタイル（HTML要素のstyle属性内で定義）は最も高い詳細度を持ちます。
IDセレクタは100のスコアを持ち、かなり高い優先度があります。
クラスセレクタ、属性セレクタ、および疑似クラスは同じ詳細度（10）を持ちます。
要素セレクタや疑似要素はより低い詳細度（1）を持ちます。
全称セレクタ（*）や継承されたスタイルは詳細度スコアが0で、最も優先度が低いです。

これらのルールに基づき一定の詳細度を保つことで、スタイルの上書きなどが発生するときも、効果的に管理できるようになります。一定の詳細度を維持することは、スタイルシートの整合性と予測可能性を高め、より効率的なメンテナンスを可能にします。

CSSはクラス名で指定して詳細度を保つ

よく教材などではidセレクタに対してCSSをあてたりしていますが、あくまでも例としてわかりやすく提示しているだけなので、実際のコーディングでは非推奨ということをおぼえておいて下さい。

!importantは使わない

CSSにおける!importantは、特定のスタイル宣言を強制的に適用するためのものです。

先程説明した詳細度を無視して最優先されます。

しかし、この使用は慎重に行うべきで、基本的には避けるべきです。

!importantの使用は、スタイルシートの保守性と拡張性を低下させ、後からの変更を困難にします。

以下のような場合、.cssに対して色の変更を行う際に上書きができずに、原因を該当コードまでさかのぼって変更しにいくという手間が発生します。

    .css {
        color: red!important;
    }

数ページなら影響は限定的ですが、中規模〜大規模なプロジェクトではかなりの損失になりかねません。

ですので、基本的には!importantは使用しない方がいいです。

 .css {
        /* プラグインのCSS打ち消しのための記述 */
        color: red!important;
    }

!importantの使用は、あくまで例外的なケースに限定し、常にその理由をコメントで説明するようにしましょう。これにより、CSSの保守性と拡張性を損なうことなく、必要なスタイリングを適切に実施できます。

打ち消しを極力しない

次のポイントは打ち消しを極力しないことです。

これは、あるセレクタで適用したスタイルを、別のセレクタで無効化することを指します。

例えば下記のようなリストの余白を打ち消す記述はよく見かけます。

/* 全てのリストアイテムにマージンを適用 */
.list-item {
margin-top: 2.4rem;
}

/* 最初のリストアイテムのマージンを打ち消し */
.list-item:first-child {
margin-top: 0;
}

このような記述は下記のようにすることで、打ち消しをする必要のないコードを書くことができます。

/* 最初のリストアイテム以外にマージンを適用 */
.list-item:not(:first-child) {
margin-top: 2.4rem;
}

これ単体では特に問題の無いように感じますが、大きなプロジェクトや長期にわたるプロジェクトで、コードの複雑化や管理の難しさを引き起こす主要因となります。

打ち消しの少ないコードを書くことで、初心者でも管理しやすい、清潔で効率的なCSSコードを書くことが可能になります。

わかりやすいクラス名をつける

わかりやすいクラス名をつけることは、CSSの効率的な使用とメンテナンス性の向上に非常に重要です。

以下は、わかりやすく効果的なクラス名を設定するためのポイントになります。

意味のある名前：クラス名は、そのスタイルが何をするのかを直感的に理解できるように命名します。例えば、.button, .menu, .header などはその目的が明確です。
一貫性のある命名規則：プロジェクト全体で一貫した命名規則を採用することで、チームメンバーが迷わずにクラスを識別・使用できるようにします。例えば、BEM（Block, Element, Modifier）のような命名規則があります。
具体的かつ簡潔な名前：抽象的すぎるまたは長すぎる名前は避け、具体的かつ簡潔な名前を使用します。例えば、.nav は .navigation の良い短縮形ですが、.n とすると意味が不明瞭になります。
スタイルではなく機能に基づく名前：.red や .big のようにスタイルを表す名前ではなく、.warning-text, .main-title のようにその機能や役割に基づいた名前を選びます。
汎用性の高いクラス名：再利用可能なスタイルには、汎用性の高い名前を付けます。例えば、.card, .alert-box などは多くの場所で再利用可能です。
状態を示す名前：オブジェクトの状態を示すクラス名（例：.is-active, .is-hidden）を用いると、JavaScriptによる動的なスタイル変更が容易になります。
プレフィックスの使用：特定のフレームワークやライブラリに依存するクラスには、プレフィックス（例：js-、ui-）を付けて、その目的を明確にします。