ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blogスタッフブログ

レスポンシブWebデザイン【css記述方法】※追記あり

Avatar photo
i.M.D. Staff
2015.05.21

responsive02

レスポンシブWebデザインでコーディングをする際にcssの記述方法は色々あると思います。
私のcssの書き方は「一つのcssにメディアクエリーを
使って上部にPC部分の記述、下部にスマホ部分を記述する方法です。
下記のように記述しています。


/* PC部分に適用させるcss */
#header{...}
#main{...}
#footer{...}

/* スマホ部分に適用させるcss */
@media screen and (max-width: 767 768px) {
  #header{...}
  #main{...}
  #footer{...}
}

上記の書き方をするとcssの記述が長くなった場合上部にPC部分、
下部にスマホ部分の記述が書いてあるので、
上部と下部を行ったり来たりしなければいけないし、どこに書いたかわからなる場合が多々あります。
そうなると運用性、可読性は良くないと感じます。

そこでもっとレスポンシブWebデザインでのcssの記述方法で運用性、可読性が良い書き方はないか調べてみました。
調べた結果「ブラウザの横幅で読み込むcssを変える方法」がありました。
下記のようにhtmlのhead内にcssを指定する際にブラウザの横幅で読み込むcssを変えるという方法です。


<!--ブラウザの横幅769px以上の場合に適用させる-->
<link rel="stylesheet" href="style_pc.css" media="screen and (min-width: 768 769px)">

<!--ブラウザの横幅768px以下の場合に適用させる-->
<link rel="stylesheet" href="style_sp.css" media="screen and (max-width: 767 768px)">

上記のようにするとcssファイルは2つになりますが、先ほどのように上部下部と行ったり来たりすることはなく、
大体同じ行にcssの記述が書けるので可読性は上がると感じました。
しかしPCサイズのcss、スマホサイズのcssとファイル間の行き来、
改修する際に二つのcssファイルを触らなければいけないのがめんんどうだと思いました。

上記の他にもっと良い方法がないか調べていると良い方法がありました!

一つのcssにメディアクエリーを使用して、各パーツ(セレクタ)ごとに記述する方法です!
下記のように記述します。


#header{...}
@media screen and (max-width: 767 768px) {
  #header{...}
}

#contents{...}
@media screen and (max-width: 767 768px) {
  #contents{...}
}

#footer{...}
@media screen and (max-width: 767 768px) {
  #footer{...}
}

メディアクエリーの記述を何度も書かなくてはならないのは手間ですが、
上記のように記述すると最初の書き方より可読性が抜群に良くなると感じました。
パーツごとにcssを書いていてそのパーツのcss部分が長くなってしまったら
ID、クラスごとに分けると可読性、サイト改修時にメンテナンス性は保たれると思いました。

 
 
下記サイトが大変参考になりました。
参考URL http://www.mobile-first.jp/original/1444/
参考URL http://yomotsu.net/blog/2012/10/01/mediaquery-goodpractice.html

Avatar photo
投稿者:i.M.D. Staff
2015.05.21 | 23:59
ホームページ制作・Web制作・WEBコンサルティングならお任せあれ