使用方法、HTMLコンテンツ分割要素

投稿日: 2022-04-20 2022-10-14
タグ: html, Spin Up

HTMLコンテンツ分割要素（<div>）は、個々のスタイリングのためにWebページを個別のコンポーネントに構造化するためのコンテナとして機能します。このチュートリアルでは、作成とスタイル設定の方法を説明します <div> Webページ上のコンテナ。

それ自体で、 <div> 要素はページのレイアウトにほとんど影響を与えず、通常、サイズ、色、位置、またはその他の機能を調整するために属性が与えられます。通常、開発者のスタイル <div> CSSを使用した要素ですが、このチュートリアルでは、 <div> 要素は、HTMLドキュメントで直接スタイル設定することで機能します。

The <div> 要素はHTMLでスタイル設定されます style 属性。以下の例に示すように、 <div> 要素には複数のスタイルプロパティを含めることができます。

<div style=”property: value; property: value;”></div>

に注意してください <div> 要素には開始タグと終了タグがありますが、コンテンツは必要ありません。どのように <div> 要素は実際に機能します、あなたの index.html 以下のコードをファイルして貼り付けます。（チュートリアルシリーズに従わなかった場合は、セットアップ手順を確認できます。 index.html チュートリアルHTMLプロジェクトの設定のファイル。

<div style="width:300px;height:200px; background-color:red;">
</div>

ファイルを保存して、ブラウザにリロードします。（ブラウザにファイルをロードする手順については、チュートリアルを参照してください。）幅300ピクセル、高さ200ピクセルの赤いボックスが次のように表示されます。

にコンテンツを追加することもできます <div> 開始と終了の間にコンテンツを追加することによる要素 <div> タグ。間にテキストを追加してみてください <div> そのようなタグ：

<div style="width:300px;height:300px; background-color:red;">
  This is text inside a div. 
</div>

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

置くこともできます <div> コンテナ内部 <div> コンテナ。黄色を追加してみてください <div> 赤の中のコンテナ <div> そのようなコンテナ：

<div style="width:300px;height:300px; background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>  
</div>

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

ご了承ください <div> 要素はブロックレベルの要素であり、独自の行から始まり、後続の要素を次の行にプッシュします。別のものを追加してみてください <div> 次の行にどのようにプッシュダウンされるかを理解するためのファイルの要素（2番目の行の隣に収まるのに十分なスペースがあるように見えますが） <div> エレメント：

<div style="width:300px;height:300px;background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>
</div>
<div style="width:100px;height:100px; background-color:blue;">
</div>

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

これで、方法の基本を理解する必要があります <div> 要素が機能します。に戻ります <div> このチュートリアルシリーズの3番目のセクションでWebサイトの構築を開始するときの要素。

getdocs

13036