HTMLを学ぶ。div要素とclass属性でサイト構成とブロックを学ぶ。

HTMLを学ぶ。div要素とclass属性でサイト構成とブロックを学ぶ。

ウェブデザインを行う上で使用頻度が一番多いと言っても良い『div要素』について今回は初心者向けに解説していきます。

今回はdiv要素について解説するよ

div要素って何ですか?

ブラウザ上では見えないけど、ブロックを定義する要素だよ

実はこのDiv要素、ブラウザ上では見ることは出来ない要素なのです。

div要素は普段見えない!?

冒頭にも解説しましたが、普段ブラウザ上でdiv要素を見ることはありません。

そしてこの『div要素』が何か意味を持つ訳でもありません。

例えば『P要素』であれば、その中の文章は『段落』であることをマークアップしますよね。

意味のない要素だっから書かない必要ないよね。

HTMLだけでサイトを表現する時は必要ないかもね。

それでは何故、『div要素』は必要なのでしょうか。

それは要素をブラウザ上でレイアウトする時に、重要な役割を持つことになります。

サイト構成(ワイヤーフレーム)を理解しよう

よくあるサイト構成(ワイヤーフレーム)です。

このヘッダーやコンテンツなど、それぞれがブロックと指定されてCSSでレイアウトされています。

これがHTMLだけだと縦長のサイト構成になります。

何となく伝わったかなぁ?

本当に何となく。。。ふわっとした感じ。。。

div要素を使うとこうなる

例えばコンテンツの中には、沢山の見出しと文章に溢れています。

これらがまずはブラウザに『コンテンツのブロック』だと教えてあげないと、パソコンやスマホは理解できないんだ。

そこで、まずはコンテンツの始まりに『<div class=”contents”>』そして終わり部分に『</div』と記述してあげます。

これで『このコンテンツは一つのブロック』としてパソコンやスマホは認識することができるんだよ。

この時、class属性でブロックの名前をつけてあげるのも忘れないでね。

class属性で名前をつける時には、特に決まりは無いのですが半角英数で記述することが基本です。

なるほど、コンテンツという箱を作ったイメージですね。

更にはこのコンテンツ内の記事に対してもdiv要素は使用できますよ。

沢山の箱が出来て、まとまって見えるのは分かりましたけど。。。
これでどうなるのかまだ理解できません。

焦らない。焦らない。次に説明するからね。

CSSを使ってdiv要素をレイアウトする

詳しくは『CSSを学ぶ。』シリーズで解説していますが、ここではCSSでどの様なことができるか解説しておきます。

『div要素で一つにまとめられたブロック』はCSSで簡単に配置を変えることができます。

HTMLは基本的に上から下に向かって表示されますが、CSSを使ってこれらの表示を変えることができます。

ブロックでまとめたからこそ、一気に配置変更をすることが出来るんです。

なるほど!
HTMLで箱・・・いや、ブロックにすることでCSSで簡単に配置を変えられるんですね!

これでサイト構成(ワイヤーフレーム)の作り方も理解できるんじゃないかな?

ヘッダーをブロックにしたり、コンテンツをブロックにしたり、サイドバーをブロックにしていけばレイアウトも簡単にできるってことですね。

いかがだったでしょうか。

div単体では意味を持たない要素ですが、CSSを活用するにはブロックという特徴をうまく使っていく必要があります。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事