【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です！

HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。

HTMLを学び始めたばかりという方の参考になれば幸いです！

divとは

divタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。

例えば、下記のように文字の色を赤にしたいときに、CSSで<h1>と<p>を別々に赤色と指定するのは面倒です。

HTMLファイル

<h1>赤い果物</h1>
<p>りんご</p>

CSSファイル

h1{color:red;}
p{color:red;}

そこで<div>と</div>で<h1><p>を挟めば、ひとかたまりのグループにまとめることができ、１つの記述で赤色と指定できます。

<div>
<h1>赤い果物</h1>
<p>りんご</p>
</div>

div{color:red;}

このようにdivタグは、挟んだ文字をひとかたまりのブロックにするものです。

div classについて

<div>と</div>で囲まれたコードがたくさんあると、CSSを適用するときにどのdivなのか区別がつきません。

そうならないためにdivにclassを付けます。class="付けたい名前"のように記述します。

<div class="test1">
<h1>赤い果物</h1>
<p>りんご</p>
</div>

<div class="test2">
<h1>黄色い果物</h1>
<p>バナナ</p>
</div>

CSSの方ではクラス名の前に「.(ドット)」をつけて記述します。

.test1{color:red;}

.test2{color:yellow;}

div classとdiv idの違い

classに似た属性にidがあり、使い方はほぼ一緒です。

ただしclassは同じ名前を１つのWebページ中で何度でも使えますが、idは１度しか使えません。

つまり同じHTMLファイルに同じ名前のidがあってはいけないということです。

離れたブロックで同じ色をもう１度指定したい場合などはclass属性を使います。

<div class="test1">
<h1>赤い果物</h1>
<p>りんご</p>
</div>

<div id="test2">
<h1>黄色い果物</h1>
<p>バナナ</p>
</div>

<div class="test1">
<h1>赤い花</h1>
<p>バラ</p>
</div>

CSSの方ではid名の前に「#(シャープ)」をつけて記述します。

.test1{color:red;}

#test2{color:yellow;}

style属性とは

div styleとは簡潔に言うと、外部のCSSファイルをHTMLファイルに埋め込むことなくCSSを記述するためのものです。

先ほどまでは<link rel=”stylesheet” href=”○○.css”>のように、CSSファイルをHTMLファイルに埋め込むという過程を通してCSSを適用していました。

それが<div style=”プロパティ:値;”>～</div>と記述することでCSSファイルを別に作らなくても済みます。

<div style="color:red">
<h1>赤い果物</h1>
<p>りんご</p>
</div>

<div style="color:yellow">
<h1>黄色い果物</h1>
<p>バナナ</p>
</div>

CSSファイルなしで、同じように表示されます。

ただし、HTMLファイルに直接記述すると煩雑になってしまうため、

携帯サイトなどCSSを外部化できない環境や、サイト内の少ない部分のみに適用させたいときの使用が勧められます。

style属性で画像を丸くしてみる

style属性はimgタグなどにも使えます。

ここではCSSのborder-radiusプロパティを利用して画像に丸さを持たせてみます。

<img src="ねこ.jpg" width="150" height="250" alt="" style="border-radius:50%;">

画像が楕円で表示されました。

関連記事リンク：【HTML】画像を表示させるには