幅と高さを決める【width、height】:CSS入門

ブログが作りたい!CSS入門 > 幅と高さを決める【width、height】:CSS入門

幅と高さを決める【width、height】:CSS入門

幅と高さを決める【width、height】:CSS入門

CSS入門(22)

今回は、幅と高さを指定するwidth、heightを使ってみます。

お話は、次の順番で進みます。

▲ページの先頭に戻る

幅と高さを指定する(width、height)

1:前回までのお話

(01)

前回は、text-alignを使って、h1大見出しの中央揃えを行いました。

h1大見出しの中央揃え

以下、前回までのCSSコードです。

(02)

ちなみに、ブログの限られた幅で説明する必要があったため、ブラウザをすぼめて表示させていましたが、実際は次のように右側に余裕があるはずです。

右側に余裕がある

だからと言うわけでもないのですが、この領域の幅を指定してみようかと思います。「何がしたいねん???」と思うでしょうけれど、理由は、次回のfloatのお話で分かると思います。

▲ページの先頭に戻る

2:幅と高さ(width、height)の単位

(03)

幅と高さの指定には、一般的に、「px」、「%」を使うことが多いようです。レイアウトに自由度をもたせたくない場合は「px」、自由で良い場合は「%」を使います。

「px」は、分かりやすいと思うのですが・・・・・・いかがでしょうか?

えぇ、そうです。例えば、幅(width)を500px分の長さにしたければ、500pxを指定してあげれば良いだけです。高さ(height)にしても同様です。

(04)

それでは「%」は、何を基準にした割合なのでしょう???・・・何を隠そう、「%」はブラウザの表示領域を100%とした場合の割合なのです。

「%」はブラウザの表示領域を100%とした場合の割合

▲ページの先頭に戻る

3:幅(width)を「px」で指定してみましょう

(05)

それでは、理解を深めるために、ちょっと試してみましょう。

記事「「idセレクタ、classセレクタとは?:CSS入門」」で、<div>タグに、id属性(#blog-infoと#blog-pre)を付けたのは覚えているかしら?

グループ化して、背景色を付けたんですけど、OKですか?覚えていますか?

今回は、この「<div>タグの幅を指定してみよう!」というお話です。次のように、「px」による幅(width)の指定を追加してみましょう。

(06)

ブラウザで表示してみてください。#blog-preの領域(2:紹介文)の幅だけが、400pxになります。

幅400px

(07)

ブラウザを左右に伸縮させれば、400pxを指定した#blog-preの領域だけが固定されていることが分かるはずです。

ブラウザを左右に伸縮

▲ページの先頭に戻る

4:幅(width)を「%」で指定してみましょう

(08)

今度は、#blog-preの領域(2:紹介文)の幅を、次のように「%」で指定してみます。

(09)

ブラウザで表示してみてください。#blog-preの領域の幅(2:紹介文)だけが、50%になります。

幅50%

(10)

ブラウザを左右に伸縮させれば、「px」のときとは違い、#blog-preの領域の幅も合わせて伸縮することが分かるはずです。

常に表示領域に対して、50%が保たれています。

ブラウザを左右に伸縮

(11)

さらに、#blog-info(1:ブログの情報)の幅も、widthを「50%」にしておいてください。

#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】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

おぉぉぉぉ!デザインが!!!

やっと、休暇ボケがなおって、しばらくぶりにこのブログに訪れてみれば、デザインが一新!カッコいい!

kumakurowさん、センスありますねー!

こんだけカスタマイズされたブログを見せられたら、CSS講座にも説得力が増すと言うもんですねー。

テンプレート変更

清音さん、こんにちは。
コメントありがとうございます。(・∀・)/

お久しぶりーふッス。
休暇モードが抜けないほどに、良い休暇を過ごされたようですね。
羨ますぃ。(´ー`)

そうなのです。
私はテンプレートを変更したのです。

好評なようで、良かったです。
ありがとうございます。(o゚ω゚o)

CSS入門も、あと数回で、ひと区切り付きそうです。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/292-1b4df4b7
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて