Web開発において、HTML/CSS JavaScriptのコードが整理されていないと、修正や拡張が困難になります。クリーンなコードを意識することで、可読性や保守性が向上し、開発効率もアップします。本記事では、クリーンなHTML/CSSを書くためのベストプラクティスを解説し、レイアウト・整列のポイントについても詳しく紹介します。
クリーンコードが重要視される背景
ソフトウェア開発における「クリーンコード」という概念は、ロバート・C・マーチン（通称アンクル・ボブ）によって提唱されました。彼の著書『Clean Code: A Handbook of Agile Software Craftsmanship』では、可読性が高く、バグが発生しにくいコードを書くための原則が紹介されています。これは単に動作するコードを作るだけでなく、他の開発者が理解しやすく、メンテナンスしやすいコードを作ることを目的としています。
HTML/CSSにおいても、クリーンコードの考え方は非常に重要です。整理されたコードは、保守コストを削減し、パフォーマンスを向上させ、チーム開発の効率を高めます。また、検索エンジン最適化（SEO）にも好影響を与えるため、Web制作において欠かせない概念となっています。
1. クリーンなHTMLを書くための基本ルール
1-1. セマンティックなHTMLを意識する
HTMLの構造が適切であることは、クリーンなコードの基本です。<div> の乱用を避け、適切なHTMLタグを使用しましょう。
<!-- NG: divを多用 -->
<div class="header">
<div class="nav">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
</div>
</div>
<!-- OK: セマンティックなHTML -->
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>1-2. 適切なインデントとフォーマットを守る
インデントは統一し、読みやすい構造を維持しましょう。
<section>
<article>
<h2>タイトル</h2>
<p>記事の内容</p>
</article>
</section>1-3. クラス名・ID名は一貫したルールで命名
CSSの管理がしやすいように、BEM（Block Element Modifier）命名規則を活用すると良いでしょう。
<!-- NG: クラス名が一貫していない -->
<div class="blue-btn">Click me</div>
<!-- OK: BEMを使用 -->
<button class="button button--primary">Click me</button>2. クリーンなCSSを書くための基本ルール
2-1. 一貫した記述ルールを適用
CSSのプロパティの並び順を統一すると、可読性が向上します。
/* OK: プロパティを整理 */
.button {
display: inline-block;
width: 120px;
height: 40px;
margin: 10px;
padding: 8px;
color: white;
background: #007bff;
border: none;
transition: all 0.3s ease;
}2-2. 過剰なセレクタを避ける
/* NG: ネストが深すぎる */
.container .content .section .box .title {
color: red;
}
/* OK: シンプルなセレクタを使用 */
.title {
color: red;
}2-3. ショートハンドを活用する
/* NG */
border-width: 1px;
border-style: solid;
border-color: black;
/* OK */
border: 1px solid black;3. CSSの整列・配置のポイント
3-1. Flexboxを活用してレイアウトを整理
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}3-2. Gridレイアウトで柔軟な配置を実現
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background: lightgray;
padding: 20px;
}3-3. レスポンシブデザインを意識する
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}4. クリーンコードを維持するためのポイント
4-1. 不要なCSSを削除
Chrome DevToolsの「Coverage」機能を活用し、未使用のCSSを削除。
4-2. !importantの乱用を避ける
/* NG */
.button {
background: red !important;
}
/* OK */
.button--danger {
background: red;
}4-3. 変数を活用する
:root {
--primary-color: #007bff;
--secondary-color: #ff5733;
}
.button {
background: var(--primary-color);
}5. クリーンなJavaScriptを書くための基本ルール
5-1. 変数の命名規則を統一する
適切な命名規則を使用し、変数の意味を明確にすることでコードの可読性を向上させます。
// NG: 意味不明な変数名
let x = 10;
let y = "Hello";
// OK: 意味のある変数名を使用
let userAge = 10;
let greetingMessage = "Hello";1-2. コードの再利用性を意識する（関数化）
// NG: 同じ処理を繰り返し記述
console.log("Welcome, John!");
console.log("Welcome, Sarah!");
// OK: 関数を定義して再利用
function greetUser(name) {
console.log(`Welcome, ${name}!`);
}
greetUser("John");
greetUser("Sarah");1-3. ES6+ の機能を活用する
// NG: varを使用（スコープの問題が発生しやすい）
var count = 5;
// OK: let/constを使用
let count = 5;
const MAX_USERS = 100;6. まとめ
クリーンなHTML/CSSを書くことで、コードの可読性が向上し、保守性が高まります。以下のポイントを押さえておきましょう。
✅ セマンティックなHTMLタグを使用し、構造をわかりやすくする。
✅ CSSの記述ルールを統一し、管理しやすくする。
✅ Flexbox / Gridを活用して整ったレイアウトを作る。
✅ 不要なコードを削除し、パフォーマンス向上を図る。
✅ レスポンシブデザインを考慮し、あらゆるデバイスで適切に表示。
これらを意識することで、スムーズな開発が可能になります。クリーンなコードで効率的なWeb制作を目指しましょう！