こんにちは、Awaisoraの管理人です！
デバイスに合わせてサイトデザインを変える方法は大きく分けて、２つあります。
１つは、サブドメインを利用した方法でこちらは、１つの記事を投稿するたびに同じ内容のコンテンツをデバイス用に作る方法です。
ですが、トレンド記事や個人ブログの方などはそのような手間をかけたくないと考えるかたがほとんどではないでしょうか？
そこで今回は、もう１つの閲覧されるデバイスによってサイトのデザインを変えられる、『レスポンシブデザイン』の作り方を初心者向けにご紹介していこうと思います！
レスポンシブデザインの作り方
レスポンシブデザインはユーザーの画面に合わせた表示をする方法です。なのでデザインに特化したCSSを使います。
CSSでは基本的に『@media screen and』を使ってソースコードを記述します。
CSSでは、通常@media screen andの部分にクラス名やタグ名が入るので、あまり馴染みのないコードで難しいと感じる方がいるかもしれません。
ですが、そういった方も下でご紹介するCSSコードをコピー&ペーストすれば、簡単に実用可能なので肩の力を抜いて大丈夫ですよ。
スマホ
スマホのレスポンシブデザインは、min-797pxサイズがおすすめです。
@media screen and (min-797px){
この中にCSSソースコードを記述します。
}
パソコン
パソコンのレスポンシブデザインは、max-479pxサイズがおすすめです。
@media screen and (max-479px){
この中にCSSソースコードを記述します。
}
ちなみにCSSの基準を記述する場合は、@media screen andを指定せずに、CSSを記述します！
まとめ
今回は、レスポンシブデザインの作り方を初心者向けに解説してきました。
2019年11月19日現在、Googleの検索アルゴリズムでは、レスポンシブデザインを取り入れているサイトが検索で上位表示される基準の１つとなっています。
なのでGoogleの検索エンジンで上位表示をさせたい方は、レスポンシブデザインの導入を検討してみてはいかがでしょうか。
最後までお読みいただきありがとうございました！
コメント