🗂
要素の大きさ
要素の幅
要素の内容に合わせる
widthプロパティにfit-contentを設定すると、コンテンツの量に合わせて、要素の幅を調整してくれる。
参考文献
- fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
- CSS fit-contentプロパティの便利な使い方
- 見出しに使えるfit-contentを解説してみる
レスポンシブ対応(max-width, min-width)
max-widthプロパティは、要素の幅がとれる最大値を設定するプロパティです。例として、要素がスマホではちょうどいいが、PCでは大きいとき、max-widthを要素に指定しておくと、要素がそれ以上大きくならない。
max-width:○px
min-widthプロパティは、要素の幅の最小値を指定します。これはmax-widthプロパティの逆です。例えば、要素の幅を50%だとすると、PCではフィットしているが、スマホでは要素がmin-widthで指定した幅になります。
-CSS】max-widthとmin-widthの使い方まとめ
要素の高さ
画面いっぱいに表示する
要素を画面の高さ分表示しようと、height:100%を要素に適用しても、うまくいきません。その要素の親や先祖にもheight:100%を有効にする必要があります。それ以外に、height:100vhを要素に指定する方法もあります。
- 【html/CSS】高さ(height)を画面いっぱいにする方法
要素の内容に合わせる
heightプロパティにfit-contentを設定すると、コンテンツの量に合わせて、要素の高さを調整してくれる。paddingでコンテンツの余白を設定できる。
Discussion