boxサイズの考え方と指定について
本日の教材動画はこちら
今回はboxサイズの指定について習っていきます。boxというよりはブロック要素ってイメージでもいいのかしらね…？（imgとかにも使えるみたいだから厳密には違うけども）
幅・高さの最小値と最大値の指定の仕方
テキストエリアやdivタグ内など、特に指定がなければ書いた分だけ横長・縦長になりますよね。それだと見るブラウザによっては見た目が崩れてしまったり、レスポンシブデザインを目指したがために逆に見えにくくなってしまう場合があります。（例えばPCの表示横幅を50%にした場合綺麗に見れるが、スマホの横幅50%で見た場合は小さすぎるなど）
なので、あらかじめ表示させる範囲の最大値と最小値を決めてあげれば、例え画面が大きく・小さくなってもある一定の見せ方ができるようになります。そこで使われるのが「min」と「max」のプロパティです。具体的な指定方法を見ていきましょう。
- min-width / max-width → 横幅の最小値と最大値を指定する
- min-height / max-height → 高さの最小値と最大値を指定する
「min-〇〇」は最小でもこのサイズより小さくならない。「max-〇〇」は最大でもこのサイズを超えない、という指定です。この時幅や高さは外側のboxサイズにより決まります（特に相対的な単位を利用する時）
サイズの算出方法を決める
このboxサイズの算出方法を決めるオプションもあります。利用するのは下記プロパティのどちらか。
- content-box → padding / border を幅や高さに含めない（初期値）
- border-boc → padding / border を幅や高さに含める
※CSS3のため、ベンダープレフィックスが必要になることに注意。
要はサイズ指定する際に、paddingやborder領域を指定に含めるか含めないかのオプションですね！ベンダープレフィックスについてはブラウザ毎に違うので書き方は要検索。
文字があふれた場合の取り扱い
サイズを指定したはいいが、指定枠内からはみ出すレベルで文章が多かった…といった場合の、あふれた文字の取り扱いをどうするかについて。指定できるプロパティは下記の3つとなります。
- visible → はみ出して表示させる
- scroll → スクロールバーをbox内に表示させ、スクロール可能にする
- hidden → はみ出た部分は表示させない
今回も言葉だけでは伝わりにくいので、早速それぞれ実践で書いてみましょう。
今回用意したページ内容とひとまずの外部CSS内容となります。
表示されるページの見た目はこちら。ここに色々と追加してみましょう。
まずは幅と高さの最大値を決めてみましょう。div範囲（ピンクの範囲）を縦300、横300pxに指定してみます。
divの幅と高さが300pxになりました。ただ入力した文字が多すぎて、範囲からあふれているのがわかりますね。なので今度は文字があふれた場合の取り扱いを追加で指定してみます。
今回は「スクロールバーを表示させる」指定をしてみました。幅と高さを指定したdivの範囲内にスクロールバーが追加されたのがわかりますね。これであふれた文字は全部範囲内にいれつつ、スクロールすれば全文読めるようになりました。
hiddenだとピンクの範囲外の文字は表示されず、スクロールもできないため完全に読めなくなります。使いどころがよくわかりませんが何かに使えるんでしょうね。
これらを駆使する事によって、box内の見た目だけでなく、画像の大きさなどもレスポンシデブにすることができます。どのタグに使えるのかなどは随時検索しながら学ぶことにしたほうがよさそうですね。
【参考サイト】
