ヘッダーとCSS

リストにリンクを張ろう

リストにはリンクがないと

飯田いいとこ←これが準備するCDDとHTML
a6i.zip へのリンク←これを解凍しても良いです。

ヘッダーの中にリストを入れましょう。
でもこのままではリストの役目を果たさない。
他のページはまだ作ってないけれど、偽リンクを張ってみよう。
HTMLを開いてリンクを書きましょう。
リンクには
<a></a>タグをつかい
プロパティにhref="index.html" と、とりあえず自分にリンクをはり、後は皆偽リンクを張っておきましょう。
なぜこんなことをするかというと、とりあえずマウスが乗ったと黄色が変わるなどの変化をつけておきたいからです。
それに、リンクを作るための練習としてやっておきましょう。
      <header>
        <div class="logo">
        <a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>
        </div>
        <div class="nav">
        <ul>      
            <li><a href="index.html">春の桜</a></li>
            <li><a href="#1">夏の山</a></li>
            <li><a href="#2">秋の祭り</a></li>                
            <li><a href="#3">冬の・・</a></li>
        </ul>
        </div>
     
すると、リンクの文字が青になって、下線が記されます。
もとからブラウザに設定されている標準リンクです。

ボクのページは、ヘッダーのバックを黒くするつもりですので、文字を白くしたい。
それから、太字にしてみましょう。

リンクの色を変える

リンク文字の色はどこで変えるのでしょう。
HTMLでしょうかCSSでしょうか。
装飾はCSSでするのがいいのですから、CSSでしてみましょう。
(HTMLでできないことはないのですが、良くない。)
CSSで、ナビクラスのナンバー無しのリスト(UL)のa(アンカー)に変更を加えます。

 .nav li a{
    color: white;    
    font-weight: 700;
    text-decoration: none;
}
 
まず 文字の色を白くします 次に、文字を太字にします。指定は100から900までで400が真ん中です、
最後に、通常のリンクに現れる、リンクの下線を消しました。
背景色を黒くしないと、文字が見えませんので、yellowにしていた色をblackにします。(上の方です)
      background-color: black; 
そしてできたのがこれ。

なんだかきりっとしすぎてるし、緑が濃くてくっきりしない。黄色の方が良かったかなぁ。
ゆっくり作り直しましょう。

マウスが乗ったら色が変わる

マウスが乗ったら変化するようにしましょう。
.nav li a:hover{
    color: white;
    border-bottom:solid;
    border-color:#FFFFFF;
    border-width:3px;
} 
1行目で、<a>タグにマウスが乗ったらどうするかを書くと宣言し
2行目で、色は白に(代えれば色が変わります。)
3行目で、下線を一本線でひょじするようにし
4行目で下線部の色を白に
#FFFFFFはwhiteと書いても同じです。16進数で表示しているのですがこれについてはまたいつか。)
5行目で下線の太さを3ピクセルにしています。

マウスが乗ったら、下線が表示されました。
飯田いいとこ
(これを開くとページが見られる。右クリックでソースを開いてソースの中のmain.cssをクリックするとCSSが見られる。コピーして使えます。CSSのフォルダが違ってますが。)
画面を小さくしたときでる3本線の表示とかもつけたいですけれど、それは又後ほど。
出来たページはこれです
飯田いいとこ

次の問題へ進む