コーディングの題材に関してはCodejumpさんのものを使用しました。
【HTML/CSS コーディング練習】中級編：ストアサイト（カフェ）／パララックス
出典：https://code-jump.com 制作：こぐまマミー
こんな悩みがある人にオススメの記事
・WEBデザイナーになろうか迷っている
・レスポンシブデザインについて知りたい
レスポンシブデザインとは
【レスポンシブデザイン】
WEBサイトやアプリケーションのデザイン手法の一つ。
ユーザーが利用するデバイスの画面サイズや解像度に応じて、自動的にレイアウトやコンテンツが調整されるように設計されたもの。
ex：デスクトップ、タブレット、スマートフォンなど
なんでレスポンシブにしなきゃいけない？
別にPCだけのデザインでもいいんじゃない？と思いましたか。
レスポンシブデザインに対応していないとどうなるのか？
たまにありませんか？
ページを開いたらPCと同じデザインなのはいいけれど、
すっごく文字が小さくて見づらい。
ボタン小っさ！拡大しても微妙に全然押せない！
以前は多かったですよね。
今はレスポンシブデザインに対応していないサイトの方が少ないのではないでしょうか。
というのも、理由は簡単。
2021年のインターネット利用率（個人）は82.9％となっており（図表3-8-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（68.5％）が「パソコン」（48.1％）を20.4ポイント上回っている。
（引用）総務省「通信利用動向調査」
スマホ利用率がPCを上回っているからですね！
スマホやタブレットに対応していないと利便性の問題で、
カスタマーが離脱してしまう可能性があるからです。
だからこそ、レスポンシブに対応できるコーディングのスキルは必須なんですね。
どんな風に設定するの？
意外と難しくないんですよ！
PCのデザインをコーディングし終わった同じCSSシートの中に、
この幅以下になったら、文字のサイズや並び方を変えてね！
という記述を追加していくだけです。
スマホには対応していない装飾もあったり、重くなったりするので、
PCよりもシンプルな形になることが多いです。
スマホのデザインを優先してコーディングする場合もあるよ
ブレイクポイントとは
簡単に言うと、画面幅に合わせてデザインを切り替えるポイント（px値）のことです。
デザインによってブレイクポイントが2つあったり、3つあったりします。
割と多いのは以下です。
ブレイクポイント２・・・PC、スマホで切り替え
ブレイクポイント３・・・PC、スマホ、タブレットで切り替え
切り替えるpx値は明確に決まっていません。
その時のデバイスの流行によって変わっていきます。
大きな画面のスマホが流行すれば、
それに合わせたデザインに変えていく必要があるということですね。
2024年の流行デバイスに合わせた推奨の切り替えポイントを調べてみました。
PC、タブレット、スマホの画面サイズで、
それぞれのシェア率トップは以下です。
| サイズ | |
| PC | 1920×1080 |
| タブレット | 768×1024 |
| スマホ | 390×844 |
シェア率を考慮した上で、よく使われるブレイクポイントを調べました。
小型デバイス：480px以下
標準的なスマホ：768px以下
タブレット：1024px以下
ノートパソコン、デスクトップ：1280px以下
大型デスクトップ：1600px以下
よく使われるのは黄色いラインのブレイクポイントです。
メディアクエリを使う
メディアクエリとは何でしょう。
@media screen and (max-width: 767px) {
}
↑画像上部、この記述の部分がメディアクエリ。
max-width: 767px
→最大767px。つまり768px以下の画面までは記述するデザインにしてね、という切り替え指示。
@media (max-width: 767px) { /*指定するスタイル*/ }の記述でもOK。
このメディアクエリの中にCSSの記述を追加して書けば、
ブラウザのサイズが変更された時に装飾の指示が切り替わる設定ですね。
文字のサイズを小さく変えてね、
スマホで見やすいように縦に並んでね
のような指示を書いていきます。
私はこの作業が楽しくて大好きなんですよね。
ギュギュっと狭まる画面に合わせて、
指示に合わせて従順に変化していくデザインの様子を見るのが。
ブログの記事一つ一つ、作品一つ一つを大切にしています
まとめ
レスポンシブデザインとは、
デバイスの画面サイズや解像度に応じて、快適に閲覧できるように設計していくこと。
メディアクエリという記述を使う。
レスポンシブデザインが楽しそうだと思った方、
WEBデザイナーにきっと向いてますよ。
WEBデザイナーになりたかったけど、コーディングを学んだら楽しくて、
さらに学んでエンジニアになった方もいました。
何かを学ぶということに終わりはなく、
新しい興味につながったとしたらそれだけで意味のあることですよね。
【デジハリオンライン】webデザイナーコースを修了した30代主婦のリアル体験談
【WEBデザイナー】Visual Studio Codeでどんなことができる？
