HTML の<div>と CSS のスタイリングをマスターする

はじめに

この実験では、HTML の<div>タグを使って Web ページを異なるセクションまたは部分に分割する方法を学びます。また、<div>タグを使ってグループ化された要素に CSS を適用する方法も学びます。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。

Web ページ構造の作成

あなたのテキストエディタでindex.htmlファイルを開きます。

まず、doctype 宣言、<html>、<head>、および<body>タグを追加することで HTML ファイルの基本構造を作成します。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body></body>
</html>

ヘッダーの追加

このステップでは、<div>タグを使って Web ページにヘッダーセクションを追加します。

<body>タグの中に、クラス名が"header"の<div>タグを追加します。

<div class="header"></div>

<div>タグの中に、ヘッダーセクションを表すコンテンツを追加します。たとえば：

<div class="header">
  <h1>Welcome to my website</h1>
</div>

サイドバーとメインコンテンツセクションの追加

次に、<div>タグを使って Web ページにサイドバーとメインコンテンツセクションを追加します。

<body>タグの中に、クラス名が"container"のもう 1 つの<div>タグを追加します。

<div class="container"></div>

"container"の<div>タグの中に、さらに 2 つの<div>タグを追加します。1 つはサイドバー用で、もう 1 つはメインコンテンツ用です。それぞれにクラス名"sidebar"と"main-content"を付けます。

<div class="container">
  <div class="sidebar">
    <!-- add sidebar content -->
  </div>
  <div class="main-content">
    <!-- add main content here -->
  </div>
</div>

<div>タグの中に、サイドバーとメインコンテンツセクションを表すコンテンツを追加します。たとえば：

<div class="container">
  <div class="sidebar">
    <h2>About Me</h2>
    <p>Hi, my name is John and I'm a web developer.</p>
  </div>
  <div class="main-content">
    <h2>My Latest Project</h2>
    <p>Check out my latest web project!</p>
  </div>
</div>

フッターの追加

最後に、<div>タグを使って Web ページにフッターセクションを追加します。

<body>タグの中に、クラス名が"footer"のもう 1 つの<div>タグを追加します。

<div class="footer"></div>

<div>タグの中に、フッターセクションを表すコンテンツを追加します。たとえば：

<div class="footer">
  <p>&copy; 2021 My Website. All rights reserved.</p>
</div>

Web ページのスタイリング

これで<div>タグを使って Web ページの基本構造を作成したので、CSS スタイルを適用してページをもっと見やすくすることができます。

あなたのテキストエディタでstyle.cssファイルを開き、または新しいファイルを作成してstyle.cssと名前を付け、<head>セクション内の<link>タグを使ってindex.htmlファイルにリンクします。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

style.cssファイルで、先ほど使った異なるクラス名に次のようなスタイルを追加します。

/* ヘッダースタイル */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* コンテナースタイル */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* サイドバースタイル */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* メインコンテンツスタイル */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* フッタースタイル */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

Web ページのプレビュー

これで Web ページの構造を作成し、<div>タグを使って CSS スタイルを適用したので、Web ブラウザで Web ページをプレビューしましょう。

index.htmlとstyle.cssファイルを保存します。
Web ブラウザでindex.htmlファイルを開いて Web ページを見ます。

CSS を使ってきれいにスタイリングされた、ヘッダー、サイドバー、メインコンテンツ、およびフッターセクションがある Web ページが表示されるはずです。

まとめ

この実験では、HTML の<div>タグを使って Web ページを異なるセクションまたは部分に分割する方法を学びました。また、割り当てられたクラス名を使って異なるセクションに CSS スタイルを適用する方法も学びました。これらの技術を使えば、より複雑で視覚的に魅力的な Web ページを作成できます。

HTML の<div>タグと CSS のスタイリング