前回CSSを使う準備を終えて
実際にCSSを使ってナビゲーション内のデザイン変更を行いました。
今回もCSSを使ってindex.html（メインページ）のデザインを変えていきたいと思います。
目次
ページの最大幅を設定しよう
作成したWebサイトをモバイル端末にも対応できるように予めページの最大幅を決めて
画面の大きさに応じてWebサイトのサイズを対応させるための設定をしておきます。
今回はブラウザいっぱいに広がっていたWebサイトの最大幅を設定します。
まずは<body>タグにデフォルトで設定されている周囲の余白を取り除きます。
次のコードをstyle.cssに追記します。
これで<body>タグにデフォルトで設定されていた余白を取り除きました。
次に<body>内に設定していた<div class=”home”>に適応するコードを追記します。
margin: 0 auto 0 auto;
max-width: 960px;
}
数字を入れた数によって適用されるマージンが変わります。
値を1つ指定した場合 → 「上下左右」すべてのマージン
値を2つ指定した場合 → 記述した順に「上下」「左右」のマージン
値を3つ指定した場合 → 記述した順に「上」「左右」「下」のマージン
値を4つ指定した場合 → 記述した順に「上」「右」「下」「左」のマージン
となります。
画像の上にナビゲーションを置こう
次に画像の上にリンクテキストを配置します。
まずはindex.htmlで仮に大きさを決めていた
「center.jpg」のサイズを「width=”960px”」に変更して保存します。
次にナビゲーションが画像上の左上に来るように
style.cssに次のコードを追記して保存します。
保存したらWebサイトを確認してみましょう。
position: relative;
}
.nav {
position: absolute;
left: 0px;
top: 0px;
}
画像の上にリンクテキストが配置されました。
relativeの中でabsoluteを動かすイメージです。
ここにきて大見出しをシンプルなものに変更することにしました。
また、大見出しの上下の空白を無くすため
style.cssに.top{margin: 0 0}を追記して上下幅を縮小しました。
Webサイトをスマートフォンに対応させよう
ビューポートの設定をしよう
画面サイズやウィンドウサイズに合わせて伸縮し
ページを正しく表示させることのできるWebサイトを作る方法を
「レスポンシブデザイン」といいます。
Webサイトのページの伸縮倍率をレスポンシブデザインに対応させるために
次のコードをindex.htmlの<head>内に追記して保存します。
スマートフォンなどのモバイル端末でWebサイトを見ると
画像や文字が小さくなってしまいます。
このコードはウィンドウサイズによる縮小を防ぐための追記です。
画像をレスポンシブデザインに対応させよう
画像がウィンドウサイズにあわせて伸縮するように
style.cssに次のコードを追記して保存します。
max-width: 100%;
height: auto;
}
画面サイズに応じて適応するスタイルを切り替えよう
画面サイズに合わせてレイアウトが変わるように
style.cssに下のコードを追記して保存します。
}
（ ）内の条件を満たしたときにだけ{ }内のスタイルが適用されます。
width７５０はスマートフォンの横向きと大型タブレットの間の数値で
スマートフォン向けのスタイルを適用するのにいいとのこと。
（※２０１９年５月現在）
次にメディアクエリが適用されたときにだけ
Webサイト全体の左右に空白を作り
大見出しを小さくして
ナビゲーション内のリンクテキストの並びを変えます。
先程のメディアクエリ内｛ ｝に下のコードを追記して保存します。
margin: 0 5px
}
nav li{
display: block;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
お知らせの表示方法も変更してみよう
今まで使用したコードを応用して
今度はお知らせの表示方法を変更してみましょう。
まずはindex.htmlの整理から。
「<header>タグ」を大見出し（<h1>タグ）のみに適用するように
「image属性のついた<div>タグ」を<main>タグを取り込むように適用します。
↓
これで<div class=”image”>の中で<main class=”main”>を動かす準備ができました。
次に画像の左上にナビゲーションを置いたように
お知らせ一覧も画像上の右下になるように置いてみます。
すでに「.image {position: relative;}」は宣言しているので
次のコードをstyle.cssの「.image {position: relative;}」より下に追記します。
.main{
position: absolute;
rigth: 0px;
bottom: 0px;
background: rgba(255, 255, 255, 0.5);
}
「上から」「下から」「右から」「左から」○○pxと設定すれば
position: absolute;の置く場所を指定できます。
配置できました。
このままだと読みにくいのでお知らせ一覧を右寄せにします。
ついでに©Copyright mataneteta. All rights reservedを中央にします。
それぞれのclass属性「.main」と「.footer」にstyle.cssで下のように追記します。
.main{
text-align: right;
}
.footer{
text-align: center;
}
次にメディアクエリを使い
画面サイズに応じて適応するスタイルを切り替えます。
今回は画面が小さくなったら「画像の中に入れる前の状態」に戻します。
style.css内のメディアクエリ内｛ ｝に下のコードを追記して保存します。
text-align: left;
position: static;
}
今回のまとめ
今回でindex.html（メインページ）のデザイン変更は終わりました。
というわけで前回作成した
index.html内の<head>内に追記した下のコードを消してWebサイトを見てみましょう。
*{outline:1px solid #ff0000}
</style>
すっきりしましたね。（・・・したよね？）
ちなみにスマホ画像はコチラ
あとは実際にモバイル端末で確認してみて
文字の大きさやデザインの修正を行えばトップページは完了です。
次回は別のページを作るか
javascrptを勉強してトップページをブラッシュアップするか
迷っています。
