要素の横幅を指定するプロパティです。px、%、vw、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの特殊な値も使用でき、レスポンシブデザインの基礎となります。
width: <length> | <percentage> | auto | min-content | max-content | fit-content| w-full | width: 100% |
| w-1/2 | width: 50% |
| w-fit | width: fit-content |
| w-4 | width: 16px |
一般形: w-{n}（n×4px）
任意値: w-[52px]
.element {
width: 200px;
}width: 100px;幅を100pxに固定
width: 50%;親要素の50%の幅
width: fit-content;内容に合わせて幅を自動調整
autoはデフォルト値。fit-contentやmin/max-contentはモダンなレイアウトで便利。
親要素の幅に依存する場合、意図しないレイアウトになることがある。
AIはwidth: 100%とwidth: 100vwを混同しがちです。100vwはスクロールバーの幅を含むため横スクロールが発生します。またインライン要素にはwidthが効かない、fit-content/min-content/max-contentという内在サイズキーワードの存在も、AIの提案から漏れがちです。
100vw指定で発生している横スクロールを修正して
ボタンの幅を内容に合わせつつ最小幅を確保する指定をfit-contentとminmaxの考え方で書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。