こんにちは！会社員クリエイターのこばたです！
今回は、要素のサイズ単位（px.%.auto.flex,vh)の使い方を解説します。
要素のサイズ単位（px.%.auto.flex,vh)を適切に使うことで、適切なサイズ調整が可能となり、レスポンシブ対応時に大きな差を生み出すスキルとなっています。
この記事さえ読めば、要素のサイズ単位について理解して、制作時の適切なサイズ調整が自由自在となります。ぜひ最後までお読みください！
要素のサイズ単位とは
横幅の場合、「px」「%」「auto」「flex」と４種類のサイズ要素単位があります。
それぞれに特徴があるので、ポイントを押さえて使いこなしていきましょう。
縦幅は「auto」に設定することが多いので、横幅をメインで解説していきます。縦幅のサイズ単位を変える場合にも活用していただけたらと思います。
pxについて
ボックス（テキスト、画像）の大きさが一定に保たれる設定で、固定サイズの指定に適しています。
具体的なピクセル数で要素の幅や高さを設定することができます。
特徴
- デザインにおいて具体的なサイズを要求する場合に有効です。
- 画像や特定のコンテンツのサイズを正確に設定したい場合に使用します。
- 固定のサイズを保持したい要素に適していますが、画面サイズが変わっても要素がそのサイズのまま縮小・拡大されるため、レスポンシブ設定の時に注意が必要です。
％について
親ボックスまたはページサイズに対しての一定比率を保つ設定で、親要素に対する相対的なサイズ指定に適しています。
例えば、親ボックスの幅が1000pxだった場合、子要素の幅を50%に設定すると、子要素の幅は500pxになります。
特徴
- 親要素のサイズに応じて自動的にサイズが調整されます。そのため、異なるデバイスや画面サイズに自動で対応してくれ、レスポンシブ設定の時の作業が大幅に削減されます。
autoについて
「auto」は子ボックスを持つ親ボックスに設定できる単位で、子ボックス（画像・テキスト・アイコン）のサイズに親ボックスのサイズを自動で合わせてくれる設定です。
要素の境界線をダブルクリックするか、要素を選択してスタイルバーから「auto」を選択すると、横幅と縦幅は内包されるボックスを基準に自動で設定されます。
様々なレイアウトに対応しやすくなる為、親ボックスの縦幅は基本的にautoに設定することがレスポンシブ設定を楽にするコツです。
特徴
- 要素のサイズが内容に応じて自動的に調整されます。これにより、コンテンツの追加や変更に対して柔軟に対応できます。
- 要素の大きさに依存してサイズが決まるため、動的なレイアウトに適しています。例えば、テキストや画像などのコンテンツが含まれる要素の調整に適しています。
テキストを追加すれば、合わせてボックスは大きくなりますし、文字を減らせば小さくなります。
flexについて
flexは、他の単位と異なり、そのボックスと同じ階層に複数のボックスが配置されている時だけ指定可能で、1,2などの値を入力し、占める大きさを相対的に決定するサイズ設定です。
特徴
- 利用シーンはかなり限定的ですが、%だけではうまくいかないレスポンシブなレイアウトを簡単に実現できます。
全てがflexの場合
今回は、「１：１：１」から「１：２：１」で設定してみます。
１：１：１の場合
１：２：１の場合
片方がpx、片方をflexにした場合。
片方（要素固定）ではない要素が自動で枠いっぱいに変換される設定となります。（全体幅ーpx数＝flex設定分となります。）
vhについて
縦幅に限り指定できる単位で、画面の高さに応じてサイズが変わるユニークな単位です。
100vhを指定すると、画面100%の高さでボックスを表示させることができます。
特徴
- 1vhは画面の高さの1%に相当します。
- 高さが親ボックスに左右されないので、どんなスクリーンサイズでもページいっぱいに表示する設定が可能です。
応用編
ここでは、実践的な活用法について、解説していきます。
ぜひ手を動かしながら学んでみてください。
autoを用いた実践的活用法
ボタン作成をします。
「送信」の文字だけだと、枠が文字サイズになってしまうので、パディングをつけて調整します。
文字を変えた場合にも設定を変えることなく、枠が自動調整されます。
※変化がわかりやすいように「送信 Send」と打ち込んでいます。
flexを用いた実践的活用法
横幅に対してボックスを均等にしたいときにボックスを全部選択します。
単位をflexに変更すると、各幅が均等配列されます。
今回は、横幅100%を５つの要素で割っているので20%になりますが、式が複雑になった場合に活用すると便利です！
まとめ
いかがでしたでしょうか。
要素のサイズ単位（px.%.auto.flex,vh)を適切に使いこなすことで、思い通りのサイト制作ができるだけでなく、レスポンシブ設定の負担を軽減することができます。
STUDIOでサイトの制作を依頼したい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。STUDIOにてサイトの制作依頼やメンター等の依頼も承っておりますので、ぜひお問い合わせよりご連絡ください！
最後までお読みいただきありがとうございました。
