やぁ、一度は巨大化したいユトピ(@yutopi60pa)だよ。
今回はCSSでは基本中の基本、幅を決める「width」と高さを決める「height」を解説していくぜ！
これは非常に使いまくるプロパティなので、しっかりと勉強していきましょう！
width・heightとは？
CSSプロパティの「width」と「height」とは指定した要素の幅と高さを決めるプロパティです。
指定は以下の方法です。
- pxで指定・・・具体的な数値で指定します。
- %で指定・・・相対的な数値で指定
- vh、vwで指定・・・viewportに合わせて指定
vh・vwについては解説した記事をご覧ください。
・【CSS】まだpxと%で指定してるの？新時代のサイズ指定『vw・vh指定法』！！
それでは一つ一つ見ていきましょう！
width・heightを使ってみよう！
pxで指定！
コード
|
1 2 3 4 5 6 7 8 9 |
CSS #wh { width:300px; height:400px; background: orange; } HTML <div id="wh">幅300px、高さ400pxだよ！</div> |
結果
ここでは幅と高さをpxで指定しましたね。
これはそのままの意味で指定された要素は幅300px、高さ400pxで表示されます。
width・heightを使ってみよう！
%で指定！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
CSS #oya1 { width: 400px; height: 500px; background: aqua; } #whp { width: 50%; height: 80%; background: orange; } HTML <div id="oya1"> <div id="whp">幅50%、高さ80%だよ！</div> </div> |
結果
こちらは%指定です。
ここでは画面の幅や、指定した要素の親要素の幅と高さによってサイズが変動します。
今回の場合は親要素が幅400px、高さが500px、そして子要素は幅50%、高さ80%で指定しましたね。
ということは親要素の幅400pxの50%=200px、高さ500pxの80%=400pxということになります。
このように%で指定した場合は親要素の大きさによってサイズが変動していきます。
width・heightを使ってみよう！
width: 80vw、height: 100vhを指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
CSS div { width: 80vw; height: 100vh; } #view1 { background: red; } #view2 { background: blue; } #view3 { background: green; } #view4 { background: yellow; } HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=600, height=500"> </head> <body> <div id="view1"></div> <div id="view1"></div> <div id="view1"></div> <div id="view1"></div> </body> </html> |
HTML
こちらは以前のvw・vhのデモと同じものですね。
vw・vhも%指定と同じで相対的にサイズが変わっていきます。
1点だけ決定的に違うところは、viewportのサイズを基準にしているところですね。要するにページが表示されている領域だったり、画面のサイズです。
デモではviewportが幅600px、高さ500pxで指定しました。
幅80vwはviewportの幅80%という意味なので480px、高さ100vhはviewportの高さ100%なので500pxということになります。
%指定とは違って親要素とは関係なくサイズが決まるのが大きな違いですね。
レスポンシブでの指定方法
レスポンシブサイトを作成するときは幅や高さの指定はpxだとうまくいかないことがあります。
例えば幅が600pxの要素を、画面の幅320pxの画面で表示しようとするとはみ出してしまいます。
このようなことが起きると見づらさ半端ないですよね。
ということでこの場合は%指定やvw・vh指定を使います。
画面サイズを基準にサイズを相対的に指定できればはみ出てしまうことはないです。
今後はもっとスマホ用のページへの対応が必要になってくる時代ですので、こういった指定方法もしっかりとマスターしておきましょう！
まとめ
以上がwidth・heightの指定方法です。
px指定はそこまで難しいことは無いと思いますが、レスポンシブデザインのサイトを作りたいなら%指定やvw・vh指定もしっかりとできるようにしておいた方がいいですね。
レスポンシブサイトを自分で作れると結構楽しいので頑張っていきましょう！