<div>の使い方

前回<div>について触れましたが、今回はそこを深掘りしていきます。

まずはコードから見ていきます。それぞれ以下のコードを追加したらブラウザでチェックしてしましょう。

<HTML>

<body>
<div class="main">
<h1>main</h1>
</div>
<div class="sub">
  <h2>sub</h2>
</div>
</body>

<CSS>

.main{
  margin: 50px;
  padding: 20px;
  background-color: #ccc;
}

.sub{
  margin: 50px;
  padding: 20px;
  background-color: #F8E0E6;
}

結果はサンプルのように表示されます。

(サンプルはbodyの背景色を#E0ECF8に変更しています)

このように<div>を使うことで、コンテンツをブロックすることができます。またclass分けすることで、それぞれにCSSを使った様々な装飾を加えることもできます。

今後もよく出てくるので覚えておきましょう。

今回は<div>についてのお話でした。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です