🤖

【1日目】『リーダブルコード』を意識してHTML/CSSをリファクタリングしてみた

2026/01/01に公開

CSS

HTML

tech

今日から技術ブログを開始します。
初日は基本に立ち返り、HTML/CSSの読みやすさを追求します。

〇課題
グローバルナビゲーションとプロフィールカード

〇修正前コード(動くけれど読みにくいコード)

<body>
  <div class="a1">
    <div class="a2">
      <div class="item"><a href="/">HOME</a></div>
      <div class="item"><a href="/About">About</a></div>
      <div class="item"><a href="/blog">Blog</a></div>
    </div>
  </div>

  <div
    id="content-01"
    style="margin-top: 20px; padding: 10px; border: 1px solid #000"
  ></div>
  <div class="image-wrapper"></div>
  <img src="user.jpg" width="50" />
  <div class="text-bold">Tanaka Taro</div>
  <div class="description-text">Web Engineer / AWS Learner</div>
  <div class="btn-click" onclick="location.href='/contact'">Contact Me</div>
</body>

.a1 {
  background: #333;
  color: white;
}

.a2 {
  display: flex;
  list-style: none;
}

.item {
  padding: 10px;
}

.item a {
  color: #fff;
  text-decoration: none;
}

.text-bold {
  font-weight: bold;
  font-size: 20px;
}

.description-text {
  color: #666;
}

.btn-click {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-block;
}

〇リファクタリングの指針
名著『リーダブルコード』の以下の原則を意識しました。
読みやすさの基本定理：コードは他の人が最短で理解できるように書かなければならない。
名前に情報を詰め込む：名前を見ただけで情報を読み取れるようにする。

〇修正後コード

<body>
  <nav class="global-navigation">
    <ul class="nav-list">
      <li class="nav-item"><a href="/">HOME</a></li>
      <li class="nav-item"><a href="/about">About</a></li>
      <li class="nav-item"><a href="/blog">Blog</a></li>
    </ul>
  </nav>

  <article class="profile-card">
    <div class="profile-image-container">
      <img
        src="user.jpg"
        alt="田中太郎のプロフィール写真"
        class="profile-image"
      />
      <div class="profile-details">
        <h2 class="profile-name">Tanaka Taro</h2>
        <p class="profile-title">Web Engineer / AWS Learner</p>
      </div>

      <a href="/contact" class="button-primary">Contact Me</a>
    </div>
  </article>
</body>

/* ナビゲーション */
.global-navigation {
  background-color: #333;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 10px 15px;
}

.nav-item a {
  color: #ffffff;
  text-decoration: none;
}

/* プロフィールカード */
.profile-card {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 8px;
}

.profile-name {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 4px;
}

.profile-title {
  color: #666666;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.button-primary {
  display: inline-block;
  background-color: #007bff;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

〇主な修正ポイント
1.セマンティックHTMLへの移行
divを避け、nav, ul, li, article等を使用。
タグ自体に意味を持たせることで、ドキュメントの構造を一目で理解できるよう修正しました。

2.「名前」に情報を詰め込む
a1, a2といった抽象的なクラス名を排除。
global-navigationやprofile-cardなど、役割が明確な命名に変更しました。

〇参照先
▼公式ドキュメント
HTML要素の使い分け（セマンティックHTML）

CSSの命名規則

▼書籍
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

以上

Discussion