ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【web】レスポンシブなサイトを作るテクニック①

今回はCSSでレスポンシブサイトを作るためにはどうすればいいのかを紹介します!

 

レスポンシブデザインとは?

まずは、web入門者のためにレスポンシブデザインとは何かを説明してきます。

レスポンシブデザインとはウィンドウの大きさに応じてWebサイトのレイアウトが変化するデザインのことです。

レイアウトの変更は基本的にHTMLはいじらずにCSSもしくはJSのみで変化させます。

近年、スマートフォンが増えてきてスマートフォン用のサイトを作らなければならないという点から出てきた技術です。

ちなみに本ブログもレスポンシブになっています。

PCで見ている方は、ウィンドウサイズを小さくしたり大きくしたりするとわかると思います!

 

 CSSでレスポンシブデザインを作る方法

基本的にはCSSの”メディアクエリ”を使って実装します。

記述方法を見ながら説明します。

/*スマートフォン用デザイン*/
@media screen and (max-width: 767px){
  /*ここにcssを記述します*/
}
/*タブレット用デザイン*/
@media screen and (min-width: 768px) and (max-width: 1024){
  /*ここにcssを記述します*/
}
/*パソコン用デザイン*/
@media print, screen and (min-width: 1025px){
  /*ここにcssを記述します*/
}

 まず、「@media screen」でメディアクエリを使うぜ!って感じです。

「max-width: 767px」とあります。これは”横幅が0~767pxまでの場合ここのcssの記述を使う!”という意味になります。

「min-width: 1024px」の場合では”横幅が1024px以上の場合ここのcssの記述を使う!”という意味になります。

「and」を使うことで「768px~1024pxまで」というように連結させることが出来ます。

 

横幅に指定する値は何をとればいいのか?

横幅に指定している値(今回は768px, 1024px)はどう決めればいいのか悩みますよね><;

この値をブレークポイントと呼びます。

768pxと1024pxはどんな値なのか?

それはipadのサイズです!

ぶっちゃけ、どのサイズがスマホでどのサイズがPCなのかはなかなか決めにくいところです。

なので結構売れてるipadを参考にしよう!ってまぁそんなところですw

今後はどんなサイズの端末が主流になるのか分からないので、あくまでも参考程度って感じです汗