ブログ
完全可変Webサイトのコーディング方法
最近完全可変サイトの作成依頼がありました。
なかなか珍しい依頼だと思ったのでどのようにcssを作成したかを残します。
サイトの画面幅が大きくなった場合文字やその他の要素が全て比率で大きくなるサイト。小さくなった場合も同様で、画面幅に合わせて比率で小さくなっていくサイト。
横幅を持っている横並びの要素に関しては全て%で記述する。
cssの例
width:30%;
画面幅に対して文字サイズを指定することにより、文字サイズが可変になる。
vwという単位は画面幅いっぱいを100vwとして、画面幅に対して文字サイズが何%かを記述する。
しかしpxをvwにどう直すの？毎回計算するのめんどくさい。という問題が出てくる。
以下サイトで簡単にpxをvwに直せるので私はそちらを使いました。
https://cruw.co.jp/px-vw/
cssの例
font-size:3vw;
文字サイズが可変なので、文字サイズを基準として上下幅を取ればうまく可変になります。
1emはその要素の文字1文字分。
cssの例
paddiing-bottom:1em;
margin-bottom:1.2em;
行高は基本倍率で書くと思うのですが、しっかり倍率で書きましょう。
cssの例
line-height: 1.5;
画像は幅を入れてあげないと、画像のサイズになってしまうので、width:100%にする。
どこまで大きくなっても画像を引き伸ばしてくれます。
cssの例
img{
width:100%;
}
こんな感じで、完全可変Webサイトの作成は可能です。
ブラウザは10px以下の文字サイズを表示しない。
基本的に10px以下は可読性が悪く入れない方がいいかと思いますが、対応した案件で画面幅を小さくすることで10pxを下回る文字がいくつかありました。
今回は10pxを下回る可能性のある文字に関しては画像で書き出して対応しました。
transform: scale(0.8);
などで10px以下の文字も作成可能ですが微調整が必要でめんどくさそうなので、おすすめしません。
以下10px以下の文字を入れ込む参考サイトです。
https://qiita.com/flatsato/items/cbd27a3374d0701ac820
サイトを完全可変でデザインする場合はそのような考慮も必要かと思います。
よろしければ参考にしてみてください。
関連記事
2024.04.08
2023.10.13
2023.10.13
