こんにちは、ディレクター兼代表取締役の木下です！
今回はレスポンシブデザインの作り方といったことについて説明していきます。
レスポンシブデザインとは、いろいろなサイズのデバイスや画面サイズに対応するWEBサイトやアプリのデザインのことを指します。身近な物では、パソコン、iPhone、Android、iPad、他タブレットなどのどのデバイスにて確認してもデザインが綺麗に映っていることがレスポンシブデザインです。
最近では少なくなってきましたが、一つのサイトをパソコンで見た時は綺麗に表示されているけど、携帯から確認した際にサイズがすごく小さく映ったり、デザインが崩れているサイトがありませんか？
そのようなサイトはレスポンシブデザインではないという事です。
レスポンシブデザインを作るには、、、
上記３つをおこなうことによってレスポンシブデザインを作る事ができます。
meta viewportのhead内への記述方法、cssによる調整方法は、次回以降にご紹介いたします。
メディアクエリとは、css内に
@media screen and （max-width: 900px） {
/* 900px以下の画面サイズで適用されるスタイル */
}
@media screen and （min-width: 500px） and （max-width: 900px） {
/* 500px~900pxの画面サイズで適用されるスタイル */
}
@media screen and （min-width: 900px） {
/* 900px以上の画面サイズで適用されるスタイル */
}
このように記述をします。
@media screen and （max-width: 900px） {
h1{ color: red; }
}
このように記述すると画面幅900px以下になった場合、h1要素の色が赤色になります。
画面幅が901pxより大きくなると黒色(デフォルトカラー)へ戻ります。
このようにして、レスポンシブデザインを構築していきます。
難しい記述でもないのでまずは少しずつ小さいところから調整していき、ある程度できるようになったらセクション、全体と少しずつ範囲を広くしていくことをおすすめします！
本日も、ご拝読ありがとうございました。
