レスポンシブの幅の考え方

白い部分が#wrapper

『#wrapperについて』
今回は幅は100%、
最大幅は760pxで指定。

例1:親要素との関わり

#wrapperの80%

orangeの40%

orangeの60%

例2:インライン要素とブロックレベル要素

<p>,<div>,<li>タグとかはブロック

幅の指定はブロックにしか効かないよ

例3:marginとborderとpaddingについて

親要素100%の範囲に
marginとborderとpaddingも含める。

borderは%不可。
固定数値で決める。100%以内に収める。

これはmargin10%×2と
content100％で120%になりアウト!

これはmargin10%×2と
content80％で100%になりOK!

例4:『@media screen and』について

ブラウザの幅によって
違うCSSを指定することが出来るよ。

今回はorangeの要素がフルブラウザで
608px(#wrapperの760pxに80%を掛ける)が
600px未満になったら水色、
500px未満になったら黄緑色にするよ。

『@media screen and』を使う時は


          <meta name="viewport" content="width=device-width">

          <!-- ↓↓以下は意味なので貼らなくていいよ↓↓ -->

          <!-- name="viewport"で見るデバイス情報の取得 -->
          <!-- content="width=device-width"で幅をデバイスに合わせる -->

この<meta>タグを貼ってね。じゃないと機能しないよ。

例4のHTML


        <div id="target2"><!--大きな箱-->
          <p>ここに本文</p>
        </div><!-- /#target -->

例4のCSS


        #target2 {
          background:orange;
          width:80%;
          margin:0 auto;
        }

        @media screen and (max-width:600px) {
          #target2 {
            background:skyblue;
          }
        }
        @media screen and (max-width:500px) {
          #target2 {
            background:lightgreen;
          }
        }

500pxの指定と600pxの指定する順番が逆になると、600px未満の状態の優先順位がが上がってしまうので500px未満のは効かなくなります。指定する順番に気を付けましょう。