パソコンは正常なのにスマホでは異常な表示のWebサイト！？そんなWebサイトは時代遅れ！パソコンでもスマホでも美しく表示されるレスポンシブ採用Webサイト制作方法！！
今回のテーマは
パソコンでもスマホでも
美しく表示される
レスポンシブ採用
Webサイト制作方法！！
というテーマでお話していきます！
webサイトを作ったけれど、
スマホで見てみたら
「文章がズレている…」
「なんか
表示がおかしい！」
あるあるだと思います。笑
それは
パソコンの横に長い画面に合わせて
枠・ボタンや文章を設置したのに、
スマホの縦に長い画面で見たら
ぐちゃぐちゃな配置になっているのは
当然ですよね。
この記事を最後まで読んで
いただければ、
同じサイトを
パソコン用とスマホ用で
２個作らないといけない…
という手間を掛けずに、
同じサイトなのに
パソコンで見ても、
スマホで見ても、
美しく表示できてる！！
魔法のようなシステムを
簡単に導入できる方法を
知ることができます！
いや～なんか
新しい技術を使ったり
相当な知識が
いるんでしょ？
いいえ、
CSSで実現できます。
しかもCSSなので
変更や追加などの
管理も楽です。
実際にCSSの
魔法のシステムが
何をしているか
という話なんですが、
簡単に言うと
画面の横幅に合わせて
自動的にデザインの
レイアウトを
変えています。
やっていることは
単純なんですが、
1つのサイトで済むので
デバイスが違っても
同じデザインが
表示されるのでユーザーに
安心感を与えれる。
サイトのリンクが
同じだからSNSなどで
シェアしやすい。
などのメリットも
しっかりあります。
様々なデバイスの
画面やサイズに応じて
適切に表示される
魔法のシステムは、
「レスポンシブデザイン」
といいます！
webサイト、ホームページの
作り方の1つで
様々な大きさの画面に
表示を対応させる仕組み
のことを指します。
近年で情報を得るのに
スマホを利用する人が
増えてきたため、
パソコンでもスマホでも
同じデザインを表示できる
レスポンシブデザインは、
webサイトを作る上で
かなり注目されている
重要な仕組みです。
ここからはCSSで
どうやって
レスポンシブデザインを
実装していくのか
順番に説明していきます！
①変更はCSSだけ
レスポンシブデザインにするために
HTMLは全く触る必要はありません。
閲覧者の画面サイズに応じて
スタイルを変化させる
仕組みを作ります。
分けるとするならば
・スマホかパソコン
のどちらかでしょうか？
もっと
みたいに分けてもいいのですが
実は多く分けすぎるのも
あまりよくないんです。
②ブレイクポイントの
個数を決める
「ブレイクポイント」
とは
デザインの切り替え点の
ことを指しています。
例えばスマホなら
横幅600ピクセル以下
タブレットなら
1280ピクセル以上は
パソコン用のデザイン
このように３つの端末の
境界点として
２つのブレイクポイントを
設けることになります。
全部の端末の
横幅に対応して
いけばいいじゃん
と思うかもしれませんが、
ブレイクポイントの数が
多ければ多いほど
CSSで記述する量も
増えていきます。
するとスタイルが適応されているかを
調べる作業をする時、
めちゃめちゃ大変ですよ？
なのでどこまで
ブレイクポイントを
用意するかは
とても大切です。
多すぎても大変だし、
少なすぎても
どれかの端末で崩れてしまう…
決め方として
一番使われている
画面サイズを調べて
それに合わす
多くの人が使用している
端末で上手く閲覧できれば
上手く閲覧数も伸びるでしょう。
自分が用意できる
端末分の画面サイズで
設定する
確認のチェックが
できないのに
デザインを
どう配置するかなんて
決めようがありません。
自分で用意する分だと
費用もそれなりに
かかってしまいます。
多くの環境で
うまく閲覧できる。
変更や確認もしやすい。
この二つをポイントに
望ましいブレイクポイントを
決めていきましょう！
③メディアクエリで
端末ごとのスタイルを記述
画面サイズや画像解像度などの
閲覧環境に応じて
適用スタイルを切り替えれる
CSSの機能を
「メディアクエリ」
といいます。
このメディアクエリでは
・横幅
・高さ
・デバイスの向き
などの条件を指定できるので
使わなくても、
完全にCSSの機能だけで
レスポンシブデザインは
導入は可能です。
いかかだったでしょうか？
今回の記事を読んで、
難しそうだなぁ…
パソコン版と
スマホ版で2種類
ページを用意するか…
と思っていたのが
CSSだけで
レスポンシブ化
できるなんて
知らなかった！
レスポンシブ化
した方が効率的だ！
ということを
知っていただけたハズです。
デザインはそのままで
横幅を適応してあげるだけでも
うまく表示されるように
するのは簡単です！
慣れてきたら
デザインを少しだけ
パソコン版用だったり
スマホ版用にしてみる
なども可能です！
HTMLとCSSだけで
ちゃんとしたwebサイトを
作ることはできますので
ぜひレスポンシブデザインで
webサイト作り
してみてください～！
