要素の幅や高さを指定しよう！（width プロパティ、height プロパティ）

使用プロパティセレクタ { width: 幅; }

CSS一覧プロパティ辞典 … width プロパティ

width プロパティを使うと、要素の幅を広げたり狭めたりすることができます。値には単位の付く長さ（「px」、「em」など）やパーセンテージ、「auto（ブロック要素は左右いっぱいに広がり幅、高さのあるインライン要素は自動）」を指定できます。適応できる要素は、幅、高さのあるインライン要素、またはブロック要素です。

使用プロパティセレクタ { height: 長さ; }

CSS一覧プロパティ辞典 … height プロパティ

height プロパティを使うと、要素の高さを広げたり狭めたりすることができます。値には単位の付く長さ（「px」、「em」など）やパーセンテージ、「auto（ブロック要素は上下いっぱいに広がり幅、高さのあるインライン要素は自動）」を指定できます。適応できる要素は、幅、高さのあるインライン要素、またはブロック要素です。

デザイン、見栄えをよりよくするのに使える！

width プロパティを使用することにより、より細かく見栄えを指定したり、デザインを整理したりして自分の納得のいくレイアウトを作成することができます。

width プロパティの使用例

p 要素に width プロパティを使用し、文章の幅を200pxに指定しています。なお、文章の範囲がわかりやすいように背景色を「yellow」としています。

記述例
<html> <head> <title>使用例</title> <style type="text/css"> body { text-align: center; } h1 { background-color: orange; margin-bottom: 20px; } p { width: 200px; background-color: yellow; line-height: 1.7em; } </style> </head> <body> <h1>このサイトについて</h1> <p>このサイトはホームページ作成初心者がホームページを作成するために必要な情報や、役に立つ情報をゼロからホームページ公開まで、できるだけわかりやすく解説しており、初めてホームページを作ろうと思っている方にはピッタリのサイトです。参考書のように図解がしてあり、簡単にホームページを公開するまでの知識が学べます。</p> </body> </html>

width プロパティの使用例の表示

[widthプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理
このサイトについてこのサイトはホームページ作成初心者がホームページを作成するために必要な情報や、役に立つ情報をゼロからホームページ公開まで、できるだけわかりやすく解説しており、初めてホームページを作ろうと思っている方にはピッタリのサイトです。

[widthプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理
このサイトについてこのサイトはホームページ作成初心者がホームページを作成するために必要な情報や、役に立つ情報をゼロからホームページ公開まで、できるだけわかりやすく解説しており、初めてホームページを作ろうと思っている方にはピッタリのサイトです。

p 要素の幅が狭まって表示されます。

height プロパティの使用例

img 要素に height プロパティを使用し、画像の高さを100pxに指定しています。なお、画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名（ここでは「zero.gif」）をそのまま記述します。また、元の画像の幅は160px、高さは45pxです。

記述例
<html> <head> <title>使用例</title> <style type="text/css"> img.sample { width: 160px height: 100px; } </style> </head> <body> <p>元の画像<img src="zero.gif" alt="ZERO"></p> <p>高さを100pxにした画像<img src="zero.gif" alt="ZERO" class="sample" ></p> </body> </html>