レスポンシブデザインを作成してみよう
「簡単なWebページを作成してみよう」で作成した「レイアウト」と「3カラムレイアウト」をレスポンシブ対応にしてみましょう。
まずは画像を見て、自分で考えながら手を動かして作成してみて下さい。
ー レイアウト ー
・ウィンドウ幅が767pxまでの場合に適用
全体の横幅を80%にする
・ウィンドウ幅が479pxまでの場合に適用
ヘッダーの縦幅を300pxにする
フッターの縦幅を200pxにする
/*ウィンドウ幅が最大767pxまでの場合に適用(タブレット用)*/ @media screen and (max-width: 767px) { #wrapper { width: 80%; } } /*ウィンドウ幅が最大479pxまでの場合に適用(スマホ用)*/ @media screen and (max-width: 479px) { .header { height: 300px; } .footer { height: 200px; } }
ー 3カラムレイアウト ー
・ウィンドウ幅が479pxまでの場合に適用
全体の横幅を400pxにする
leftの横幅を200pxに縦幅を500pxにする
left-upperの横幅を90pxに縦幅を60pxにする
left-lowerの横幅を90pxに縦幅320pxにする
centerの横幅を200pxにする
leftの下にcenterをもってくる
rightの横幅を200pxにする
right-innerの横幅を110pxにする
right-inner-textの文字の大きさを5pxにする
right-inner-textの内側の余白を10pxにする
right-inner-textの背景色をorangeに変える
right-inner-textの線の色をredに変える
/*ウィンドウ幅が最大479pxまでの場合に適用(タブレット用)*/ @media screen and (max-width: 479px) { .wrapper { width: 400px; } .left { width: 200px; height: 500px; } .left-upper { width: 90px; height: 60px; } .left-lower { width: 90px; height: 320px; } .center { float: none; /* 要素の浮動化の解除 */ width: 200px; } .right { width: 50%; } .right-inner { width: 110px; } .right-inner-text { font-size: 5px; padding: 10px; background-color: orange; border: 5px solid red; } }