コーディング犬に聞く：「レスポンシブ対応って何するの？」
Web制作を始めたばかりの頃。
お客様や先輩から、
「レスポンシブ対応お願いします。」
と言われて、
「え？何をすればいいの？」
と思ったことはありませんか？
実はレスポンシブ対応は、
現代のWeb制作では必須の作業です。
今回は、
「レスポンシブ対応って何するの？」
という疑問をコーディング犬に聞いてみました。
Q. レスポンシブ対応って何？
「画面サイズに合わせてデザインを変えることだよ！」
例えば、
同じサイトでも、
パソコン
□□□□□□□□
□□□□□□□□
□□□□□□□□スマホ
□□□□
□□□□
□□□□表示が変わります。
つまり、
見る端末に合わせてレイアウトを調整する
ことです。
Q. 昔は違ったの？
「昔はPCサイトとスマホサイトが別だったよ！」
例えば、
example.comとは別に、
m.example.comみたいなサイトがありました。
でも管理が大変です。
そこで、
1つのHTMLで対応する
レスポンシブデザイン
が主流になりました。
Q. 実際には何を変えるの？
「たくさんあるよ！」
例えば、
- 横並びを縦並びにする
- 文字サイズを小さくする
- 余白を調整する
- 画像サイズを変更する
- メニューをハンバーガーにする
などです。
Q. 一番よくある対応は？
「横並びを縦並びにすること！」
PCでは、
商品A 商品B 商品Cスマホでは、
商品A
商品B
商品Cの方が見やすいです。
Q. どうやって切り替えるの？
「メディアクエリを使う！」
例えば、
@media screen and (max-width: 768px){
}です。
この中に、
スマホ用CSSを書きます。
例えば、
.box{
display:flex;
}を、
@media screen and (max-width: 768px){
.box{
flex-direction:column;
}
}にすると、
縦並びになります。
Q. 768pxって何？
「画面幅の基準だよ！」
一般的には、
PC
769px以上
スマホ
768px以下で分けることが多いです。
会社によっては、
767px
820px
1024pxなどもあります。
Q. 画像はどうするの？
「はみ出さないようにする！」
例えば、
img{
max-width:100%;
height:auto;
}を入れます。
これだけで、
スマホでも画像が飛び出しません。
Q. フォントも変える？
「よく変える！」
例えば、
PC。
font-size:40px;スマホ。
font-size:28px;など。
スマホで40pxは大きすぎることがあります。
Q. 余白も調整する？
「むしろ超重要！」
例えば、
PC。
padding:100px;スマホ。
padding:40px 20px;そのままだと、
余白が広すぎることがあります。
Q. ハンバーガーメニューって？
「スマホ用メニューだよ！」
PCでは、
ホーム
サービス
会社概要
お問い合わせ全部表示できます。
でもスマホだと狭い。
なので、
☰にまとめます。
これが、
ハンバーガーメニューです。
Q. レスポンシブで失敗しやすいポイントは？
「PCだけ見て完成と思うこと！」
初心者あるあるです。
PCでは綺麗。
でもスマホを見ると、
- 崩れてる
- はみ出してる
- 文字が大きい
- ボタンが押しにくい
ということがあります。
Q. 実務では何で確認する？
「Chromeの検証ツール！」
ショートカットは、
Windows
F12Mac
⌘ + Option + Iです。
スマホ表示も簡単に確認できます。
Q. 今のWeb制作で必須？
「必須です！」
今では、
スマホ閲覧の方が多いサイトもたくさんあります。
レスポンシブ対応ができていないと、
使いにくいサイトになってしまいます。
Q. 初心者は何を意識すればいい？
「最初からスマホも考える！」
PC完成後に無理やり直すより、
最初から、
- 横並び
- フォントサイズ
- 余白
を意識すると楽です。
まとめ
レスポンシブ対応とは、
画面サイズに合わせてサイトを見やすくすることです。
例えば、
- 横並び→縦並び
- フォントサイズ調整
- 余白調整
- 画像調整
- ハンバーガーメニュー
などを行います。
現代のWeb制作では、
レスポンシブ対応は必須スキルです。
まずは、
@media screen and (max-width: 768px)を使えるようになることから始めましょう。
PCでもスマホでも見やすいサイトを作れるようになれば、
コーダーとして大きくレベルアップできます。
コーディング犬との約束です。
