現代のWEBサイトに必須！レスポンシブ対応が必要な理由と実装方法

こんにちは！

ケイです

今回は現代のWEBサイトで

必ずと言っていいほど

実装されている

レスポンシブ対応

について

解説していきます

レスポンシブ対応が

できていることで

・より多くの人に見てもらえる

・より見やすいサイトになる

といった

メリットがあります

逆にレスポンシブ対応が

できていないと

ユーザー体験が悪化し

クオリティが低いと

みなされてしまいます

そうならないため

知識を身に着けて

サイトをレベルアップ

しましょう！

それではまず

レスポンシブ対応について

解説していきます

レスポンシブ対応とは

デバイスに応じた表示

です

詳しく説明すると

Webサイトを

閲覧デバイスの

サイズに合わせて

自動的に調整する技術です

スマホやタブレット

PCなど様々なデバイスで

Webサイトを

見る人が増えているので

レスポンシブ対応は

必須の技術です

ではレスポンシブ対応の

手順を解説していきます

①ベースのサイトを作る

これはデバイスの

サイズに関係なく

常に表示される

サイトのことです

②メディアクエリを

　使用してレイアウトを

　調整をする

メディアクエリを使用して

(以下のコード)

画面幅を

設定することができます

このコードの場合

画面幅が768px以下だと

3行目以降の

コードが実行されます

③実機で確認する

実際にスマートフォン

PCなどでサイトを開き

サイトが崩れていないか

確認します

ここまで

レスポンシブ対応

について解説しました

レスポンシブ対応を

いきなり始めるのは

ハードルが高いと思うので

まずはこのサイトを見て

どういったデザインに

できるか考えましょう!

そしてより良いサイトが

作れるようになりたい！

と思えるように

なりましょう

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトresponsive-jp.com

ここまで読んでいただき

ありがとうございました