わかってはいたものの、最近レスポンシブスタイルのサイトを作成する事が増えてきました。一般的にはCSSのメディアクエリ（mediaquery）を使ってレスポンシブにするんですよね。
今回は自分がレスポンシブサイトを作成する際に、コピペできるようにまとめてみました。
スポンサードリンク
メディアクエリーコピペ専用
私は記述方法を忘れないようにできるだけコピペをしないで手打ちをする癖をつけているのですが、メディアクエリの記述はついつい忘れがちになってしまいます。
忘れた時にすぐ検索できるようにまとめておきました。
980px以上のサイズの時に適用させる
|
1 2 |
@media print, screen and (min-width: 980px) { } |
PCサイズの時にこのような記述を行っています。
768px以上、979px未満のサイズの時に適用させる
|
1 2 |
@media print, screen and (max-width: 979px) and (min-width: 768px) { } |
タブレットサイズの時にこのような記述を行っています。
480px以上、767px未満、未満のサイズの時に適用させる
|
1 2 |
@media print, screen and (max-width: 767px) and (min-width: 480px) { } |
スマホサイズの時にこのような記述を行っています。767未満はすべて同じ記述にする事も多いです。
479px未満
|
1 2 |
@media only screen and (max-width: 479px) { } |
より小さいスマホサイズ時に適用しています。
レスポンシブを何段階に分けるか
これは制作者によって様々なのですが、私は3段階（～4段階）に分ける事が多いです。この形が最も理想形なのではないかなと思っています。
メディアクエリを使う時によく使うもの
メディアクエリを使ってレスポンシブ化を行う時によく使うものもまとめておきます。
ヘッダーに記述するもの
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
こちらを記述するとデバイスに合わせた表示になるよう設定されます。
良く使うクラス
レスポンシブだから特別に使うという事もないのですが、以下の何点かはレスポンシブだからこそよく使用するクラスなのではないでしょうか。
- ・min-width（幅の最小値を指定）
- ・max-width（幅の最大値を指定）
- ・min-height（高さの最小値を指定）
- ・max-height（高さの最大値を指定）
こちらの4つはよく使用するので忘れないようにメモ書きしておきます。
レスポンシブ時に使うテクニック
レスポンシブサイトを作る時に、よく使うのは「％指定」です。
横幅50%のボタンを左右に並べる…なんてことはしょっちゅうなので、覚えておくと良いかもしれません。
簡単そうに見えて以外と面倒臭いですが、覚えてしまえばなんてことはありません。
レスポンシブでよく使う！CSSで横幅を50％にする
レスポンシブってそもそも何？
レスポンシブというものがそもそも何なのかわからない方は以下の記事も参考にしてみてくださいね。
Web製作におけるレスポンシブデザインとは何なのか？
スポンサードリンク
