CSS width プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

<p> 要素の高さと幅を設定します：

p.ex {
    height: 100px;
    width: 100px;
}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。

定義と用法

width プロパティは、要素の幅を設定します。

注: width プロパティは、パディング、ボーダー、マージンを含みません； 要素のパディング、ボーダー、マージン内のエリアの幅を設定します！

注: The min-width と max-width プロパティは、width をオーバーライドします。

デフォルト値： auto
継承： 継承する
アニメーション可否： 可。animatable を参照 Try it
バージョン： CSS1
JavaScript 構文： object.style.width="500px" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
width 1.0 4.0 1.0 1.0 3.5

CSS 構文

width: auto|value|initial|inherit;

プロパティの値

値 説明 Play it
auto デフォルト値。ブラウザが幅を計算します Play it ❯
length 幅を px、cm などで定義します Play it ❯
% 幅を包含ブロックの割合で定義します Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照
Examples

その他の例

例

パーセント値を使用して <img> 要素の幅を設定します：

img {
    width: 50%;
}
Try it Yourself ❯

例

<input type="text"> 要素の幅を 100px に設定しますが、フォーカスを取得したしたときに幅が 250px になります：

input[type=text] {
    width: 100px;
}

input[type=text]:focus {
    width: 250px;
}
Try it Yourself ❯

関連ページ

CSS チュートリアル： CSS Dimension

CSS チュートリアル： CSS Box model

CSSリファレンス：height プロパティ

HTML DOM リファレンス：width プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯