width/横幅

widthプロパティは横幅を指定出来ます。

説明

 widthは横の幅を固定値や相対値等を使って設定出来ます。設定した幅を越える文字や画像は折り返して表示します。

width説明

構文

 widthプロパティの構文は以下の通りです。

width: 幅;

 幅の指定は以下が出来ます。

【widthでの幅の指定】
説明
px ピクセル指定
em 文字の大きさに対する割合
% 親ボックスの幅に対する割合
auto 取れる幅一杯(デフォルト)

width利用例

 widthの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
width: 100px;
}

<div>100pxの幅が取られ、そこで折り返します。</div>

 上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

100pxの幅が取られ、そこで折り返します。

 黄色の背景分横幅が取られて、そこで折り返しています。

 em指定の例は以下の通りです。

div {
width: 5em;
}

<div>12345</div>

 上記を表示すると以下になります。

12345

 5文字分の幅が取られています。

 %指定の例は以下の通りです。

div {
width: 80%;
}

<div>width例</div>

 上記を表示すると以下になります。

width例

 点線の枠で示した80%を幅として取ります。

 デフォルトのautoでは以下のように枠の幅一杯に取ります。

width例

留意点

 <span>タグ等のインラインボックスは必要な幅しか取らないため、指定しても無視されます。

 又、半角英数字は途中で折り返さないため、例えば5emを指定しても最初から英数字が続いていると以下のように折り返しません。

12345678901234

 スペース等が入ると折り返されます。

1234567890 1234

 通常は単語の区切り等でスペースが入るため、幅一杯になる前に折り返されます。

this is a pen.

 又、日本語も続けて記述しても折り返します。

関連ページ

・ホームページ作成「ボックスのまとめ

 widthだけでなく、marginやpadding、背景、枠線、回り込み等、ボックス全体の説明をしています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)