トップページ＞タグを打ってみよう！＞「width」で横幅を決める
「width」で横幅を決める
「width」を用いて横幅を指定します。（正確にはwidthプロパティとよびます）。横幅はレイアウトの基準になる大切な要素です。このページでは、横幅の指定方法を説明しています。
読み方はウィズと読みます。私はワイズと読んでいましたが、ウィズが正しいようです。
横幅指定の方法
横幅を指定しない場合には、以下のように、内容は画面いっぱいに広がって表示されます。
ブラウザ表示
実際の画面で横幅いっぱいに広がると、文章が横長になりすぎて、読みにくくなります。
そこで、以下のように、横幅を指定します。
HTML
<h3>横幅の指定</h3>
<p>横幅を指定しないと、ブラウザで表示したとき、ウィンドウの幅いっぱいに広がって表示されます。内容を読みやすくするため、適度な幅を指定します。</p>
h3 { width: 460px; }---h3に対して横幅を460pxに
p { width: 460px; }---pに対して横幅を460pxに
見出しh3と段落pに対して横幅を460pxに指定しました。「widthプロパティの値を460pxにする」が正確な言い方になります。
横幅が調整され、内容が読みやすくなったと思います。
横幅が調整され、読みやすくなりました。
divで囲んで指定する
div はグループ分けをするタグです。
上の例では、h3 とp に対して横幅を指定しましたが、全体をdiv で囲めば、指定が1回で済みます。そればかりでなく、div で囲むことで、HTMLの構造をはっきりさせることができます。コンピュータはdiv〜/divを１つのグループとして認識します。
<div>
<h3>横幅の指定</h3>
<p>横幅を指定しないと、ブラウザで表示したとき、ウィンドウの幅いっぱいに広がって表示されます。内容を読みやすくするため、適度な幅を指定します。</p>
</div>
div { width: 460px; }---divに対して横幅を460pxに
ブラウザ表示
上の例とブラウザの表示は同じになりますが、divタグを使うことで、スタイルシートの指定はすっきりします。
横幅の指定、ワンポイント
横幅の指定はdiv 要素で囲んでから、div に対して指定するほうが無駄がなく、後の管理もやりやすくなります。
タグを打ってみよう！
テキストエディタで横幅の指定を書いたもの。スタイルシートはheadと/headの間（ヘッダ部）に書いています。
画像のwidth指定との違いは？
このページでは取り上げていませんが、画像の大きさを指定するときwidthが登場します。
widthはHTMLで画像の指定をするときに、height（高さ）と共に必ず指定する必要があります。
この場合img src=" image/width02.gif " width="500" height="147" のように単位が付きません。
スタイルシートではh3 { width: 460px; }のようにpxの単位が付きます。混同しないようご注意ください。
用語：width/height