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

こんにちは!

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

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

主な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の書き方!」でした!

それではまた。

CSS
スポンサーリンク
社会不適合者のWEBフリーランス生活をフォローする
社会不適合者のWEBフリーランス生活

コメント