レスポンシブWEBデザインのCSSの書き方!

公開日:2014年7月25日
最終更新日: 2015年2月27日

responsive_photo_01

こんにちは!

今、自分用のレスポンシブWEBデザインのテンプレートを作成しているのですが、テンプレートを作成している中で、「レスポンシブデザイン用のCSSの書き方はどうするのが一番良いのか?」とちょっと悩んだ部分がありました。

今回は備忘録も兼ねて、その内容を記事にしたいと思います。

目次!

1.主なCSSでの書き方!
2.結局、一番良さそうな書き方は?
3.対応ブラウザとデモページ!

主なCSSでの書き方!

各デバイスに合わせてCSSファイルを分ける方法!

各デバイスに合わせてCSSファイルを読み込む方法は以下のようになります。htmlのhead内に記述します。

<link rel="stylesheet" type="text/css" href="all.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="tablet.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" type="text/css" href="smartphone.css">

上記を説明すると、
ブラウザの横幅が769px以上の場合は「all.css」、
ブラウザの横幅が768px以下の場合は「tablet.css」、
ブラウザの横幅が480px以下の場合は「smartphone.css」が適用されます。

感想!

各デバイスごとにCSSを分けることができますし、CSS内に@mediaを記入せずに済むのでCSSのコードが綺麗です。ただ各デバイスごとにCSSを分けているので検索はしにくいです。管理、運用面はよくないかもしれません。

1ファイル内に各デバイスごとに記述する方法!

1ファイル内に各デバイスごとに記述する方法は以下のようになります。

.main {...}
.side {...}
.footer {...}    
@media screen and (max-width: 768px) {
  .main {...}
  .side {...}
  .footer {...}    
}
@media screen and (max-width: 480px) {
  .main {...}
  .side {...}
  .footer {...}    
}

上記のCSSを説明すると、
1~3行目まではPCページ用で、「max-width: 768px」の部分にタブレット用のCSSを、「max-width: 480px」の部分にスマートフォン用のCSSを記述します。

感想!

1つのCSSに全てをまとめて記述でき、各デバイスごとに管理できます。
ただ各デバイスごとにCSSを全て記述するので、CSSが膨大になり、管理、運用面はよくないかもしれません。

メディアクエリー(@media)を使用して、各パーツごとに記述する方法!

メディアクエリー(@media)を使用して、各デバイスごとにレイアウトが変わるパーツごとにCSSを記述します。

.main {...}
@media screen and (max-width: 768px) {
  .main {
    float: none;
  }
}

.side {...}
@media screen and (max-width: 480px) {
  .side {
    float: right;
  }
}

上記のCSSを説明すると、
レイアウトが変わるパーツごとにCSSを記述します。「max-width: 768px」のタブレットの場合のみ「main」のCSSが変わり、「max-width: 480px」のスマートフォンの場合は、「side」のCSSが変わります。

感想!

1つのCSSに全てをまとめて記述できますし、パーツ単位で記述していますので管理しやすいです(Sassを使用すれば変数で管理できます)。ただ常にパーツ単位でメディアクエリー(@media)を記述する必要があります。

結局、一番良さそうな書き方は?

私は「メディアクエリー(@media)を使用して、各パーツごとに記述する方法!」でCSSを記述していくことにしました。

他の方法だと、あまりにも色んなところにスタイルがあり過ぎて、探すのに苦労しそうです。各パーツごとに記述していれば、まず管理しやすいと思いますし、Sassを使用すれば、変数でブレイクポイントの管理もできます。

対応ブラウザとデモページ!

上記のCSSの書き方で、テンプレートを作成してみました(まだ完全ではないですが)。以下より実際に作成したテンプレートの「対応ブラウザ」と「デモページ」をご確認頂けます。zipファイルもダウンロードできるようにしています。

下記のブラウザで動作チェック済です。「IE8」は捨てました。

Google Chrome(Windows)
Firefox(Windows)
Safari(Windows)
Internet Explorer 10(Windows)
Internet Explorer 9(Windows)

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。改変は自由です。

最後に!

自分の中でレスポンシブWEBデザインの組み方がまとまったら、細かい作り方なども記事にしてみたいと思います。

現在までのテンプレートを見て「ここは違う」とか「ここはこうした方が良い」とかあれば、ご意見頂ければ有難いです。でもレスポンシブWEBデザインの組み方の正解って何なんでしょうかね。けっこう奥が深そうです。

以上「レスポンシブWEBデザインのCSSの書き方!」でした!

それではまた。

公開日:2014/07/25
最終更新日: 2015年2月27日
カテゴリー:CSS

関連記事

2014/03/02

SSLを設定したらIE8でCSSが効かない!

カテゴリー:CSS, jquery・js
最終更新日: 2015年1月5日

記事を読む

2013/11/11

WordPressのおすすめコメントアウトの方法!

カテゴリー:CSS, WordPress
最終更新日: 2015年2月19日

記事を読む

2013/09/29

Google Adsenseを読み込む時に背景色が一瞬、黄色になるのは何故?

カテゴリー:CSS
最終更新日: 2016年1月2日

記事を読む

新着記事

コメント/トラックバック (1件)

トラックバック用URL:

この投稿のコメント・トラックバックRSS

  1. […] レスポンシブWEBデザインのCSSの書き方! […]




管理人にのみ公開されます

正しい数値を入力して下さい * Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly