🌟

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

2026/01/24に公開

CSS

HTML

tech

技術ブログ21日目。
本日は、HTML/CSSの読みやすさを追求します。

〇課題お問い合わせフォーム
修正前のコードはブラウザで表示すると一見普通ですが、要素の配置に固定値や不適切なタグが多用されており、スマホ対応や項目の追加が非常に困難な状態です。

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

<section id="contact">
  <div class="header-text">お問い合わせ</div>
  <div class="form-container">
    <div class="input-row">
      <span>お名前</span><br>
      <input type="text" style="width: 400px; padding: 5px;">
    </div>
    <div class="input-row" style="margin-top: 20px;">
      <span>メールアドレス</span><br>
      <input type="email" style="width: 400px; padding: 5px;">
    </div>
    <div class="input-row" style="margin-top: 20px;">
      <span>お問い合わせ内容</span><br>
      <textarea style="width: 400px; height: 100px;"></textarea>
    </div>
    <div class="submit-area">
      <button class="btn">送信する</button>
    </div>
  </div>
</section>

#contact {
  padding: 50px;
  background-color: #eee;
}

.header-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}

.form-container {
  width: 500px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
}

.input-row span {
  font-size: 14px;
  color: #666;
}

.btn {
  margin-top: 30px;
  padding: 10px 50px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

〇リファクタリングの指針
名著『リーダブルコード』に基づき、以下の点を意識しました。
一度に一つのことを
HTMLで構造を作り、CSS Gridでレイアウトを管理し、CSS変数で装飾を整える。
これらのタスクを分離して整理する。

制御フローを読みやすくする
インラインスタイル（style属性）を排除し、すべてのスタイルをCSS側に集約。
予測可能な管理フローを作成する。

意味のある名前
btn や input-row といった名前を、contact-form__submit のように具体的な役割を示す名前に
変更する。

〇修正後コード

<section class="contact-section">
  <h2 class="contact-title">お問い合わせ</h2>
  
  <form class="contact-form">
    <div class="contact-form__group">
      <label for="name" class="contact-form__label">お名前</label>
      <input type="text" id="name" name="name" class="contact-form__input" required>
    </div>

    <div class="contact-form__group">
      <label for="email" class="contact-form__label">メールアドレス</label>
      <input type="email" id="email" name="email" class="contact-form__input" required>
    </div>

    <div class="contact-form__group">
      <label for="message" class="contact-form__label">お問い合わせ内容</label>
      <textarea id="message" name="message" class="contact-form__textarea" required></textarea>
    </div>

    <div class="contact-form__actions">
      <button type="submit" class="contact-form__submit">送信する</button>
    </div>
  </form>
</section>

:root {
  --color-primary: #0000ff;
  --color-text: #333;
  --color-bg: #f4f4f4;
  --color-border: #ccc;
  --width-container: 600px;
}

.contact-section {
  padding: 60px 20px;
  background-color: var(--color-bg);
}

.contact-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 40px;
  color: var(--color-text);
}

.contact-form {
  max-width: var(--width-container);
  margin: 0 auto;
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  /* 一度に一つのことを：レイアウトの定義 */
  display: grid;
  gap: 24px;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box; /* パディングを含めた幅計算 */
}

.contact-form__textarea {
  height: 150px;
  resize: vertical;
}

.contact-form__submit {
  padding: 12px 48px;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: opacity 0.2s;
}

.contact-form__submit:hover {
  opacity: 0.8;
}

/* レスポンシブ対応：スマホ表示 */
@media (max-width: 480px) {
  .contact-form {
    padding: 20px;
  }
}

〇主な修正ポイント
タスクの分離（一度に一つのことを）
HTMLからstyle属性やbrタグを排除。
余白や配置はすべてCSSのGridやGapで管理するようにし、HTMLを「文書構造のみ」に集中させました。

アクセシビリティの改善
spanタグをlabelタグに変更。for属性とid属性を使って入力欄と紐付けることで、項目クリックでのフォーカス移動を可能にし、ユーザーに親切な設計にしました。

マジックナンバーの排除と変数化
具体的な数値や色をCSS変数に置き換えました。
ブランドカラーの変更などを1箇所で制御できる保守性を確保しています。

レスポンシブ設計への転換
固定幅を廃止し、max-widthとwidth: 100%を組み合わせました。
これにより、画面幅が狭いスマホでも自動的にフィットするように修正しました。

〇参照先
▼公式ドキュメント

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

以上

Discussion