おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

リンクの設定とナビゲーションメニューを設置しよう -『HTML5&CSS3レッスンブック』第4章

ショーウィンドウのドレス

www.okigaru-migaru.net

HTML5とCSS3の学習を進めましょう。前回は画像の表示について学びました。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック』も第4章。7章立てなのでちょうど中間地点です。意外とサクサク来ましたね。

第4章ではリンクの設定とナビゲーションメニューの設置を学びます。

リンクの設定とナビゲーションメニューを設置

今回はヘッダーとフッター部分にコードを書き加える形で、主にnews01.htmlを使って学習しました。

よって今回もnews01.htmlのHTMLソースと、CSSの変更点のみ掲載しております。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>真夏のひまわり畑 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>

<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about.html">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>

<article>
<h1>真夏のひまわり畑</h1>

<p>森の工房の隣りにある畑は、毎年夏になると満開の<a href="https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%9E%E3%83%AF%E3%83%AA">ひまわり</a>の花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>

<figure class="photo-center">
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
<figcaption>夏のひまわり畑</figcaption>
</figure>

<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>

<aside>
<h1>RELATED POSTS</h1>
<ul>
<li><a href="news02.html">新緑の森を散策</a></li>
<li><a href="news03.html">雪を楽しむ</a></li>
</ul>
</aside>
</article>

<footer>
<small>Copylight &copy; FOREST STUDIO, all rights reserved.</small>
</footer>

</body>
</html>

関連情報はasideタグで

asideタグを使うことで補足・関連情報をマークアップできます。

ここでは関連記事へのリンクをマークアップしていますね。

ナビゲーションメニューはnavタグで

ナビゲーションメニューは、サイト内の主要ページにアクセスできるようにするものです。

リンクをリスト形式で貼ってnavタグでマークアップします。

そういえばやっぱりトップのリンクは必要なんですね。

CSS

/* ヘッダー */
header h1 a {
    text-decoration: none;
    color: #000000;
}

header h1 a:hover {
    color: #000000;
}

header h1 img {
    vertical-align: -10px;
    margin-right: 5px;
}

/* リンク */
a {
    color: #b77d3c;
}

a:hover {
    color: #ff8800;
}

a img {
    border: none;
}

/* 関連記事へのリンク */
aside {
    border: solid 2px #d6c588;
    border-radius: 5px;
    padding: 10px;
    background-color: #edede3;
    margin-top: 40px;
}

aside h1 {
    font-family: 'Chango', cursive;
    font-size: 18px;
    color: #c39f4a;
    border-bottom: dotted 1px #c39f4a;
}

aside ul {
    list-style-image: url(listmark.png);
}

aside a {
    color: #000000;
    text-decoration: none;
}

/* ナビゲーションメニュー */
nav ul {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    font-size: 0;
}

nav li {
    display: inline;
    font-size: 12px;
    border-right: solid 1px #aaaaaa;
    padding-left: 10px;
    padding-right: 10px;
}

nav li:first-child {
    border-left: solid 1px #aaaaaa;
}

nav {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    margin-top: -27px;
    margin-bottom: 10px;
}

nav a {
    color: #000000;
    text-decoration: none;
}

リストマークを削除する

リストマークを削除する場合は、ulセレクタのlist-styleプロパティの値をnoneにします。

リストを横に並べる

ナビゲーションメニューのリストを横に並べるにはdisplayプロパティの値をinlineにします。インラインボックスと言います。

この設定にすることで中身に合わせた横幅で表示されるようになり、前後に改行が入らないので1行につなげて表示されます。

一方で値をlist-itemにするとリストボックス形式になりますが、これはインラインボックスと比べて使う場面が限られそうです。

リンクの間の余計な余白を削除する

liタグでリストをコーディングした時、1リンクごとに改行すると改行の分スペースが挿入されます。

これが縦に並んだリストだと気にならないのですが、インラインボックスで横に並べると余白が邪魔になります。

この余白を削除するためのプロパティは存在しないのですが、ulセレクタのfont-sizeプロパティの値を0にすると余白を消せます。

つまりは改行による空白は存在しているものの、文字サイズを0にすることで見えなくするというものです。結構裏技というか応用的な方法ですね。地味ですが目からウロコでした。

コーディングの際に改行を無くせば事足りますが、あとから編集するのが大変ですからね。「もうこれで変えない!」というならば圧縮してしまっても良いかもしれませんが。

リンクの下線を削除する

リンクの下線を削除するにはaセレクタのtext-decorationプロパティの値をnoneにします。

記事中のリンクは下線があった方がいいのですが、ヘッダーのメニューなどは無くてもリンクとわかりますしデザイン的に余計な時がありますからね。

画像周りの罫線を削除する

画像にリンクを貼った場合、画像が罫線で囲まれます。

これはIEのみの仕様ですので、普段別のブラウザを使っている人は見落としがちですね。忘れずにやっておきましょう。

a imgセレクタのborderプロパティをnoneにしましょう。

次回はインデックスページを作成します

次はインデックスページを作成していきます。ここまでは個別ページのみでしたからね。