joppot

コピペで絶対動く。説明を妥協しない

プログラミング

【TwitterBootstrap2.3.2】cssによるレスポンシブwebデザインのメディアサイズの範囲分け

投稿日:2014年4月10日 更新日:

Pocket

logo_bootstrap

概要

みなさんこんにちはcandleです。今回は当たり前の内容ですが、twitterbootstrap2.3.2(以下bootstrap)のmediaサイズがどの様に分けられているのか見てみましょう。

bootstrapとはwebサイトのデザインが苦手な技術者がそれなりに美しく表示できる様にしたhtml&css&javascriptのテンプレートです。

これはレスポンシブwebデザインも採用しており、デバイスに合わして、表示内容を動的に変更することもできます。

レスポンシブwebデザインでは表示される幅に対するデザインの適応分けはそれぞれのテンプレートによって異なります。一番わかり易いのは全ての横幅をパーセンテージで指定して、デバイスによって表示される幅が変更されたら、それに合わせて表示される幅も変更される例があります。

多くの場合、PC、タブレット、スマートフォンの3つの横幅に対応させて、表示内容を動的に切り替えます。


サンプルファイルを用意する

これは別に記事を読むだけの人はわざわざ用意しなくてもかまいません。今回は下のhtmlファイルを使用して、説明していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <style>
        /* 480px以内に適応 */
        @media (max-width: 480px) {
        }
        /* 767px以内に適応 */
        @media (max-width: 767px) {
        }
        /* 768px以上、979px以内に適応 */
        @media (min-width: 768px) and (max-width: 979px) {
        }
        /* 979px以内に適応 */
        @media (max-width: 979px) {
        }
        /* 980px以上に適応 */
        @media (min-width: 980px) {
        }
        /* 1200px以上に適応 */
        @media (min-width: 1200px) {
        }
    </style>
  </head>
  <body>
    <h1>hello</h1>
  </body>
</html>


twitterbootstrapの幅の表示分け

bootstrapの表示わけは下の様になっています。


/* 480px以内に適応 */
@media (max-width: 480px) {

}
/* 767px以内に適応 */
@media (max-width: 767px) {

}
/* 768px以上、979px以内に適応 */
@media (min-width: 768px) and (max-width: 979px) {
	 
}
/* 979px以内に適応 */
@media (max-width: 979px) {
	 
}
/* 980px以上に適応 */
@media (min-width: 980px) {
    
}
/* 1200px以上に適応 */
@media (min-width: 1200px) {
    
}

これを図で表すと下の様になります。

width

けっこう細かく別れている事が分かります。

上から見て行きましょう。

@media(max-width)を連ねると大きい幅の設定は小さい幅に影響します

例えば、下の幅設定があるとします。


/* 480px以内に適応 */
@media (max-width: 480px) {

}
/* 767px以内に適応 */
@media (max-width: 767px) {

}

max-width 767pxの方にbodyの色をredにする設定を書きます。

 /* 480px以内に適応 */
@media (max-width: 480px) {

}
/* 767px以内に適応 */
@media (max-width: 767px) {
	body{
		background-color: red;
	}
}

画面サイズを480px以下にしても背景色の設定が影響します。下の図から320pxの幅にしても画面が赤い事がわかります。

Mozilla Firefox

図にすると下の様になります。

kei

この設定は共通する部分を書く分には問題ないのですが、万が一767pxだけ設定したいプロパティがあったとしても、480px以下にも影響してしまいます。

そこも気をつけてmax-widthを使いましょう。

min-widthとmax-widthを使用して適用範囲を限定する

では、cssの適応範囲を限定するにはどうしたらよいかといううと、min-width(その幅以上)とmax-width(その幅以下)を両方記述すれば良いのです。

書き方は一般に

@media (min-width: 幅のサイズpx) and (max-width: 幅のサイズpx){

}

で記述します。
上のサンプルコードでは


/* 768px以上、979px以内に適応 */
@media (min-width: 768px) and (max-width: 979px) {
	 
}

ここですね。
試しに、ここにbodyの背景色をredにする設定を記述しましょう。

/* 480px以内に適応 */
  @media (max-width: 480px) {
  }
  /* 767px以内に適応 */
  @media (max-width: 767px) {
   <del datetime="2014-04-10T09:15:20+00:00"> body{
      background-color: red;
    }</del>
  }
  /* 768px以上、979px以内に適応 */
  @media (min-width: 768px) and (max-width: 979px) {
    body{
      background-color: red;
    }
  }

先ほどの767pxのところは削除して、新たに記述しましょう。
すると767px以下では背景が赤くなることはなくなります。
Mozilla Firefox-1
図にすると次の様になります。

ioijof

これだと、指定した間のみスタイルが適応されるので、便利ですね。


min-widthで指定幅以上全てにスタイルを適応する

この設定は指定された幅以上にスタイルを適応するプロパティです。一般にPC画面に向けて設定する事が多いです。PC画面は大体1200px以上なので1200px以上の設定はpc向けになります。

bootstrapの設定を見ると、2つほど設定されています。

 /* 980px以上に適応 */
@media (min-width: 980px) {
}
/* 1200px以上に適応 */
@media (min-width: 1200px) {
}

これもmax-widthの例のように、幅が小さい方の設定は幅が大きい方の設定にスタイルが継承されます。試しに、body{background-color:red}を980pxの方に記述してブラウザで見てみましょう。

/* 768px以上、979px以内に適応 */
@media (min-width: 768px) and (max-width: 979px) {
  <del datetime="2014-04-10T09:15:20+00:00">body{
    background-color: red;
  }</del>
}
 /* 979px以内に適応 */
@media (max-width: 979px) {
}
/* 980px以上に適応 */
@media (min-width: 980px) {
  body{
    background-color: red;
  }
}
/* 1200px以上に適応 */
@media (min-width: 1200px) {
}

Mozilla Firefox-2

1200px以上でも同じように背景色が付いています。

図にすると下の様になります。

iu

どうでしょうか。まあ大体この設定は先ほども書いたようにpc向けに書かれます。
以上がtwitterbootstrapのレスポンシブデザインの分割設定です。


まとめ

どうでしょう、自分でレスポンシブwebデザインをやる時の参考になったでしょうか?
スタイルの適応範囲を、常に意識して設定を行いましょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

railsのrakeのmigrationファイルを削除しNO FILEとstatusに出た時の対処

概要 みなさんこんにちはcandleです。今回は誤ってデータベースに反映したマイグレーションファイルを不要だと思って削除した時に、NO FILEと出てきてしまった時の対処です。 言うなれば、下のような …

macでreact nativeの環境構築をして、iosアプリのhello worldをする

概要 みなさんこんにちはcandleです。 今回は、react nativeの環境構築をmac上で行い、iosアプリでhello worldをしてみたいと思います。 react nativeはreac …

Mysqlで今日以降の最も近い日付を取得する

概要 みなさんこんにちはcandleです。今回はmysqlで今日以降の最も近い日にちを取得する方法を紹介します。 ライブや、イベントなどで、今日から見て、最も近い日のデータを取得したみたいなことってあ …

ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする

概要 railsのckeditorはデフォルトでrailsのuploadsフォルダにアップロードしますが、 それだとサーバの容量を取ってしまうので、画像のアップロード先をS3に上げてみたいと思います。 …

railsのfluent-logger gemを使ってユーザーのアクセスをfluentdサーバに収集する

概要 みなさんこんにちはcandleです。前回からfluentd関連の記事を続けていますが、今回辺りから実用的な使い方を書いていきたいと思います。 fluentdと言えば、ビックデータで扱うようなデー …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ