おすすめページ（297KB）

9
STEP
第章ト
ップページの作成
4
レスポンシブWebデザインを設定する
1 レスポンシブWebデザイン
「レスポンシブWebデザイン」
とは、さまざまなデバイスのさまざまな大きさのディスプレイで
も、Webページを適切に表示するためのデザインのことです。
レスポンシブWebデザインを
考慮したWebページは、ディスプレイの大きさに応じてWebページの表示方法を変更するこ
とができるようになります。
●パソコンでの表示
●スマートフォンでの表示
現在作成しているWebページでは、
ヘッダーやメイン記事などの幅が960pxに設定されて
います。
そのため、
ウィンドウ幅が960px以上のときボックスを横に並べて表示することができて
も、
960px未満のときボックスを横に並べて表示できない場合があります。
このような場合は、
ウィンドウ幅に応じてスタイルを使い分ける設定を行うことで、
どんなディ
スプレイにも対応したWebページにすることができます。
●設定前
●設定後
ボックスが縦に
並んで表示される
レイアウトが崩れてしまう
115
2 メディアクエリ
「メディアクエリ」を使います。
ウィンドウ幅に応じて、
スタイルを使い分ける場合は、
メディアク
エリとは、Webページを表示するデバイスの画面サイズやブラウザのウィンドウサイズによっ
て、
スタイルを分岐できるしくみです。分岐させる数だけメディアクエリを記述します。
メディ
アクエリの書式は、次のとおりです。
@media（ウィンドウ幅の条件）{
条件に一致したときのスタイルを記述
}
ウィンドウ幅が特定のサイズpx以下の場合の条件を設定するには「max-width：ウィンドウ
幅」、
特定のサイズpx以上の場合の条件を設定するには「min-width:ウィンドウ幅」
と記述し
ます。
例：ウィンドウ幅が1024px以下の場合にヘッダーの画像の回り込みを解除する
@media (max-width:1024px){
header img{
float:none;
}
}
1
2
3
4
5
6
7
8
3 ウィンドウ幅に合わせて回り込みを解除
ウィンドウ幅が959px以下の場合は、
ヘッダーのナビゲーションメニューが会社のロゴ画像に
回り込んで表示されないように、
header要素内のimg要素の回り込みを解除しましょう。
また、
その場合のheader要素内のul要素に、次のようなスタイルを設定しましょう。
スタイル
値
左揃え
パディング（上下左右）
0
「mystyle.css」のメモ帳に切り替えます。
をクリックして、
※次の操作のために、上書き保存しておきましょう。
付録
②次のように入力します。
11
解答
①タスクバーの
10
総合問題
位置
9
付録
1
索引
2
116

Download Report