共通のh1を持つ2つのセクションを持つdivの作成方法

2024-02-17 15:58 HTML デザイン ウェブ開発

方法1: HTMLとCSSを使用する方法 HTMLのマークアップでdivを作成し、その中に2つのセクションを配置します。CSSを使用して、セクションのスタイルと共通の見出しのスタイルを指定します。

<div class="container">
  <h1>共通の見出し</h1>
  <section class="section1">
    <!-- セクション1のコンテンツ -->
  </section>
  <section class="section2">
    <!-- セクション2のコンテンツ -->
  </section>
</div>
.container {
  /* divのスタイルを指定 */
}
h1 {
  /* 共通の見出しのスタイルを指定 */
}
.section1 {
  /* セクション1のスタイルを指定 */
}
.section2 {
  /* セクション2のスタイルを指定 */
}

方法2: Bootstrapを使用する方法 Bootstrapは、HTMLおよびCSSのフレームワークであり、レスポンシブなウェブデザインを簡単に実装することができます。

まず、BootstrapのCDNリンクをHTMLのheadセクション内に追加します。

<head>
  <!-- BootstrapのCDNリンク -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

次に、以下のコードを使用してdivとセクションを作成します。

<div class="container">
  <h1>共通の見出し</h1>
  <div class="row">
    <div class="col-md-6">
      <!-- セクション1のコンテンツ -->
    </div>
    <div class="col-md-6">
      <!-- セクション2のコンテンツ -->
    </div>
  </div>
</div>

この方法では、Bootstrapのグリッドシステムを使用して2つのセクションを横に配置しています。

以上が、共通のh1を持つ2つのセクションを含むdivの作成方法です。必要に応じて、CSSやBootstrapのクラスを使用してスタイルをカスタマイズすることができます。