HTML - CSS - width 要素の幅を指定
- 1. 概要
- 2. 指定
- 3. 100% と auto の違い
1. 概要
まぁ、わかりやすいキーワードなんで何ものかは分からない人もいないでしょうが。
詳細は「width - CSS: カスケーディングスタイルシート | MDN」を読んでいただくとして・・・。
2. 指定
参考サイトに指定の方法が説明されています。
width: 300px; ← 設定値を表記
width: 25em;
width: 75%; ← パーセンテージで表記
width: 25em border-box; ← キーワードと設定値で表記
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;
width: inherit; ← グローバル値を表記
width: initial;
width: unset;
3. 100% と auto の違い
実は 100% を使用していてうまくいかなかったことがあって。
「【CSS】width:”auto”とwidth:”100%”の違い」が検索にかかって「はっ」と気づいたのです（ごめんなさい、細かく読んでいません。タイトルでなんか納得したので）。
「百聞は一見に如かず」見比べてみたいと思います。
<table style="width: 100%; padding-left: 2em; padding-right: 2em;">
<tr style="border: 2px solid red;">
<td style="border: 2px solid blue; width: 20%;">あいうえお</td>
<td style="border: 2px solid blue; width: 100%;">かきくけこ</td>
<td style="border: 2px solid blue; width: 20%;">さ</td>
</tr>
</table>
と書いて、左右を等幅にしたつもりが・・・。文字数というか実際の大きさに左右されてしまった。
これは、中央の 100% 指定が間違っていたようで
<table style="width: 100%; padding-left: 2em; padding-right: 2em;">
<tr style="border: 2px solid red;">
<td style="border: 2px solid blue; width: 20%;">あいうえお</td>
<td style="border: 2px solid blue; width: auto;">かきくけこ</td>
<td style="border: 2px solid blue; width: 20%;">さ</td>
</tr>
</table>
と書くことで意図通りの見た目が得られました。
|
|
