さて、現在レスポンシブ化の仕事をやっているのですが、
自分のためにレスポンシブ化のやり方をまとめておこうかなと。
なんつーか不思議と参考サイトの通りやってもうまくいかないことが多くてですね…(；・∀・)
とりあえず自分用の備忘録です。
とりあえずレスポンシブ化の方法は二通り。
デバイスの横幅で表示を切り替えるのが分かりやすいかなと。
- 横幅で読み込むCSSを切り替える
- CSSの機能の一つ『メディアクエリ』を利用する
とりりあえず1つずつ見ていきます。
1. 横幅で読み込むCSSを切り替える
作る側としては個人的にスキなやり方です。
HTMLのヘッダー部分に以下のようなコードを書きます。
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!--スマホ用のCSS読み込みここから-->
<link rel="stylesheet" media="screen and (max-width: 480px)" href="small.css">
<!--スマホ用のCSS読み込みここまで-->
こんな感じ。
横幅480px以下のデバイスでアクセスした場合、
下のsmall.cssを読み込んで、style.cssで設定したcssを上書きします。
それぞれのcssファイルを用意するんで、
作る側としては分かりやすいかなという感じです。
2. CSSの機能の一つ『メディアクエリ』を利用する
こっちはスマホ用とパソコン用、両方のCSSを一つのファイルにまとめる方法。
あんまHTMLに手を加えたくない時なんかはいいかもしれない。
Wordpressで非レスポンシブなテーマをレスポンシブ化させるときとか。
@media screen and (min-width: 481px) {
パソコン用のCSSを記述
}
@media screen and (max-width: 480px) {
スマホ用のCSSを記述
}こんな感じ。
一つにまとめられるのはすごくいいメリットだと思うんですが、
逆に一つのファイルに2つのCSSを記入するので、
コードが長大になっちゃうのがなぁ……という感じです。
ただ、どこかですごくスッキリしたメディアクエリの書き方が紹介されてて、
『うわぁあ～これすごくいいじゃん!!(・∀・)』て思ったのですが、
その書き方を忘れた……(；・∀・)
しかも参考サイトがその後見つからないのです(；・∀・)
まぁそれぞれ一長一短あります。
その時その時にあった方法を選ぶべきですな(｀・ω・´)
自分で一から作る時はなんとなく1の方法を選びたくなります。
ファイル分ける方が分かりやすいしね～。
