ヘッダーを装飾してみよう

ヘッダーにロゴを貼って、色をつけて

HTMLとロゴとCSSの準備はいいですか


飯田いいとこ←今日の課題。これをコピーして同じフォルダへ保存する。
a4.zip へのリンク←またはこれを保存解凍して下さい
ロゴ画像は

ですが他の画像でもOKです。名前はtitle-logo.pngです。
拡張子が.orgでないとか、他の名前になっている人はHTMLを直します。自分で好きなロゴにしましょう

ロゴを表示しましょう

ヘッダーとヘッダーの間に画像をのせるには、HTMLに次のようにかきます。
  <header>
  <img src="title-logo.png" alt="いいだにおいで">
  </header> 
イメージタグには、終了のタグはありません。</img>はありません。
改行タブの<br>のように、終わりのタグのないものもあるのです。
<img src="title-logo.png" alt="いいだにおいで">
<要素名 属性=”値”>という順番で書きます。
<
img   ・・・(要素名)
src   ・・・(属性)
=
"title-logo.png" ・・・(値)
>
ここでは、<要素名 属性=”値” 属性=”値”>と属性が2つあります。
(属性と言いますがプロパティじゃないのかい?よくわからんけれど、統一してほしいな。)
img src="title-logo.png" width="154" height="28" alt="いいだにおいで">
と、幅と高さを欠いた方がいいと言われます。
幅と高さは、人によって違うでしょう、画像にマウスを重ねると表示されます。調べて自分の画像の幅と高さを欠きましょう。(違う数値を書くと、その幅や高さに変更されて表示されます。)

ロゴにリンクを張りましょう

これにリンクを張ります
リンクは<a>タグを使います。
<a>タグと</a>タグの中にイメージを囲いれると。イメージからのリンクができます。
文字を入れれば文字へのリンクになるのです。
 はアンカーの頭文字です。アンカーは「くさり」ですから、ここに書かれているのが何か鎖でつながれているというイメージでしょうか。
         <a href="index.html">
        <img src="title-logo.png" width="154" "28" alt="いいだにおいで">
        </a>
ですが
         <a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>
と、1行にしてもかまいません。

ヘッダーの幅と色

このままではヘッダーかどうか分かりません。
今度は学習のために、CSSで色をつけてみましょう。
(CSSは、/* */がコメントです。コメント部分を消してみましょう。)
main.csを開いて、現在書いてあるその下へ
 header{
    height: 65px;
    width: 100%;
    background-color: yellow;
} 
と書いてみて下さい。
header{      ・・・・・・(セレクタといいます)ヘッダーについて書くよと宣言して
height: 65px;    ・・・・・・(プロパティ:値;)高さwp65ピクセル
width: 100%;    ・・・・・・(プロパティ:値;)幅を全体に
background-color: yellow;  ・(プロパティ:値;)色を黄色に
}
となっています。
色は適当な色に変えましょう。

ブラウザで見てみましょう

ブラウザで見てみましょう。
ロゴが左寄せされています。
ロゴを真ん中に持ってきたい、そんなときCSSが活躍します。

HTMLの中にマークをつける

次のリンクを張った画像を中央寄せしたい、
             <a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>
そういうときは、HTMLのこのタグへCSS用のマークをつけます。
          <div class="logo">
             <a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>
        </div>
マークをつけておくとき活躍するのが<div></div>タグです。
HTMLを書き換えましょう。
DIVタグだけでは、何も意味がありません、けれど、<div>で囲むと、ブロック要素といってその中を一つの塊として扱えます。
そしてそこのブロックへ、class="logo" と、ここではlogoという名前をつけました。
タグのかたまりをかこみ(ブロック)、どこかのクラスに入れる。(class="なんちゃら")、なんだか学校みたいですね。
次にCSSで
例えば「このクラスは皆帽子をかぶれ」などと決まりを当てはめるのです。

CSSで中央寄せ(センタリング)

これまで、タグに属性(性質)を持たせるときは
h1{なんちゃら:かんちゃら;}
とそのままタグ名につなげて書き込んでいました。
クラスの場合はちょっとちがいます。
頭にドットをつけてクラスを指定します。
ドット+クラス名{
   属性:値;

となります。
.logo{
    text-align:center;
}
ドット+ロゴクラス{
   テキストの位置:真ん中;

というふうになるのです。
そして保存してブラウザを見ると

ロゴの位置を一寸下げる

ロゴが真ん中によっています。一寸下へ下げたいですね。
そんなときは、ロゴクラスの中のイメージ君に一寸下がって並ぶという(属性)性質をつけます。
.logo{
    text-align: center;   
}
.logo img{
        margin-top: 5px;
}
.logo img{ ・・・・・・・ロゴクラスの中のイメージは { ここから
           スペースで開けて中の項目を指定します。
margin-top: 5px; ・・・・トップからの余白という性質(プロパティ)を:+コロン+5px(値)にする+セミコロン
} ・・・・・ } ここまで
となります。
これで、位置が少し下がれば、できあがりです。
いろいろ、CSSで飾るんだなぁと言うのが分かればOK。
覚えておいてもいいですがネットで調べれば見つかります。これであとからバックカラーを黒にすれば浮かび上がりますがそれは又後で。

できあがりはこうなります。、

飯田いいとこ
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content=",で切って、キーワードを並べる">
<meta name="description" content="ページの内容を短く書く">
<link rel="stylesheet" href="main.css">
<title>飯田いいとこ</title>
</head>
<body>
    <header>
        <div class="logo">
        <a href="index.html">
            <img src="title-logo.png" width="154" "28" alt="いいだにおいで">
        </a>
        </div>
</header> 
    <h1>飯田いいとこ</h1>
    <footer>
    </footer>
</body>
</html>
CSS(H1は黒に戻しました。)
header{
height: 65px;
width: 100%;
background-color: yellow;
}
h1{
    color: black;
}
.logo{
    text-align: center;   
}
.logo img{
        margin-top: 5px;
}
次の問題へ進む