プログラミング

ゼロから始めるプログラミング生活 #4 index.htmlのデザインを完成させよう

ゼロから始めるプログラミング生活 #3 CSSを使ってリンクテキストのデザインを変えよう! https://mataneteta.com/programmingzero2/ 前回メインページ(index.html)をHTM...

前回CSSを使う準備を終えて

実際にCSSを使ってナビゲーション内のデザイン変更を行いました。

今回もCSSを使ってindex.html(メインページ)のデザインを変えていきたいと思います。

ページの最大幅を設定しよう

作成したWebサイトをモバイル端末にも対応できるように予めページの最大幅を決めて

画面の大きさに応じてWebサイトのサイズを対応させるための設定をしておきます。

今回はブラウザいっぱいに広がっていたWebサイトの最大幅を設定します。

まずは<body>タグにデフォルトで設定されている周囲の余白を取り除きます。

次のコードをstyle.cssに追記します。

body {margin: 0 0 0 0}

 

これで<body>タグにデフォルトで設定されていた余白を取り除きました。

次に<body>内に設定していた<div class=”home”>に適応するコードを追記します。

.home {
margin: 0 auto 0 auto;
max-width: 960px;
}

 
 
 
Webサイトが中央に配置されました。(わかりやすいように色を追記しています。)
 
marginの次の4つの数字は上から時計回りに値を宣言しています。
数字を入れた数によって適用されるマージンが変わります。

値を1つ指定した場合 → 「上下左右」すべてのマージン
値を2つ指定した場合 → 記述した順に「上下」「左右」のマージン
値を3つ指定した場合 → 記述した順に「上」「左右」「下」のマージン
値を4つ指定した場合 → 記述した順に「上」「右」「下」「左」のマージン

となります。

画像の上にナビゲーションを置こう

次に画像の上にリンクテキストを配置します。

まずはindex.htmlで仮に大きさを決めていた

「center.jpg」のサイズを「width=”960px”」に変更して保存します。

 

次にナビゲーションが画像上の左上に来るように

style.cssに次のコードを追記して保存します。

保存したらWebサイトを確認してみましょう。

.image {
position: relative;
}

.nav {
position: absolute;
left: 0px;
top: 0px;
}

画像の上にリンクテキストが配置されました。

index.htmlのコードで見たほうが理解しやすいかもしれません。
relativeの中でabsoluteを動かすイメージです。

Webサイトがブラッシュアップされてきて大見出しが浮いてきたので
ここにきて大見出しをシンプルなものに変更することにしました。
また、大見出しの上下の空白を無くすため
style.cssに.top{margin: 0 0}を追記して上下幅を縮小しました。

Webサイトをスマートフォンに対応させよう

ビューポートの設定をしよう

画面サイズやウィンドウサイズに合わせて伸縮し

ページを正しく表示させることのできるWebサイトを作る方法を

「レスポンシブデザイン」といいます。

Webサイトのページの伸縮倍率をレスポンシブデザインに対応させるために

次のコードをindex.htmlの<head>内に追記して保存します。

<meta name=”viewport” content=”width=divice,initial-scale=1″>

デフォルト設定では画面の大きさによってWebサイトの倍率が変わるため
スマートフォンなどのモバイル端末でWebサイトを見ると
画像や文字が小さくなってしまいます。
このコードはウィンドウサイズによる縮小を防ぐための追記です。

画像をレスポンシブデザインに対応させよう

画像がウィンドウサイズにあわせて伸縮するように

style.cssに次のコードを追記して保存します。

img{
max-width: 100%;
height: auto;
}

画面サイズに応じて適応するスタイルを切り替えよう

画面サイズに合わせてレイアウトが変わるように

style.cssに下のコードを追記して保存します。

@media(max-width:750px) {

}

@mediaはメディアクエリと呼ばれ
( )内の条件を満たしたときにだけ{ }内のスタイルが適用されます。
width750はスマートフォンの横向きと大型タブレットの間の数値で
スマートフォン向けのスタイルを適用するのにいいとのこと。
(※2019年5月現在)

次にメディアクエリが適用されたときにだけ

Webサイト全体の左右に空白を作り

大見出しを小さくして

ナビゲーション内のリンクテキストの並びを変えます。

先程のメディアクエリ内{ }に下のコードを追記して保存します。

.home{ 
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);
}

「left: 0px; top: 0px;」や「rigth: 0px; bottom: 0px;」といったように
「上から」「下から」「右から」「左から」○○pxと設定すれば
position: absolute;の置く場所を指定できます。

配置できました。

このままだと読みにくいのでお知らせ一覧を右寄せにします。

ついでに©Copyright mataneteta. All rights reservedを中央にします。

それぞれのclass属性「.main」と「.footer」にstyle.cssで下のように追記します。

.main{
text-align: right;
}

.footer{
text-align: center;
}

text-alignはブロック内の行の揃え位置、均等割付の指定です。
 

次にメディアクエリを使い

画面サイズに応じて適応するスタイルを切り替えます。

今回は画面が小さくなったら「画像の中に入れる前の状態」に戻します。

style.css内のメディアクエリ内{ }に下のコードを追記して保存します。

.main{
text-align: left;
position: static;
}

position: static;特に配置方法を指定せず初期値に配置するコードです。

 
 
これで画面サイズに応じてWebサイトが変化するようになりました。

今回のまとめ

今回でindex.html(メインページ)のデザイン変更は終わりました。

というわけで前回作成した

index.html内の<head>内に追記した下のコードを消してWebサイトを見てみましょう。

<style media=”screen”>
*{outline:1px solid #ff0000}
</style>

 

すっきりしましたね。(・・・したよね?)

ちなみにスマホ画像はコチラ

 

あとは実際にモバイル端末で確認してみて

文字の大きさやデザインの修正を行えばトップページは完了です。

 

次回は別のページを作るか

javascrptを勉強してトップページをブラッシュアップするか

迷っています。