LabEx
ログイン登録

HTML で div 要素を作成してスタイリングする

JavaScriptBeginner
オンラインで実践に進む

はじめに

この実験では、参加者は HTML における<div>要素の作成とスタイリングの基本概念を探求し、その目的、構造、およびウェブページデザインにおける多様性を理解することに焦点を当てます。この実験は、学習者を<div>要素の使用の包括的な旅に導き、基本的な作成から始まり、高度なスタイリング技術まで進みます。

参加者は、<div>要素がウェブコンテンツを整理およびグループ化するための重要なコンテナとしてどのように機能するかを学び、そのブロックレベルの特性を見つけ、サイズ、位置、および視覚的外観をカスタマイズする技術を練習します。実際の例と手動操作の演習を通じて、学生は論理的で構造的なウェブページレイアウトを作成するための<div>要素の使用に関する実践的なスキルを獲得し、デザインと機能の両方を向上させます。

div 要素の目的を理解する

このステップでは、HTML における<div>要素の基本的な目的と、それがウェブページコンテンツを構造化および整理するためにどのように使用されるかについて学びます。

<div>（区分）要素は、他の HTML 要素をグループ化して整理するために使用されるコンテナです。これは、開発者が論理的なセクションを作成し、コンテンツのグループにスタイリングを適用するのに役立つ多用途のブロックレベル要素です。<div>を、他の要素を保持し、ウェブページのレイアウトを構造化するのに役立つボックスのように考えてください。

<div>要素の基本的な使い方を示すために、簡単な HTML ファイルを作成しましょう。WebIDE を開き、~/projectディレクトリにdiv-example.htmlという名前の新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Element Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to My Website</h1>
      <p>This is a paragraph inside a div element.</p>
    </div>

    <div>
      <h2>About Section</h2>
      <p>Here's some information about our project.</p>
    </div>
  </body>
</html>

この例では、2 つの<div>要素を使用して、ページ上に別々のセクションを作成しました。各<div>には見出しと段落が含まれており、<div>が関連するコンテンツをまとめる方法を示しています。

<div>要素の主な特徴：

  • ブロックレベル要素であり、通常は新しい行で始まります
  • 他の HTML 要素を含むことができます
  • レイアウトとスタイリングの目的で頻繁に使用されます
  • CSS がなければ固有の視覚的表現はありません

ウェブブラウザで表示した場合の例の出力：

HTML div example output in browser

テキストコンテンツ付きの基本的な div を作成する

このステップでは、<div>要素を作成し、その中にテキストコンテンツを追加する方法を学びます。前のステップを基に、<div>要素の中に意味のあるテキストを追加する方法を探求します。

WebIDE を開き、~/projectディレクトリのdiv-example.htmlファイルを変更して、より詳細なテキストコンテンツを含めます：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Text Content Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to Our Learning Platform</h1>
      <p>This div contains an introduction to our website.</p>
      <p>We provide interactive learning experiences for web development.</p>
    </div>

    <div>
      <h2>Course Highlights</h2>
      <p>Our courses cover various web technologies:</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

この例では、<div>要素にテキストコンテンツを追加するいくつかの方法を示しています：

  • 見出しタグ（<h1>、<h2>）を使用する
  • <p>タグを使って段落を追加する
  • <ul>と<li>タグを使った箇条書きのリストを含める

各<div>は複数の種類のテキストと HTML 要素を含むことができます。この柔軟性により、ウェブページ上に構造化された整理されたコンテンツを作成することができます。

ウェブブラウザで表示した場合の例の出力は次のようになります：

HTML div text content example output

div 要素に背景色を追加する

このステップでは、インライン CSS スタイルを使用して<div>要素に背景色を追加する方法を学びます。背景色は、視覚的な区切りを作成し、ウェブページのデザインを強化するのに役立ちます。

~/projectディレクトリのdiv-example.htmlファイルを開き、背景色を含むように変更します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Background Color Example</title>
    <style>
      .intro-section {
        background-color: #f0f0f0;
        padding: 15px;
      }

      .courses-section {
        background-color: #e6f2ff;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="intro-section">
      <h1>Welcome to Our Learning Platform</h1>
      <p>This section has a light gray background.</p>
      <p>Background colors help create visual hierarchy.</p>
    </div>

    <div class="courses-section">
      <h2>Course Highlights</h2>
      <p>This section has a light blue background.</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

この例では、背景色を追加する 2 つの方法を示しています：

  1. <head>セクションのインライン CSS styleタグを使用する
  2. 特定の背景色を持つ CSS クラスを作成する
  3. <div>の中にいくらかのスペースを作るためにpaddingを追加する

背景色に関するポイント：

  • 16 進数の色コード（例：#f0f0f0）を使用する
  • 色名または RGB 値を使用することができます
  • background-colorプロパティが背景を設定します
  • paddingは<div>の中にスペースを追加します

例の視覚的出力：

Div background color example output

div 要素のブロックレベル特性を探求する

このステップでは、<div>要素のブロックレベル特性と、ウェブページのレイアウトにおけるその振る舞いについて学びます。<div>要素は、自動的に新しい行で始まる別個のコンテンツセクションを作成する能力において独特です。

~/projectディレクトリに次の内容のblock-level-example.htmlという名前の新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Block-Level Characteristics</title>
    <style>
      .block-example {
        border: 2px solid blue;
        margin: 10px 0;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="block-example">
      <h2>First Div Block</h2>
      <p>
        This is the first div element. Notice how it takes up the full width of
        its container.
      </p>
    </div>

    <div class="block-example">
      <h2>Second Div Block</h2>
      <p>
        This div starts on a new line, even though the previous div is right
        above it.
      </p>
    </div>

    <p>
      This is a paragraph outside the divs to show the block-level behavior.
    </p>
  </body>
</html>

<div>要素の主なブロックレベル特性：

  1. 常に新しい行で始まります
  2. 親コンテナの全幅を占めます
  3. スタイリングと配置が容易な「ブロック」状のコンテンツを作成します

ブロックレベルの性質を示すために、次のように追加しました。

  • 各<div>の境界を視覚化するための青い枠線
  • 余白と内側の余白を表示するためのマージンとパディング
  • 垂直に積み重なる方法を示すための複数の<div>

例の視覚的出力は次のようになります。

Div block-level layout example

div のサイズと配置をカスタマイズする

このステップでは、CSS プロパティを使用して<div>要素のサイズと配置をカスタマイズする方法を学びます。これにより、より複雑で視覚的に魅力的なウェブレイアウトを作成できます。

~/projectディレクトリに次の内容のdiv-sizing-example.htmlという名前の新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Sizing and Positioning</title>
    <style>
      .container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
      }

      .box {
        width: 300px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
        padding: 15px;
        border: 2px solid #333;
      }

      .inline-boxes {
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Div Sizing and Positioning Example</h1>

      <div class="box">
        <h2>Fixed Size Div</h2>
        <p>This div has a fixed width of 300px and height of 200px.</p>
      </div>

      <div class="inline-boxes">
        <div class="box">
          <h2>Inline Box 1</h2>
          <p>Flexbox allows divs to sit side by side.</p>
        </div>
        <div class="box">
          <h2>Inline Box 2</h2>
          <p>Divs can be easily positioned horizontally.</p>
        </div>
      </div>
    </div>
  </body>
</html>

<div>のサイズと配置をカスタマイズするための重要な CSS プロパティ：

  1. widthとheight：<div>のサイズを制御します
  2. margin：<div>の周りに余白を追加します
  3. padding：<div>の中に余白を追加します
  4. display: flex：フレキシブルなレイアウトを作成します
  5. max-width：<div>の最大幅を制限します
  6. margin: 0 auto：<div>を水平方向に中央に配置します

例の視覚的出力は次のようになります。

Div sizing and positioning example

まとめ

この実験では、参加者は HTML における<div>要素の基本的な使い方とスタイリングを探求し、ウェブページの構造と組織におけるそれらの役割の理解に焦点を当てました。この実験では、学習者が基本的な<div>コンテナを作成し、テキストコンテンツを追加し、背景色を適用し、これらの多用途な HTML 要素のブロックレベル特性を調べるように導きました。

参加者は、<div>が関連するコンテンツをグループ化するための柔軟なコンテナとしてどのように機能するか、ウェブページ内で論理的なセクションを作成するためにどのように使用できるか、およびレイアウトとスタイリングの基礎を提供するかを学びました。手を動かした例を練習することで、学習者は<div>要素を使用してウェブコンテンツを構造化し、基本的な CSS プロパティを適用する実践的なスキルを身につけ、HTML ページの構成とデザイン技術の理解を深めました。

関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development