プログラミング

【レスポンシブ】コーディング前の事前準備 しっかりおさえておきましょう

スポンサーリンク

準備

今回はレスポンシブデザインのコーディングをする際の、事前準備についてご紹介します。
なんてことはないですが、どうやるんだっけ、という人向けですので、メモ書きみたいな感じです。

それでは見ていきましょう。

はじめに

そもそもレスポンシブデザインとは、

画面サイズに応じて最適なデザイン(レイアウト)を表示しますよ、

ということです。

スマホ、タブレット、PCなど、いろいろな画面サイズに対応させることです。

準備

ビューポートを設定しましょう。

簡単です。
HTMLファイルの<head></head>の中に、
これ↓をコピペするだけです。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

メディアクエリの設定

CSSファイルにメディアクエリの設定をしましょう。

メディアクエリとは、
Webサイトをデバイスの画面サイズに適した形で見せることです。

デバイスの画面サイズはざっとこんな感じでしょうか。

 

スマートフォン:320px〜540px
タブレット:600px〜1024px
PC:1,280px〜

コード

CSSファイルに下記のコードを書いて、

画面ごとのcssをコーディングしていきましょう。

@media screen and (max-width:540px){

画面幅が540px以下の時の、CSSコードをここに書きます。

}

 

@media screen and (min-width:600px){

画面幅が600px以上の時の、CSSコードをここに書きます。

}

まとめ

簡単でしたよね。

  • ビューポートの設定
  • メディアクエリの設定

この2つです。

ブレイクポイントや、もっと詳細を知りたい方はこちらもどうぞ。

レスポンシブデザイン



スポンサーリンク

-プログラミング
-, , , , , ,

© 2022 サカらいふ Powered by AFFINGER5