div要素の使い方は？HTML5の要素を使いこなそう

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子

div要素っていつ使うの？

ユキ

文書をブロックレベルで区分したい時に使うよ！

結論からいうと、div要素は文書をブロックレベルで区分したいときに使います。

今回はdiv要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。

１： HTML5について
２： div要素とは
３： div要素の使い方
まとめ

１： HTML5について

HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。

つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。

２： div要素とは

div要素は文書をブロックレベルで区分分けするための要素です。

区画を分けるイメージで大丈夫です。
例えば家の間取りでもバスルームとリビングで区画が分かれていますよね。このような間取りでいう各部屋がdiv要素となるわけです。
もう少しわかりやすく書くと下記のようになります。

<div id="livingRoom"> <h2>リビング</h2>
</div>
<div id="bathRoom"> <h2>バスルーム</h2>
</div>

この要素自体は特に意味は持ちません。id属性やclass属性を付ける事によってCSSなどのスタイルシートやJavaScriptなどのDOM操作ができるようになります。
HTMLの中で最も多く使われる要素です。

３： div要素の使い方

<div align="center"> <p>中央寄りに文章の位置を調整します。</p>
</div>

div要素はテキストコンテンツであるため、body要素内で使用します。

div要素にはid属性やclass属性の他にalign属性も付与することができます。
この属性は文章の位置を指定することができます。文章全体の位置があらかじめ決まっているのであればこの属性をつける事によってCSSの読み込みがなくなるため処理速度の向上が可能になります。
align属性の値の意味と機能は下記の表の通りです。