menu
書いてる野郎
orebike@gmail.com
CSS / Style / width
CSS / Style / width
おなじみの幅決めるやつ
vw
画面の横幅いっぱいを100として長さを表現した単位。画面の横幅を基準としているので、レスポンシブ対応でよく用いられる。
画面半分のブロックを作りたいならこうなる。
#hoge{ width: 50vw; }
注意が必要なのはこれはスクロールバーの太さを含むということ。つまり100vwの幅はスクロールバーが表示されている状態での表示領域よりもスクロールバー分だけ長いことになる。 body に対しての 100% という指定はスクロールバーを含まないのでスクロールバーが表示されている状態で表示領域と幅が一致する。
fit-content
簡単に言うと、inline 要素のように内容物の大きさや量によって幅が決まるようにする。
#hoge{ width: fit-content; }
