初心者向けwebサイトのレスポンシブル対応
こんにちは、daissh04です。
本日はタイトルの通りwebサイトのレスポンシブル対応について書きたいと思います。
私はどちらかと言うと、いきなりパソコンサイズのコーディングから始めるタイプなので、苦手としている分野です。
レスポンシブル対応の必要性について
モバイルファースト
今のwebサイトの設計はこちらが大前提です。Googleのクローラーもモバイル対応しているかどうかで、大きく検索順位に影響を出します。SEO対策をするなら、まずはじめに、レスポンシブルをして置かなくてはいけませんね
上記の関係を受けて、今のWeb制作案件もほとんどとレスポンシブル対応必須になってますね、みなさんブログや、企業サイトもSEOの事を念頭に置いているようですね
そもそも企業ホームページでスマホ画面で画像崩れてたらガックリ来ちゃいますもんね、企業ネームの価値を落としてしまします。
レスポンシブル対応 初歩編
前置きが長くなりましたが、今回は初めてレスポンシブル対応を学ぶと言うかた向けに記事を書きますので、上級者の方は復習がてら見ていてください。
まずはheaderに下記メタコードを書き込んで下さい
<meta name="viewport" content="width=device-width,initial-scale=1.0, shrink-to-fit=no”>
これを書くと以下のサイトはレスポンシブル対応しますよっと言う指令です。
CSSの記述
ブレイクポイントを決めよう！
ブレイクポイントとは、cssのパターンが切り替わるビュー幅です。
例えばスマホ画面を768pxとした場合は、下記のように記述する
@media(max-width:768px){
}
こうすることで、ビューのが768px以下になった時に{}のcssが読み込まれることになります。
適応されてるか素早く確かめる方法は、自分で画面を縮めてみて下さい。あるポイント（vwが768px）で画面レイアウトがガラっと変わるタイミングが確認できるはずです。
レスポンシブルでよく使われるcss
flex-direction:column
要素を縦に並べます。スマホ画面で、要素が横並びになると小さくて見えないですよね、これで写真やブログ記事を縦並びにすることができます。
flex-wrap:wrap
要素を折り返します。
幅が短くなるとテキスト等は自動で行を追加し縦方向に間延びしてしまいます。
それを防ぐため、wrapで要素ごと改行し表示してくれます
これだけで、一般的なスマホ画面になるのではないでしょうか？
自分で画面を縮めてブレークポイントで表示が変わるのを確かめてみて下さい！
次の記事ではレスポンシブルにありがちなハンバーガーメニューについて書きたいと思います！
