| この要素は、意図的にBOX範囲を決めBOXを作れる要素です。 | ||
| 任意の場所をこの<div></div>で囲めば、その範囲を一つのボックスとして定義できるのです。 入れ子にする事も可能です。 入れ子とは、箱の中に箱が入っている状態です。 つまり、</div>の中にさらに、<div></div>を書けば、箱の中に箱が出来た事になります。 そしてさらに<div></div>を書けばまたその中に箱が出来ます。 もちろん全く同じ大きさで、だぶらせて重ねてゆく事も出来ます。 PhotoshopやIllusutratorを使う方はレイヤーを使うと思いますが、それと同じような使い方が出来るという事でもあります。 ただし、HTML5を使ってゆく場合は、構造化タグが様々有りますので、それらを、出来るだけ活用した方が良いです。 | ||
| 記述の仕方 | ||
| <div> | ||
| <h1>ボックスでまとめます。</h1> | ||
| <p>divタグでここまでがBOXになりました</p> | ||
| </div> | ||
| 記述自体は上のように任意の場所を囲ってゆき、cssで、幅等を指定してゆけば良いのです。 あと、divで囲っている中にある要素自体が持っているBOXも無くなってはないですよ。 上の例だと、H1とPタグ自体のBOXはちゃんと単体で指定する事が出来るという事です。 | ||
| ここまでは、cssの概要的（理屈的）な部分を説明してきましたが、次からは、実際に記述して変化させてゆく実践編になります。 | ||
| IDとCLASS (cssの指定が少し解ってから読むとより解りやすいです） | ||
| この二つの仕様法を覚えるととても便利です。 使い方はそれぞれの要素にidとclassをつけて、名前で管理できるという事ですが、この説明ではよくわからないと思います。 idはそのページ内での使用は,同じ名前では一度きりとなります。 classは何度でも同じ名前を使用できます。 そしてcssで、指定する際は、idやclassにつけた名前の前にidなら#classなら.をつけて指定します。 先にどう記述するか見てみましょう。 | ||
| 記述例 | ||
| <h1 class="red">赤くします</h1> | ||
| <h1 id="red">赤くします</h1> | ||
| cssの記述 | ||
| #red{ | ||
| color:red; | ||
| } | ||
| .red{ | ||
| color:red; | ||
| } | ||
| 実際はidにこのような使い方はしません。 どういう意味かというと、idはそのページで一度しか、同じ名前で使えません。 違う名前ならいくつでも作れます。 もしあなたが、文字色を赤で指定したい場合、それは、h1でもh2でもspanで囲った一部にも、文字色赤を適応したいとしたら、id要素を使うと、その度に名前を変えなければいけないしcssをcolor:redといちいち記述しなければいけません。 ところが、これをclassを使えば、何度でもclass="red"と言う同じ名前が使えますので、<h1 class="red"><h2 class="red"><span class="red">という風に違う要素にも同じ名前で同じ効果を適応できます。 cssも.redで、クラス名redをつけた部分全てに効果を適応できます。 ですから、よく使う効果などは、初めから、名前を決め、効果も決めておくと楽です。 よく使うのが,文字色のパターンです。 赤や緑黄色と言った色を初めからcssに記述しておいて、その効果を使いたい所に、それぞれの名前を付けたクラスを取り付けるだけです。 上の例では、効果は一つしか書いてませんが、様々な効果をセットしておく事ももちろん可能です。 idは、大きなくくりに使います。 一度しか使えないという特性を利用して、管理しやすくする為に使います。 | ||
| 下の本達は私自身読んで良く活用している本です。お進めできますよ。3番目の実践入門は少し難しいですが、構造化について具体的に書いてあり助かりました。水色の本はとても楽しいです。辞典は一冊あった方が良いですね。 | ||
|