前記事で本来ならば縦にしか並ばないブロックレベル要素を横に並べるためのプロパティについて
基本的なことをまとめてみましたが。
それぞれのプロパティによって様々な制約がありました。
何が使えて何が使えないのか、しっかりと理解をしておく必要があります。
今回は幅と高さの指定方法について見ていきたいと思います。
親要素と子要素
特に高さと幅については「親要素」と「子要素」に関する知識が必要になります。
<タグ>タグの中のコンテンツ</タグ>の塊のことを「要素」と呼ぶことは何度も書いてきました。
<p>インコは可愛いね<p>
などはその一例です。
しかし要素はそのようなシンプルなものばかりではなく。
要素の中に要素を組み込んで様々なパフォーマンスを示していきます。
例えば以下のように記述をした場合
<ul > <li>redの色のインコ</li> <li>#3cb371の色のインコ</li> <li>#adff2fの色のインコ</li> <li>blueの色のインコ</li> </ul>
<LI>タグはList Itemの略で、リストの項目を記述する際に使用するもので４つの項目が記されています。
そしてそれら全体が<UL>タグで囲まれています。
<UL>タグはUnordered Listの略で、リスト項目に順序を付けないという目印。
<UL>タグの中にある<LI>タグで囲まれた要素には順番が付けられていないという指定になります。
この場合。
<UL>タグで囲まれた部分を親要素
中身のダグで囲まれた部分を子要素といいます。
つまり。
要素Aの中に要素Bが入っているときAはBの親要素BをAの子要素といいます。
高さと幅を指定する際、この親要素子要素が意味を持ってきます。
widthとheightの指定の仕方
width: 〇〇px; height: 〇〇px;
などと表記します。
なお単位はpxやem,％などを使います。
例えばpタグをボックスにして色を付け破線の枠を付けるとします。
<p>インコと毎日遊んでいます。</p>
上記要素にCSSで
width: 150px;
height: 150px;
background: #adff2f;
border: dashed 3px green;
}
と記述すると以下のように表示されます。
ただwidth とheightはdispkay:inlineではその指定ができなかったですよね。
CSSに書き込んでも反映されません。
つまりdisplay:inlineが初期値であるタグ、たとえばaタグやの場合は高さと幅を設定することができないということになります。
どちらかを指定をしない場合やwidthをautoにした場合。
高さ（height）だけ指定し、幅（width)の指定をしない場合やwidthをauto(数値を指定しない時の初期値)
にした場合。
画面いっぱいに幅が広がります。
幅（width)を指定し、高さ（height）を指定しない場合には画面いっぱいに広がることはなく。
要素の分だけの高さになります。
親要素と子要素の関係
幅（width）
親要素があるときに
幅（width)の指定をしない場合やwidthをauto(数値を指定しない時の初期値)
にした場合。
親要素の幅指定に従います。
divタグで親要素を作りclassで名前をつけて目印とします。
<div class="width"> <p>インコと毎日遊んでいます。</p> </div>>
CSSでクラスのデザイン指定を行います。
幅を50pxにしてみました。
.width{
width: 50px;
}
すると以下のように表示されます。
要素の量が多いとこの様にはみ出してしまいます。
幅を指定し、高さを指定しない場合
しかしwidthでpxで幅指定した場合、子要素の指定に従います。
p {
width: 150px;
height: 150px;
background: #adff2f;
border: dashed 3px green;
}
.width{
width: 50px;
}
CSSこのように記述すると以下のように表示されます。
小要素の幅の指定に従っていることがわかります。
高さ（height）
pxで指定をした場合、幅と同じ様に子要素が優先されます。
CSSを以下のように書き換えたとして。
親がともに５０px,子が150pxに指定されたとすると
p {
width: 150px;
height: 150px;
background: #adff2f;
border: dashed 3px green;
}
.width{
width: 50px;
height: 50px;
}
子要素の指定通りに表示されます。
ただし実際にデザインするときには子要素の値は親要素より持ち飯作するのが原則です。
そうしないとデザインが崩れます。
幅や高さを％で指定した場合
親要素のwidthやheightの値が指定されずautoになっている場合には、%指定をしても効きません。
しかしたとえば以下のように親要素を加えてHTML文書を記述します。
<div class="grandpa"> <div class="parent"> <p>インコは可愛いね</p> </div> </div>
次にCSSで外側のwidth要素を200px
その内側のdiv要素の幅を60%tosi.
更にその子要素であるpタグを30％に指定しました。
そしてそれぞれの色を変えておきます。
.grandpa {
width:200px;
background:red;
}
.parent {
width: 60%;
background: green;
}
.parent p {
width: 30%;
background:orange;
}
すると以下のように表示されます。
親の60％が小要素で。
小要素のさらに30％がpタグの孫要素です。
均等に表示するときなど％は便利です。
ちなみに高さを％で指定することは殆どありません。
まとめ
基本的なことは以上です。
高さや幅が指定できるものとできないもの。
親要素と子要素については更にさまざまなことを知る必要がありますが。
それはまた別記事で行くことにします。
この記事へのコメントはありません。