名前あるものには特別な指示が与えられる
前回の記事で、
<div>は内容のかたまりをあらわすタグです。
という内容に触れました。
よく見ると、<div>は<div>でも、
それぞれの<div>の多くには名前がついています![ビックリマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif)
<div>だけじゃありません。
<li>とか<p> なんかにもついているものがありますね。
名前をつけるとどんないいことがあるかというと、
そのお名前ごとに異なる特別な指示ができるということです![ひらめき電球](https://stat.ameba.jp/blog/ucs/img/char/char2/089.gif)
名前はなんでもいいのですが、
つけられた名前にはそれぞれ特別な役割が与えられます。
header さんはこう
news さんはこう
と、そのお名前さんごとに表示方法を指示できます。
つまりそれがデザインですね。
では、どこで指示をしているのか、というと
アメブロのブロガーさんはよくご存知の
「スタイルシート(以下CSS)」と呼ばれるファイルになります。
ホームページの中で、
CSSはHTML(XHTML)ファイルの中に書くこともできますが、
多くは別のCSSファイルに指示を書いて、HTML(XHTML)ファイルから呼び出す
という方法をとります。
スタイルシートファイルを開くと
こんな風に指示が書いてあります。
なんでこんな一見面倒なことをするのかというと、
この方がずっと面倒じゃないからです。
HTML(XHTML)ファイルの中に全ての指示を一緒に書いてしまうと
それはもうごちゃごちゃになるであろう、
ということが予想されますよね![あせる](https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif)
それに、一つのホームページの中に
同じ指示をするところが何箇所も出てくる場合に
毎回一つ一つ指示を書いていたら大変すぎますね![DASH!](https://stat.ameba.jp/blog/ucs/img/char/char2/178.gif)
それに、最初はこの指示で行こう!と決めていたものを
途中で変更したくなったら、
全てのファイルの全ての同じ指示の箇所を探し出して
変更しなくてはなりません![DASH!](https://stat.ameba.jp/blog/ucs/img/char/char2/178.gif)
![DASH!](https://stat.ameba.jp/blog/ucs/img/char/char2/178.gif)
これは相当面倒です![むかっ](https://stat.ameba.jp/blog/ucs/img/char/char2/034.gif)
そもそもHTMLがやろうとしていることと
スタイルシートがやろうとしていることの役割自体が別なので
ファイルもわけてあげましょうということです。
構造をあらわすHTMLと
デザインをあらわすCSS
HTMLには名前をつけてあげて、デザインの指示は一箇所で出せば
何回も何回も同じ指示をあちこちで出さなくてもいいし、
指示内容を変更したいときも、一箇所のCSSをなおせば同じ名前がつけられた箇所は
同じように変更されるわけですね~![ひらめき電球](https://stat.ameba.jp/blog/ucs/img/char/char2/089.gif)
これは便利![アップ](https://stat.ameba.jp/blog/ucs/img/char/char2/173.gif)
次回は「名前の前についている」classとかidってな~んだ
です
![読者登録してね](https://stat100.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_29.gif)
<div>は内容のかたまりをあらわすタグです。
という内容に触れました。
よく見ると、<div>は<div>でも、
それぞれの<div>の多くには名前がついています
![ビックリマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif)
<div>だけじゃありません。
<li>とか<p> なんかにもついているものがありますね。
<div id="header"></div>
<div id="news"></div>
<div class="text"></div>
<div id="news"></div>
<div class="text"></div>
名前をつけるとどんないいことがあるかというと、
そのお名前ごとに異なる特別な指示ができるということです
![ひらめき電球](https://stat.ameba.jp/blog/ucs/img/char/char2/089.gif)
名前はなんでもいいのですが、
つけられた名前にはそれぞれ特別な役割が与えられます。
header さんはこう
news さんはこう
と、そのお名前さんごとに表示方法を指示できます。
つまりそれがデザインですね。
では、どこで指示をしているのか、というと
アメブロのブロガーさんはよくご存知の
「スタイルシート(以下CSS)」と呼ばれるファイルになります。
ホームページの中で、
CSSはHTML(XHTML)ファイルの中に書くこともできますが、
多くは別のCSSファイルに指示を書いて、HTML(XHTML)ファイルから呼び出す
という方法をとります。
スタイルシートファイルを開くと
#header{
○○○:△△△;
○○○:△△△;
○○○:△△△;
}
.text{
○○○:△△△;
○○○:△△△;
○○○:△△△;
}
○○○:△△△;
○○○:△△△;
○○○:△△△;
}
.text{
○○○:△△△;
○○○:△△△;
○○○:△△△;
}
こんな風に指示が書いてあります。
なんでこんな一見面倒なことをするのかというと、
この方がずっと面倒じゃないからです。
HTML(XHTML)ファイルの中に全ての指示を一緒に書いてしまうと
それはもうごちゃごちゃになるであろう、
ということが予想されますよね
![あせる](https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif)
それに、一つのホームページの中に
同じ指示をするところが何箇所も出てくる場合に
毎回一つ一つ指示を書いていたら大変すぎますね
![DASH!](https://stat.ameba.jp/blog/ucs/img/char/char2/178.gif)
それに、最初はこの指示で行こう!と決めていたものを
途中で変更したくなったら、
全てのファイルの全ての同じ指示の箇所を探し出して
変更しなくてはなりません
![DASH!](https://stat.ameba.jp/blog/ucs/img/char/char2/178.gif)
![DASH!](https://stat.ameba.jp/blog/ucs/img/char/char2/178.gif)
これは相当面倒です
![むかっ](https://stat.ameba.jp/blog/ucs/img/char/char2/034.gif)
そもそもHTMLがやろうとしていることと
スタイルシートがやろうとしていることの役割自体が別なので
ファイルもわけてあげましょうということです。
構造をあらわすHTMLと
デザインをあらわすCSS
HTMLには名前をつけてあげて、デザインの指示は一箇所で出せば
何回も何回も同じ指示をあちこちで出さなくてもいいし、
指示内容を変更したいときも、一箇所のCSSをなおせば同じ名前がつけられた箇所は
同じように変更されるわけですね~
![ひらめき電球](https://stat.ameba.jp/blog/ucs/img/char/char2/089.gif)
これは便利
![アップ](https://stat.ameba.jp/blog/ucs/img/char/char2/173.gif)
次回は「名前の前についている」classとかidってな~んだ
![はてなマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif)
もう一つブログ作りました![ビックリマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif)
よかったらお越しくださいね~(^-^)ノ
![ビックリマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif)
よかったらお越しくださいね~(^-^)ノ
![読者登録してね](https://stat100.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_29.gif)