ヘッダーとCSS

リストにリンクを張ろう

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

飯田いいとこ←これが準備するCDDとHTML
このページへ行ってページを保存すれば準備完了です。
a6i.zip へのリンク←これを解凍しても良いです。

ヘッダーの中にリストを入れましょう。

このままではだだのリストでしかない。
リストをクリックしたら、他のページへ飛ぶようにしたい。
他のページはまだ作ってないけれど、偽リンクを張ってみよう。
HTMLを開いてリンクを書きましょう。
リンクには
<a></a>タグをつかい
プロパティにhref="index.html" と、とりあえず自分にリンクをはり、後は皆偽リンクを張っておきましょう。
なぜこんなことをするかというと、とりあえずマウスが乗ったと黄色が変わるなどの変化をつけておきたいからです。
それに、リンクを作るための練習としてやっておきましょう。
一つ角とこんなふうになります。

	アンカー開始	サイトアドレス		文字等	アンカー終了
<li>	<a	href="index.html"	>	春の桜	</a>	</li>

（下のリストの部分をコピー＆ペーストしてもいいです。）

 $<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（アンカー）に変更を加えます。
こんな感じです。

ドットはHTMLに書いたクラスをさす	ナビクラス	リスト	アンカー	ここから
.	nav	li	a	{

実際には下のようにします。

 $.nav li a{
    color: white;    
    font-weight: 700;
    text-decoration: none;
}$

文字の色を白くします

形を整えるための字下げ	色	コロン		白	セミコロン
	coler	：		white	；

文字を太くします。
筋で指定し、100から900までで400が真ん中です。

形を整えるための字下げ	文字-太さ	コロン		太さ	セミコロン
	font-weight	：		700	；

最後に、通常のリンクに現れる、リンクの下線を消しました。

形を整えるための字下げ	文字-下線	コロン		なし	セミコロン
	font-swcoration	：		none	；

強いて覚えなくていい。必要なのは、
まず色などの指定があり、コロンがあり、設定値があり、セミコロンで終わる
コロンとセミコロンをまちがえないように、
こんなふうにすると、cssでいろいろ指定ができることがわかれば良いです。

で，こうすると文字が消えます。
背景色を黒くしないと、文字が見えませんので、yellowにしていた色をblackにします。（上の方です）

 $background-color: black;$

そしてできたのがこれ。

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

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

マウスが乗ったら変化するようにしましょう。
これもcssへコピペしてください。
どこでも良いですが、.nav がつながっているをわかりやすいですね。
わかりやすいように工夫してください。

クラス	ナビ	リスト	アンカー	コロン	マウスがのったら	ここから
.	nav	li	a	:	hover	{

 $.nav li a:hover{
    color: white;
    border-bottom:solid;
    border-color:#FFFFFF;
    border-width:3px;
}$

1行目で、<a>タグにマウスが乗ったらどうするかを書くと宣言し
2行目で、色は白に（代えれば色が変わります。）
3行目で、下線を一本線でひょじするようにし
４行目で下線部の色を白に
（#FFFFFFはwhiteと書いても同じです。16進数で表示しているのですがこれについてはまたいつか。）
５行目で下線の太さを３ピクセルにしています。

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

ついでに

クラス	ナビ	リスト	アンカー	コロン	マウスがのったら	ここから
.	nav	li	a	:	hover	{
とかかずに
			a	:	hover	{

とすると。クラスを指定してないので
ページ全体のアンカータブの部分、つまりリンクが変更されます。
ページ全体を変えるときはクラスを指定しません。
（両方あるとクラス内はクラス指定内容のの方が優先されます）

次の問題へ進む