僕は僕でだれかじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【HTMLのお勉強】HTMLを構成する7つの基本構成要素:グループ化(ブロック要素・インライン要素)

ちょっと、間が空いてしまいましたが。。。

前回は「リンク」のお話をしました。

覚えてますか??

少しおさらいをしておきましょう。

WWWの一番の醍醐味が、この「リンク」の仕組みです。

HTMLをよりよい文書にするには、欠かせない機能なのです。

それぞれの文書をつなげることができる。

それが「リンク」の役割なのです。

また「リンク」のもうひとつの用法として「関係性を示す」というものがあります。

このあたりは、Vol.15のメルマガを読み返してみてください。

途中から読んでいただいている方は、仕様書をどうぞw

http://goo.gl/G2MPw

ということで。

前回の内容を踏まえて、下記をもう一度みておきましょう。

HTMLを構成する7つの基本構成要素

  1. 見出し(ブロック要素)
  2. 段落(ブロック要素)
  3. リスト(ブロック要素)
  4. 表組み(ブロック要素)
  5. 画像(インライン要素)
  6. リンク(インライン要素)
  7. グループ化(ブロック要素・インライン要素)

さて、今回で「HTMLを構成する7つの基本構成要素」のお話が終わります。

長期にわたり、簡単にですが説明をしてきました。

みなさんのお役に立っているでしょうか。

すぐに、成果が出るようなものでもないので、じわじわ勉強していただければと思います。

では、本日は「グループ化(ブロック要素・インライン要素)」についてです。

グループ化

「グループ化」は、主にレイアウト構造を保持するために利用します。

要素としては「DIV」と「SPAN」があります。

それぞれ、何が違うかと言うと、「ブロック要素」か「インライン要素」かの違いです。

「DIV」が「ブロック要素」で、「SPAN」が「インライン要素」になります。

これらを踏まえて、仕様書(日本語訳)を見ていきましょう。

http://goo.gl/qZD3Q

仕様書には、こう書かれています。

DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。

各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、

他のプレゼンテーション的語彙を示すことはない。

従って著者は、この両要素をスタイルシートやlang属性等と併用することで、

HTMLを自身の必要や好みに応じられるようにできる。

つまり、DIVとSPAN自体には文書構造的な意味はないんですね。

レイアウトやグループ化するための「箱」と考えてもらえれば理解しやすいと思います。

ただし、気をつけて欲しいのは、何でもかんでもDIVやSPANで囲うのも問題ありです。

階層が増えると、レンダリングするのに時間がかかります。

かつ、意味のない要素が増えると、HTML文書的にも良い文書とは言えないのです。

CSSレイアウトが出回り始めたときは、このDIVを多用したサイトが横行していました。

そのDIVを多用してマークアップする方々を「div厨」と呼んでいました。

この言葉は、元々は掲示板「2ちゃんねる」で使われ始めたと言われています。

DIVの使いすぎには注意しましょう!

以上で説明おわり!

これで、あなたもプロフェッショナル!

※HTML4.01をベースにお話をしています。

※WWWとは、World Wide Web の略です。