HTMLのスタイルを設定する方法CSSを使用した要素

序章

このチュートリアルでは、CSSを使用してHTMLコンテンツ分割要素（または<div>要素）のスタイルを設定する方法を紹介します。 <div>要素を使用して、ページのレイアウトを構造化し、Webページを個別のコンポーネントに分割して個々のスタイルを設定できます。 このチュートリアルでは、<div>要素を作成してスタイルを設定するとともに、<div>コンテナ内に他の要素を追加してスタイルを設定する方法を学習します。 これらのスキルにより、シリーズの後半でデモWebサイトの再作成を開始するときに、<div>要素をレイアウトツールとして使用できるようになります。

<div>要素は、HTMLドキュメントに開始タグと終了タグ</div>タグを追加することによって使用されます。 <div>要素自体は、通常、Webページの表示にほとんど視覚的な影響を与えません。 <div>要素のサイズ、色、およびその他のプロパティを指定するには、CSSを使用してスタイルルールを割り当てることができます。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

<div>要素の実際の調査

<div>要素がどのように機能するかを調べるために、実践的な演習を試してみましょう。 styles.cssファイルのすべてを消去します（以前のチュートリアルのコンテンツを追加した場合）。 次に、<div>タグセレクターに次のCSSルールを追加します。

styles.css

div {
 background-color: green; 
 height: 100px;
 width: 100px;
}

styles.cssファイルを保存します。 次に、index.htmlファイルに戻り、そこにあるすべてのものを消去し（コードの最初の行を除く：<link rel="stylesheet" href="css/styles.css">）、次のコードスニペットを追加します。

index.html

<div></div>

<div>要素には開始タグと終了タグがありますが、コンテンツは必要ありません。 index.htmlファイルを保存し、ブラウザにリロードします。 （HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法を参照してください）。

Webページには、CSSルールで指定されているように、幅100ピクセル、高さ100ピクセルの緑色のボックスが表示されます。

<div>要素のスタイル設定ルールができたので、ページに追加するすべての<div>要素はまったく同じ方法でスタイル設定されます。 ただし、Webサイトを作成するときに、すべてのHTML<div>要素を同じ方法でスタイル設定する必要はほとんどありません。 このため、開発者はクラスを作成して、さまざまな方法で<div>要素のスタイルを設定できることがよくあります。

<div>要素のクラスの作成を練習するには、作成したCSSルールを消去し、次の新しい3つのCSSルールセットをstyles.cssファイルに追加します。

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
}
   
.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
}
   
.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
}

このコードスニペットでは、div-1、div-2、およびdiv-3の3つの異なるクラスのスタイル設定ルールを作成しました。 クラスのCSSルールを宣言するときに、必要に応じてクラスセレクターの前に.を追加したことに注意してください。

styles.cssファイルを保存して、index.htmlファイルに戻ります。 作成した<div>要素を消去し、3つの<div>要素をindex.htmlファイルに追加して、定義したCSSクラスセレクターに対応するクラスをそれぞれに適用します。 styles.cssの場合：

index.html

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>

各開始<div>タグにクラス属性とクラス名を追加することにより、<div>タグに属性としてクラスを追加したことに注意してください。 ファイルを保存して、ブラウザにリロードします。 次のようなものを受け取るはずです。

Webページには、割り当てられたCSSスタイルルールに従ってそれぞれ異なる色とサイズでスタイル設定された3つの<div>要素が表示されます。 <div>要素はブロックレベル要素であり、このデフォルトの動作があるため、各<div>要素は独自の新しい行で開始することに注意してください。

<div>コンテナでのテキストの追加とスタイリング

<div>タグの開始タグと終了タグの間にテキストを挿入することにより、<div>コンテナ内にテキストを配置できます。 index.htmlファイルの各<div>要素内にテキストを追加してみてください。

index.html

<div class="div-1">Blue</div>
<div class="div-2">Red</div>
<div class="div-3">Yellow</div>

ファイルを保存して、ブラウザにリロードします。 これで、各<div>コンテナにテキストが表示されます。

<div>要素内のテキストにHTML要素を追加できます。 たとえば、index.htmlファイルの<div>タグ内のテキストにHTML見出しタグ（<h2>から<h4>）を追加してみてください。

<div class="div-1"><h2>Blue</h2></div>
<div class="div-2"><h3>Red</h3></div>
<div class="div-3"><h4>Yellow</h4></div>

ファイルを保存して、ブラウザにリロードします。 <div>コンテナ内のテキストは、<h1>から<h4>タグのデフォルトのプロパティに従ってスタイル設定されるはずです。

<div>要素もわずかに位置を調整していることに注意してください。 この再配置は、<h2>から<h4>要素のデフォルトのマージンプロパティが原因で発生します。 マージンについては、 CSSボックスモデルの次のチュートリアルで詳しく説明しますが、今のところ、マージンを無視しても問題ありません。

<div>コンテナ内のstyleテキストに、<div>クラスのルールセットでテキストプロパティ値を指定できます。 次のコードスニペットで強調表示されているように、styles.cssファイルのルールセットにプロパティと値を追加してみてください。

styles.css

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
  font-size: 10px; 
  color: white; iu
}
   
.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
  font-size: 20px; 
  color: yellow; 
}
   
.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
  font-size:30px;   
  color: blue; 
}

styles.cssファイルを保存し、index.htmlファイルをブラウザにリロードします。 <div>コンテナ内のテキストは、styles.cssファイルのCSSルールに従ってスタイル設定されているはずです。

結論

このチュートリアルでは、<div>要素の色とサイズのスタイルを設定する方法と、<div>要素の内側にテキストを追加してスタイルを設定する方法について説明しました。 <div>要素を使用して、 Webサイトの構築を開始するときに、ページのレイアウトを制御します。 次のチュートリアルでは、CSSボックスモデルと、それを使用して要素のコンテンツのサイズ、パディング、境界線、および余白を調整する方法について学習します。