2015年08月16日

レスポンシブ化あれこれ


さて、現在レスポンシブ化の仕事をやっているのですが、
自分のためにレスポンシブ化のやり方をまとめておこうかなと。
なんつーか不思議と参考サイトの通りやってもうまくいかないことが多くてですね…(;・∀・)
とりあえず自分用の備忘録です。

とりあえずレスポンシブ化の方法は二通り。
デバイスの横幅で表示を切り替えるのが分かりやすいかなと。

  1. 横幅で読み込むCSSを切り替える
  2. CSSの機能の一つ『メディアクエリ』を利用する

とりりあえず1つずつ見ていきます。

1.  横幅で読み込むCSSを切り替える
作る側としては個人的にスキなやり方です。
HTMLのヘッダー部分に以下のようなコードを書きます。

こんな感じ。
横幅480px以下のデバイスでアクセスした場合、
下のsmall.cssを読み込んで、style.cssで設定したcssを上書きします。
それぞれのcssファイルを用意するんで、
作る側としては分かりやすいかなという感じです。

2. CSSの機能の一つ『メディアクエリ』を利用する
こっちはスマホ用とパソコン用、両方のCSSを一つのファイルにまとめる方法。
あんまHTMLに手を加えたくない時なんかはいいかもしれない。
Wordpressで非レスポンシブなテーマをレスポンシブ化させるときとか。

こんな感じ。
一つにまとめられるのはすごくいいメリットだと思うんですが、
逆に一つのファイルに2つのCSSを記入するので、
コードが長大になっちゃうのがなぁ……という感じです。

ただ、どこかですごくスッキリしたメディアクエリの書き方が紹介されてて、
『うわぁあ~これすごくいいじゃん!!(・∀・)』て思ったのですが、
その書き方を忘れた……(;・∀・)
しかも参考サイトがその後見つからないのです(;・∀・)

まぁそれぞれ一長一短あります。
その時その時にあった方法を選ぶべきですな(`・ω・´)
自分で一から作る時はなんとなく1の方法を選びたくなります。
ファイル分ける方が分かりやすいしね~。


コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)