提携パートナー連絡フォームその他その他のお問い合わせホームページ運営ブログBlogホームページのことを中心にためになるかもしれないことをいろいろと書いています。ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。高さや幅の相対値指定、%、vh、vwレスポンシブでホームページを作ることが多くなり、サイズをpxなどの絶対値だけで指定することも少なくなりました。多くの人は%などの相対値指定を使っているのではないでしょうか。レスポンシブのコーディングに使いやすい単位として、vhやvwといった単位があるのを知っていますか。Width)を%との違いを見ながら紹介したいと思います。%もViewport単位もいずれも、100を基準とした数字で指定します。この、基準となる100%、100vh、100vwが何かがわかれば、あとはそれに対する割合なので簡単です、まずはここを覚えましょう。100vwとして定義された値です。画面いっぱいのサイズのメインビジュアルを配置したいと思った時やオープニング画面を作る場合などに、100vhと100vwを指定使ったりします。CSSで高さいっぱいの100vh指定。100vw(画面の幅)のサイズを知っていれば大丈夫です。あとはこの基準に対しての割合を指定するだけなので、例えば画面の半分の高さのサイズを指定したければ50vhとなるし、4つの要素を横に並べたければ25vwなどとなります。基準がはっきりしているので、vhやvwの単位は、%よりもわかりやすいかもしれません。以下の例は50vwや50vhです。この場合、デモ画面がviewportだとみなしてください。CodePen.親要素に対する割合%さて、同じように%も相対値でのサイズ指定です。%の指定はpx指定の次くらいに学ぶと思いますし、%という記号自体日常でもよく使うので感覚的に分かりやすいと思いますが、シンプルそうに見えますが実は少しややこしく、この%は何に対しての割合かということをわかっておく必要があります。このあたりあいまいな人も中にはいて、検証ツールで数字を少しずつ変えていい感じの数字を探すみたいな作業してる人いますが、きちんと計算で出せるようにしておかないと、複雑な形では互いに影響して崩れてしまったりします。この%は、サイズ指定された親(先祖)要素に対しての%の指定になります。%指定はいつも同じサイズではなく、今おさまっている要素に対しての割合です。width:50%と指定する場合、今いる要素のサイズによって表示サイズは変わります。横幅100pxの要素内に配置されている場合は、その50%の50pxの幅となります。ちなにみに、どこの要素にも属していない、もしくは親要素にサイズが指定されていない場合は、画面幅が基準と思っていいと思います。CodePen.このように、同じ.itemクラスの要素でも配置する場所によってサイズが変わります。次にheightの%指定ですが、heightに対しての%が効かないと相談されることがよくあります。結論から書くと、heightも同じく親要素の高さを基準としてサイズが決まりますが、親要素がない状態では今いる要素の高さは未定義になっています。その場合は高さをで指定しても(基準が未定義のため)うまく動きません。親要素に高さを設定する必要があります。CodePen.このように、高さのある要素の中に配置した場合に%による高さが決定されます。%の指定は、その親要素のサイズに影響されるので、慣れないうちは自分の思い通りに%を指定できないことも多いでしょう。親要素だけでなく、さらにその親要素まで、そして要素全体を俯瞰的に頭の中で理解していないと、パっと必要な%の指定ができなかったりします。一方で、先に説明したビューポートを基準としたサイズについては、画面全体というその場面においては絶対的な基準があるので、他の要素に影響されることはありません。いった意味では直感的にはわかりやすい単位ですね。どちらが良いとかではなく、これら組み合わせることで柔軟性のあるサイズを実現できるので、ぜひ両方とも理解してうまく使い分けてコーディングに活かしてください。相対的なサイズ、絶対的なサイズを組み合わせることで、柔軟性のあるサイズのレスポンシブコーディングが実現できます。vhの比較をおいておきますので、改めて確認しましょう。[Service]0-0これも読もう!関連する内容の記事スマホのレスポンシブ対応に便利!vwやvhという画面サイズを基準にしたCSSのサイズ単位レスポンシブデザインのコーディングに必須!縦横比(アスペクト比)を維持したまま拡大縮小に対応するコード。background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょうCSSで高さいっぱいの100vh指定。メールでのご相談・お問い合わせCSSCSS投稿ナビゲーション前の投稿容量を増やすためのSSD交換。実際にやってみた交換の手順。次の投稿WordPressのエラー。foreach()エラーの修正まずはご相談から、ホームページを作るのがはじめての方も気軽にお問い合わせ下さい。無料お見積りAIチャットで質問AIチャットでご質問くださいホームページの制作について聞きたいことはありませんか。AIがあなたの質問にお答えします。下のフォームに質問文を入れて聞いてみてください。|関東の方もホームページの制作を対応いたします。reserved.ホームページ制作YCOMトップホームページに必要な費用ホームページ制作料金ホームページ制作の流れオリジナルホームページホームページ制作実績ホームページ活用事例お客様の声よくある質問お問い合わせホームページの制作見積り依頼パートナー募集フォーム。