Bootstrap CSSコーディング標準

Bootstrap CSS コーディング規約 

概要

このドキュメントでは、より保守性が高く、パフォーマンスに優れ、堅牢なコードを実現し、Bootstrap の CSS およびコンポーネントと整合性の取れた HTML の記述に関するガイドラインを提供します。

1. セマンティックなタグの使用

  • 主な内容:

    • <article>、<aside>、<nav>、<footer> などのセマンティックなタグを可能な限り使用します。

    • <div> タグの過剰な使用は避けてください。

    • <hr> タグを使用して、コンテンツの区切りを作成します。

  • 例:

<article>
  <h2>記事タイトル</h2>
  <p>記事の内容</p>
</article>

<aside>
  <h3>サイドバー</h3>
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
  </ul>
</aside>

2. 文書構造

  • 主な内容:

    • 一貫性があり、意味のある文書構造に従ってください。

    • 明確な見出しレベル構造 (<h1> から <h6>) を使用します。

    • リスト (<ul>、<ol>、<dl>) を使用して、関連するコンテンツを整理します。

  • 例:

<h1>ページタイトル</h1>

<section>
  <h2>セクション1</h2>
  <p>セクション1の内容</p>

  <section>
    <h3>サブセクション1.1</h3>
    <p>サブセクション1.1の内容</p>
  </section>
</section>

<section>
  <h2>セクション2</h2>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
  </ul>
</section>

3. クラス命名規則

  • 主な内容:

    • セマンティックでわかりやすいクラス名を使用します。

    • ハイフン (-) で単語を区切ります (例: btn-primary)。

    • 略語や短すぎるクラス名は避けてください。

  • 例:

<button class="btn btn-primary">ボタン</button>

<ul class="product-list">
  <li>商品1</li>
  <li>商品2</li>
</ul>

4. レイアウト

  • 主な内容:

    • Bootstrap のグリッドシステムを使用して、レスポンシブなレイアウトを作成します。

    • インラインスタイルを使用してレイアウトを定義することは避けてください。

    • 適切なクラスを使用して、要素の配置と間隔を制御します。

  • 例:

<div class="container">
  <div class="row">
    <div class="col-md-8">メインコンテンツ</div>
    <div class="col-md-4">サイドバー</div>
  </div>
</div>

5. 表

  • 主な内容:

    • <table> 要素を使用して表を作成します。

    • <thead>、<tbody>、<tfoot> 要素を使用して、表の内容を整理します。

    • table-striped、table-bordered、table-hover などの適切なクラスを使用して、表のスタイルを設定します。

  • 例:

<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>名前</th>
      <th>メールアドレス</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>田中太郎</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>山田花子</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

6. フォーム

  • 主な内容:

    • <form> 要素を使用してフォームを作成します。

    • text、email、password などの適切な入力タイプを使用します。

    • ラベル (<label>) を使用して、フォームコントロールを識別します。

    • Bootstrap のフォームスタイルを使用して、フォームコントロールのスタイルを設定します。

  • 例:

<form>
  <div class="form-group">
    <label for="email">メールアドレス:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="password">パスワード:</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

7. ボタン

  • 主な内容:

    • <button> 要素を使用してボタンを作成します。

    • btn、btn-primary、btn-danger などの適切なクラスを使用して、ボタンのスタイルを設定します。

    • <a> 要素を使用して、リンクスタイルのボタンを作成します。

  • 例:

<button type="button" class="btn btn-primary">プライマリボタン</button>
<a href="#" class="btn btn-secondary">セカンダリボタン</a>

8. 画像

  • 主な内容:

    • <img> 要素を使用して画像を挿入します。

    • src 属性を使用して、画像の URL を指定します。

    • alt 属性を使用して、代替テキストを提供します。

    • img-fluid や img-thumbnail などの Bootstrap の画像クラスを使用して、画像のスタイルを設定します。

  • 例:

<img src="images/example.jpg" class="img-fluid" alt="説明文">

9. アクセシビリティ

  • 主な内容:

    • すべてのコンテンツがアクセスしやすく、支援技術を使用するユーザーを考慮していることを確認します。

    • セマンティックなタグと属性を使用して、アクセシビリティを向上させます。

    • 画像に代替テキストを提供します。

    • 適切な色のコントラストを使用します。

  • 参考資料:

10. パフォーマンス

  • 主な内容:

    • HTML コードを最適化して、パフォーマンスを向上させます。

    • インラインスタイルの使用は避けてください。

    • HTML コードを圧縮して、ファイルサイズを削減します。

  • 参考資料:

Q&A

Q1: Bootstrap のグリッドシステムをカスタマイズできますか？

A1: はい、Bootstrap のグリッドシステムは、独自のブレークポイントとカラム数を定義することでカスタマイズできます。詳細については、Bootstrap のドキュメントを参照してください。

Q2: Bootstrap の JavaScript コンポーネントを使用するにはどうすればよいですか？

A2: Bootstrap の JavaScript コンポーネントを使用するには、jQuery と Popper.js を HTML ファイルに含める必要があります。その後、JavaScript コードを使用してコンポーネントを初期化できます。

Q3: Bootstrap の最新バージョンはどこで入手できますか？

A3: Bootstrap の最新バージョンは、Bootstrap の公式ウェブサイト (https://getbootstrap.com/) からダウンロードできます。