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>



　と書くことで意図通りの見た目が得られました。




あいうえおかきくけこさ