名前あるものには特別な指示が与えられる

前回の記事で、

<div>は内容のかたまりをあらわすタグです。
という内容に触れました。

よく見ると、<div>は<div>でも、
それぞれの<div>の多くには名前がついています


<div>だけじゃありません。
<li>とか<p> なんかにもついているものがありますね。

<div id="header"></div>

<div id="news"></div>

<div class="text"></div>

名前をつけるとどんないいことがあるかというと、
そのお名前ごとに異なる特別な指示ができるということです

名前はなんでもいいのですが、
つけられた名前にはそれぞれ特別な役割が与えられます。

header さんはこう
news さんはこう

と、そのお名前さんごとに表示方法を指示できます。
つまりそれがデザインですね。

では、どこで指示をしているのか、というと
アメブロのブロガーさんはよくご存知の
「スタイルシート(以下CSS)」と呼ばれるファイルになります。


ホームページの中で、
CSSはHTML(XHTML)ファイルの中に書くこともできますが、
多くは別のCSSファイルに指示を書いて、HTML(XHTML)ファイルから呼び出す
という方法をとります。


スタイルシートファイルを開くと

#header{
○○○:△△△;
○○○:△△△;
○○○:△△△;
}


.text{
○○○:△△△;
○○○:△△△;
○○○:△△△;
}

こんな風に指示が書いてあります。



なんでこんな一見面倒なことをするのかというと、
この方がずっと面倒じゃないからです。


HTML(XHTML)ファイルの中に全ての指示を一緒に書いてしまうと
それはもうごちゃごちゃになるであろう、
ということが予想されますよね

それに、一つのホームページの中に
同じ指示をするところが何箇所も出てくる場合に
毎回一つ一つ指示を書いていたら大変すぎますね


それに、最初はこの指示で行こう!と決めていたものを
途中で変更したくなったら、
全てのファイルの全ての同じ指示の箇所を探し出して
変更しなくてはなりません


これは相当面倒です



そもそもHTMLがやろうとしていることと
スタイルシートがやろうとしていることの役割自体が別なので
ファイルもわけてあげましょうということです。

参照記事 「XHTML（HTML）とCSS」

構造をあらわすHTMLと
デザインをあらわすCSS

HTMLには名前をつけてあげて、デザインの指示は一箇所で出せば
何回も何回も同じ指示をあちこちで出さなくてもいいし、
指示内容を変更したいときも、一箇所のCSSをなおせば同じ名前がつけられた箇所は
同じように変更されるわけですね～

これは便利



次回は「名前の前についている」classとかidってな～んだ　です

もう一つブログ作りました
よかったらお越しくださいね～(^-^)ノ