ロゴ画像＆サイト名にリンクを挿入！各ページのヘッダーを共通にする
今回やったことはサイトタイトル通りのことです。前回勉強したdisplay要素と疑似要素が強すぎて、今回はとても楽勝に感じましたね。
ロゴ画像＆サイト名にリンクを挿入
以下、今回の記述です。
header h1 a{
text-decoration: none;
color: #000000;
}
a img {
border: none;
}
header h1 a:hover {
color: #000000;
}
HTML
<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>
まず、text-decoration: noneで下線を消しました。これはaタグのデフォルトシートで下線が入るようになっているので、それを打ち消す意味があります。colorを#000000で真っ黒にしたのは、これもデフォルトで茶色になる指定があるのを打ち消す意味があります。
header h1 a:hoverは、headerにホバーしたときの色を指定しています。これもオレンジ色に変更するように指定してありますので、それを打ち消す意味で真っ黒になるように指定しています。
a imgにborder: none;と記述しているのは、インターネットエクスプローラーだとロゴの回りに黒い罫線が表示されるそうなので、それを消すためにnoneと指定しています。ちなみに僕はChromeを使用していますが、この罫線は表示されませんでした。
各ページのヘッダーの統一
ここまで完成させたら、今回のHTMLタグをコピーして、【news02】【news03】のヘッダー部分にコピペします。そうすることによって、各ページのヘッダーが統一されます。
まとめ
今回勉強したことは本当に簡単でした。後半部分に至ってはコピペしただけなので、楽勝すぎます。ただ、前回みたいにいきなり難しい記述も挟まることもあるので、今回は箸休め的な意味があったと思い、油断せずがんばっていこうと思います。
以下今回のBeforeAfterです。
1
2
3
4
1と2はリンクが挿入されただけなので、表面上は変化はありません。3と4は以前ヘッダー部分の装飾されていませんでしたが、今回から装飾され、各ページのヘッダーが共通になっているのがわかると思います。
引き続き勉強していきます。
