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

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

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

関連記事

  • Cisco資格試験の学習法について
    2022年3月にAWS SAA資格取得の記事を書きました。その後、2022年7月にCCNP ENARSI試験を […]

    2022.09.28

  • jQueryでHTMLをパーツ化した際に読み込み箇所にJavascriptが効かない件の対処法
    jQueryでHTMLをパーツ化するための関数でloadという関数があります。 headerやfooterなど […]

    2022.08.11

  • 【最新版】git hubでサイトを公開する方法
    git hubでサイトが公開できるのでその方法を記述します。 ちょこちょこgit hubをでサイト公開を行う記 […]

    2022.08.11

  • パートナー

  • 人材育成