幅と高さを決める【width、height】：CSS入門
CSS入門（22）
今回は、幅と高さを指定するwidth、heightを使ってみます。
お話は、次の順番で進みます。
幅と高さを指定する（width、height）
1：前回までのお話
（01）
前回は、text-alignを使って、h1大見出しの中央揃えを行いました。
以下、前回までのCSSコードです。
（02）
ちなみに、ブログの限られた幅で説明する必要があったため、ブラウザをすぼめて表示させていましたが、実際は次のように右側に余裕があるはずです。
だからと言うわけでもないのですが、この領域の幅を指定してみようかと思います。「何がしたいねん？？？」と思うでしょうけれど、理由は、次回のfloatのお話で分かると思います。
2：幅と高さ（width、height）の単位
（03）
幅と高さの指定には、一般的に、「px」、「%」を使うことが多いようです。レイアウトに自由度をもたせたくない場合は「px」、自由で良い場合は「%」を使います。
「px」は、分かりやすいと思うのですが・・・・・・いかがでしょうか？
えぇ、そうです。例えば、幅（width）を500px分の長さにしたければ、500pxを指定してあげれば良いだけです。高さ（height）にしても同様です。
（04）
それでは「%」は、何を基準にした割合なのでしょう？？？・・・何を隠そう、「%」はブラウザの表示領域を100%とした場合の割合なのです。
3：幅（width）を「px」で指定してみましょう
（05）
それでは、理解を深めるために、ちょっと試してみましょう。
記事「「idセレクタ、classセレクタとは？：CSS入門」」で、<div>タグに、id属性（#blog-infoと#blog-pre）を付けたのは覚えているかしら？
グループ化して、背景色を付けたんですけど、OKですか？覚えていますか？
今回は、この「<div>タグの幅を指定してみよう！」というお話です。次のように、「px」による幅（width）の指定を追加してみましょう。
（06）
ブラウザで表示してみてください。#blog-preの領域（2：紹介文）の幅だけが、400pxになります。
（07）
ブラウザを左右に伸縮させれば、400pxを指定した#blog-preの領域だけが固定されていることが分かるはずです。
4：幅（width）を「%」で指定してみましょう
（08）
今度は、#blog-preの領域（2：紹介文）の幅を、次のように「%」で指定してみます。
（09）
ブラウザで表示してみてください。#blog-preの領域の幅（2：紹介文）だけが、50%になります。
（10）
ブラウザを左右に伸縮させれば、「px」のときとは違い、#blog-preの領域の幅も合わせて伸縮することが分かるはずです。
常に表示領域に対して、50%が保たれています。
（11）
さらに、#blog-info（1：ブログの情報）の幅も、widthを「50%」にしておいてください。
次回予告
次回は、段組みレイアウト【float】について書く予定です。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/05/07 更新日：2008/05/07
« 「文字の左右・中央揃え【text-align】」｜「段組みレイアウト【float】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
おぉぉぉぉ！デザインが！！！
テンプレート変更
コメントありがとうございます。(・∀・)/
お久しぶりーふッス。
休暇モードが抜けないほどに、良い休暇を過ごされたようですね。
羨ますぃ。(´ー｀)
そうなのです。
私はテンプレートを変更したのです。
好評なようで、良かったです。
ありがとうございます。(oﾟωﾟo)
CSS入門も、あと数回で、ひと区切り付きそうです。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/292-1b4df4b7
kumakurowさん、センスありますねー！
こんだけカスタマイズされたブログを見せられたら、ＣＳＳ講座にも説得力が増すと言うもんですねー。