なんだか意味不明な文字ですが、HTMLではとても重要な概念です。タグの種類は大きく分けてこのブロックレベル要素とインライン要素に分けられます。
ブロックレベル要素とは、そのタグの終了時に改行されるものを指します。見出しのh1〜h6やpタグ、div やtableなどその数は多いです。すべて終了時に自動で改行されますよね。
それに対してインライン要素は終了時に改行されません。代表的なものでは a や img タグがあります。たとえば
上のように二つ続けて書いた場合、右側につながっていきます。
※例
ヤフー ヤフー2
これがインライン要素の特徴です。これに対してブロックレベル要素を続けて書いた場合、改行されます。
このように書くと
ヤフー
ヤフー2
となります。これがブロックレベル要素の特徴です。この違いを理解できればあとは楽勝です^^divタグの主な使い道はclassやid属性を指定し、スタイルシートでレイアウトや、様々な指定を行うためのものです。
まぁclassやidはdiv以外にもたとえば、同じ p タグでも、こっちは黒で、こっちは赤にしたいというときは、名札を付ける(好きな名前をつけれます)という意味の、このclass属性 か id 属性を使います。この二つ、意味は同じですが、id はページ中に同じ名前を2回使えません。class は何回でも使えます。使い方は
上の二つは同じ意味です。実際に色を変えるには、スタイルシートで指定します。
class の場合は、class名の前にドット(.)を入れます。
id の場合は、id名の前に#(シャープ)を入れます。
上の二つも同じ意味です。ややこしい場合はclass だけ使っていればいいかと思います^^;
これで、クラスをつけた方は
文字の色が変わります。もちろん、p タグのほかにもいろいろなタグに対して使えますよ。
広い範囲を指定したい場合は div タグを使います。
こうすれば、広い範囲を指定できます。
また、classの中のh1だけの色を変えたい場合は、class名のあとに、半角スペースを入れます。
このように、これを使いこなせれば、かなり便利です。というか慣れた人には必需品のタグです。
divタグを使った本格的レイアウトを行う方法や、概念など、divに関する詳細は
姉妹サイト「3日で作るホームページ中級偏」で詳しく解説していますので、
ぜひご覧ください。
これは特定の箇所だけにスタイルを指定したい場合などに使います。
divタグがブロック要素でspanがインライン要素です。
たとえば文章中の一部のみ色を変えたい場合があります。
そんなときこのspanタグが便利です。
fontタグで指定する方法もありますが、スタイルシートで指定することが推奨されてますので、
スタイルシートで行いましょう。
ホームページつくりは<span class="red">超</span>楽しい!
と記述し、スタイルシートに
.red{color:red}
と指定すると以下のようになります。
ホームページつくりは超楽しい!
となります。