logo-sm

お電話はこちら 03-6912-0139

ブログ

完全可変Webサイトのコーディング方法

2022.03.18

最近完全可変サイトの作成依頼がありました。
なかなか珍しい依頼だと思ったのでどのようにcssを作成したかを残します。

完全可変サイト

サイトの画面幅が大きくなった場合文字やその他の要素が全て比率で大きくなるサイト。小さくなった場合も同様で、画面幅に合わせて比率で小さくなっていくサイト。

1、横幅を全て%で記述。

横幅を持っている横並びの要素に関しては全て%で記述する。

cssの例
width:30%;

2、font-sizeをvwという単位で記述。

画面幅に対して文字サイズを指定することにより、文字サイズが可変になる。
vwという単位は画面幅いっぱいを100vwとして、画面幅に対して文字サイズが何%かを記述する。

しかしpxをvwにどう直すの?毎回計算するのめんどくさい。という問題が出てくる。

以下サイトで簡単にpxをvwに直せるので私はそちらを使いました。
https://cruw.co.jp/px-vw/

cssの例
font-size:3vw;

3、margin paaddingの上下ををemで取る。

文字サイズが可変なので、文字サイズを基準として上下幅を取ればうまく可変になります。
1emはその要素の文字1文字分。

cssの例
paddiing-bottom:1em;
margin-bottom:1.2em;

4、line-heightは倍率で書く。

行高は基本倍率で書くと思うのですが、しっかり倍率で書きましょう。

cssの例
line-height: 1.5;

5、画像はwidth:100%

画像は幅を入れてあげないと、画像のサイズになってしまうので、width:100%にする。
どこまで大きくなっても画像を引き伸ばしてくれます。

cssの例
img{
width:100%;
}

こんな感じで、完全可変Webサイトの作成は可能です。

注意点

ブラウザは10px以下の文字サイズを表示しない。

基本的に10px以下は可読性が悪く入れない方がいいかと思いますが、対応した案件で画面幅を小さくすることで10pxを下回る文字がいくつかありました。

今回は10pxを下回る可能性のある文字に関しては画像で書き出して対応しました。

transform: scale(0.8);
などで10px以下の文字も作成可能ですが微調整が必要でめんどくさそうなので、おすすめしません。
以下10px以下の文字を入れ込む参考サイトです。
https://qiita.com/flatsato/items/cbd27a3374d0701ac820

サイトを完全可変でデザインする場合はそのような考慮も必要かと思います。

よろしければ参考にしてみてください。

関連記事

  • AWS認定SAAを取得しました
    2022年3月にAWS認定SAA(ソリューションアーキテクト・アソシエイト)を取得しましたので、AWS認定SA […]

    2022.03.29

  • Twitterの埋め込みをCSSで限界以上に小さくする方法
    サイト制作をしていると、Twitterの埋め込みを頼まれることがたまにあります。 今回Twitterの埋め込み […]

    2022.03.28

  • サイト制作でスクロールバーを左に配置する方法
    今回はスクロールバーを左に配置する方法をご紹介します。 サイトのスクロールバーはデフォルトでは右に配置されます […]

    2022.03.23

  • パートナー

  • 人材育成