widthとは
- width とは次の意味をもつCSSのプロパティです。
- width
- 読み: ウィズ、ウィッズ、ウィドゥス
意味: 幅
widthプロパティの概要
このプロパティは、ブロックレベル要素、置換インライン要素の横幅を指定することができるプロパティです。 box-sizeプロパティと合わせて使うことで、ボーダー領域までの横幅を指定することもできます。
ブロックレベル要素とは
ブロックレベル要素とは、「見出し要素」、「段落要素」、「表要素」、「コンテナー要素」などの、ページの骨格を形成するための要素で、 コンテンツをまとめる括りとして使用される要素です。この要素は一つのブロックとして認識されるので、このような呼び方をします。 ブラウザの表示でも一つのブロックとして扱われ、一般的なブラウザでは前後に改行が入ります。
全てではありませんが、以下に、ブロックレベル要素をリストしておきます。
置換インライン要素とは
置換インライン要素とは、簡単に説明すると開始タグのみで使用される要素か、もしくは開始タグと終了タグはあるけど間にテキスト を表示しない要素と言ったら、そう間違ってはいないと思います。 結局のところテキストを表示するとか、テキストに意味付けする用途ではなく、ある種のユーザーインターフェースや特有の 表示効果を目的とした要素が、これに該当します。 つまり、要素特有のコンテンツに置き換えて表示されるので置換要素と言います。
また逆に、非置換インライン要素とはテキストに対してマークアップしたり、表示効果を狙った要素のことを言います。
インライン要素のほとんどは非置換要素です。置換要素は多くはありませんので、全てではありませんが、以下に置換インライン要素をリストしておきます。
実機サンプルとサンプルコード
ここでは、div要素を使って実際の設定を試していきます。
構文
セレクター{width: 設定値;}初期値: auto
autoキーワードは要素の幅をブラウザが計算して表示します。 これは基本的に親要素の幅に合わせるように計算されます。
div{width: auto;}キーワード値で横幅を指定
widthプロパティで使われるキーワードは次の通りです。
max-contentキーワード
コンテンツに合わせた望ましい固有の幅で表示されます。
サンプルテキスト
div{width: max-content;}min-contentキーワード
最小の固有の幅で表示されます。
サンプルテキスト
div{width: min-content;}availableキーワード
包含ブロックの幅から、マージン、ボーダー、パディングの幅を引いた寸法で表示されます。
サンプルテキスト
div{width: available;}fit-contentキーワード
max-contentとmin-contentの利用可能な幅のうち、小さい方の幅が適用されます。
サンプルテキスト
div{width: fit-content;}数値による横幅の指定
数値による横幅の指定は数値と単位をセットで記述します。 このサンプルでは単位をemとしており、全角文字数で15文字分の幅を指定しています。このemの他にもpxなど の解像度単位での指定や、%を使った包含ブロックに対する相対値での指定も可能です。
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０
div{width: 15em;}box-sizingプロパティとの併用
widthで指定した横幅の基準となるものをbox-sizingプロパティで指定することができます。
box-sizingプロパティは2つのキーワードを使って基準を変更することができます。 初期値はcontent-boxになっており、下記の2つのサンプルうち、上のサンプルがcontent-boxキーワードをつかったものとなります。 これはテキストを表示する領域であるコンテンツボックスを基準にするということで、コンテンツ領域が親要素の50%で表示されます。
もう1つのキーワードであるborder-boxを使うと境界線を含める設定となり、境界線の外の縁を基準にして50%で表示することになります。
box-sizing: content-box;
width: 50%;
box-sizing: border-box;
width: 50%;
div{
box-sizing: border-box;
width: 50%;
}グローバル値
widthプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のautoに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
div{width: グローバル値;}補足説明
-
非置換インライン要素、tr、tbody、thead、tfoot要素を除くすべての要素に適用可能
- 親要素の値を継承しない
まとめ
ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
width: auto;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: 50%;
width: 400px;
サンプル: ブロック要素