HTMLのスタイルを設定する方法CSSを使用した要素
序章
このチュートリアルでは、HTMLコンテンツ分割要素のスタイル設定を紹介します。 <div> 要素-CSSを使用します。 The <div> elementを使用して、ページのレイアウトを構造化し、Webページを個別のコンポーネントに分割して個々のスタイルを設定できます。 このチュートリアルでは、作成してスタイルを設定します <div> 要素、および内部の他の要素を追加およびスタイル設定する方法を学習します。 <div> 容器。 これらのスキルはあなたが使用する準備をします <div> シリーズの後半でデモWebサイトの再作成を開始するときに、レイアウトツールとしての要素。
The <div> 要素は、開閉を追加することによって使用されます </div> HTMLドキュメントへのタグ。 それ自体で、 <div> 要素は通常、Webページの表示にほとんど視覚効果を与えません。 サイズ、色、およびその他のプロパティを指定するには <div> 要素には、CSSを使用してスタイルルールを割り当てることができます。
前提条件
このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。
探索 <div> 実際の要素
実践的な演習を試して、どのように <div> 要素が機能します。 中のすべてを消去します styles.css ファイル（以前のチュートリアルのコンテンツを追加した場合）。 次に、次のCSSルールを追加します。 <div> タグセレクター：
div {
background-color: green;
height: 100px;
width: 100px;
}
を助けて styles.css ファイル。 次に、あなたに戻ります index.html ファイル、そこにあるすべてを消去します（コードの最初の行を除く： <link rel="stylesheet" href="css/styles.css">）そして、次のコードスニペットを追加します。
<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;
}
このコードスニペットでは、3つの異なるクラスのスタイリングルールを作成しました。 div-1, div-2、 と div-3. 追加したことに注意してください . クラスのCSSルールを宣言するときに、必要に応じてクラスセレクターの前に。
を助けて styles.css ファイルしてあなたに戻る index.html ファイル。 消去します <div> 作成した要素と、3つを追加します <div> あなたへの要素 index.html ファイル、で定義したCSSクラスセレクターに対応するクラスをそれぞれに適用します styles.css:
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
クラスを属性としてに追加したことに注意してください。 <div> 各開口部にクラス属性とクラス名を追加してタグ付けします <div> 鬼ごっこ。 ファイルを保存して、ブラウザにリロードします。 次のようなものを受け取るはずです。
あなたのウェブページは3つを表示する必要があります <div> 割り当てられたCSSスタイルルールに従って、それぞれ異なる色とサイズでスタイル設定された要素。 それぞれに注意してください <div> 要素は、次のように独自の改行で始まります。 <div> 要素はブロックレベルの要素であり、このデフォルトの動作があります。
にテキストを追加してスタイリングする <div> 容器
あなたは中にテキストを入れることができます <div> 開始と終了の間にテキストを挿入することによるコンテナ <div> タグ。 それぞれの中にテキストを追加してみてください <div> あなたの要素 index.html ファイル：
<div class="div-1">Blue</div>
<div class="div-2">Red</div>
<div class="div-3">Yellow</div>
ファイルを保存して、ブラウザにリロードします。 これで、それぞれにテキストが表示されます。 <div> コンテナ：
内のテキストにHTML要素を追加できます <div> 要素。 たとえば、HTMLの見出しタグを追加してみてください（<h2> に <h4>）内のテキストに <div> あなたのタグ index.html ファイル：
<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> コンテナの場合、ルールセットでテキストプロパティ値を指定できます <div> クラス。 プロパティと値をルールセットに追加してみてください 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> これで、コンテナは、のCSSルールに従ってスタイル設定する必要があります。 styles.css ファイル：
結論
このチュートリアルでは、色とサイズのスタイルを設定する方法について説明しました。 <div> 要素とテキストを追加してスタイルを設定する方法inside a <div> エレメント。 を使用します <div> ウェブサイトの構築を開始するときにページのレイアウトを制御する要素。 次のチュートリアルでは、CSSボックスモデルと、それを使用して要素のコンテンツのサイズ、パディング、境界線、および余白を調整する方法について学習します。
