リンクの設定

リンクのデザイン方法を理解することで、グローバルナビ・サイドメニューなどの細かいデザインの設計が可能となります。

本記事では、リンクの色などといった細かいデザインの設定方法をわかりやすく紹介します。

そして、最後にグローバルナビのつくりかたを紹介します。

 

リンクの色を変更する

リンクの色を設定する際は

a{color:#ff0000;}

のように設定します。

この設定により、リンクの文字色が赤色(#ff0000)になります。

カーソルをのせた時の色を設定する

カーソルをのせたときの設定は

a:hover{color:#0000ff;}

のようにhoverをつけることで設定します。

この場合、カーソルをのせると青色にリンクがかわります。

このhoverのようなものを「擬似クラス」と読んでいます。

擬似クラスを以下にまとめておきます。

  1. a:すべてのリンク
  2. a:link:未訪問のリンク
  3. a:hover:カーソルをのせたとき
  4. a:active:リンクをクリックしているとき
  5. a:visited:訪問済みのリンク
  6. a:focus:リンクにフォーカスしているとき

グローバルナビをつくってみる

では、グローバルナビをつくってみましょう。

まず、HTMLファイルを以下のようにつくります。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>サンプル</title>
</head>
<body>
<nav>
<ul>
	<li><a href="#1">メニュー1</a></li>
	<li><a href="#2">メニュー2</a></li>
	<li><a href="#3">メニュー3</a></li>
	<li><a href="#4">メニュー4</a></li>
</ul>
</nav>
</body>
</html>

そしてブラウザで見ると以下のようになります。

 

サンプル

上下の線と印の削除

では、グローバルナビの上下に線を追加と黒丸をなくしてみます。

スタイルシートを以下のようにしてください。

【style.css】

nav{
	border-bottom:solid #333 1px;
	border-top:solid #333 1px;
}

nav ul li{
	list-style:none;
}

これで、

 

サンプル

のように上下に1pxの線がはいり、黒丸がなくなります。

余白の削除

続いて、上下の余白をなくします。この余白はul要素による余白なのでstyle.cssを

nav{
	border-bottom:solid #333 1px;
	border-top:solid #333 1px;
}

nav ul{
	margin: 0;
	padding: 0;
}

nav ul li{
	list-style:none;
}

としてやります。すると

サンプル

のように余白がなくなります。

横並びにする

いまの状態では縦並びなので横並びにします。

そのためには、

nav{
	border-bottom:solid #333 1px;
	border-top:solid #333 1px;
}

nav ul{
	margin: 0;
	padding: 0;
}

nav ul:after{
	content:"";
	clear:both;
	display:block;
}

nav ul li{
	list-style:none;
	width:100px;
	float:left;
}

とします。メニューの幅は100pxで左寄せにしています。このにより

サンプル

と表示されます。ul:afterを導入したのは、float:leftを解除するためです。content:””でインライン要素をulの最後にいれて、この空白要素のfloatをクリアすることで実現しています。

この操作をしないと

 

サンプル

 

のようにliが浮いているので、下のラインが上にいってしましまいます。

横線を追加する

次に、横線を追加します。

nav{
	border-bottom:solid #333 1px;
	border-top:solid #333 1px;
}

nav ul{
	margin: 0;
	padding: 0;
}

nav ul:after{
	content:"";
	clear:both;
	display:block;
}

nav ul li{
	list-style:none;
	width:100px;
	float:left;
	border-left:solid 1px #333;
	padding: 5px 10px;
}

nav ul li:first-child{
	border-left:none;
}

ここで、paddingで上下に5px、左右に10pxのスペースを開けています。

また、first-child設定ではじめのli要素だけ左線を消しています。

 

first-childの他にも

  1. :last-child:最後の要素
  2. :nth-child(n):最初からn番目の要素
  3. :nth-last-child(n):最後からn番目の要素

などがあります。偶数番目や奇数番目の場合は

  1. :nth-child(even):偶数
  2. :nth-child(odd):奇数

と記述できます。

 

すると

サンプル

のように表示されます。前のとくらべてみるとpaddingの分だけふくれているのがわかります。

そこで、

nav ul li{
	list-style:none;
	width:100px;
	float:left;
	border-left:solid 1px #333;
	padding: 5px 10px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

のようにbox-sizingの指定を変えてやります。

border-boxになっているので、borderを含むところまでがwidthやheightへ設定されました。

幅が決まっているサイトの場合は、border-boxを使うと設定が簡単にできて便利です。

(もちろん、paddingとwidthを計算してやっても大丈夫です。)

-moz-はFirefox用のものです。

 

box-sizingではwidthやheightをどのように定義するかを決めることができます。

(1)box-sizing:content-box;

  この設定は通常の状態です。要素の幅と高さがそれぞれwidthとheightとなります。

  contentbox

(2)

  この場合は、borderの幅と高さがそれぞれwidthとheightとなります。

  border-box

 

表示すると

サンプル

となります。横幅がもとに戻ったことがわかります。

フォントの設定

表示されるフォントの設定をします。

nav ul li{
	list-style:none;
	width:100px;
	float:left;
	border-left:solid 1px #333;
	padding: 5px 10px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	text-align:center;
	font-size: 16px;
	line-height:1.5;
}

と追加しましょう。

  1. text-alignで中央寄せに
  2. font-sizeでフォントのサイズ
  3. line-heightで改行した時の行間

をそれぞれ設定しています。

リンクの設定

では本題のリンクの設定方法を紹介します。

nav ul li a{
	color:inherit;
	text-decoration:none;
}

nav ul li a:hover{
	background-color:#FFC;
}

と追加します。すると

スクリーンショット_2014-05-31_9_56_17

のようになります。テキストの色はcolor:inherit;により親要素を引き継いでいます。

そして、text-decoration:none;により下線を取り払います。

最後に、hoverの設定でテキストを選択した際の背景色を決定しています。

リスト全体を選択できるようにする

いまのままでは、テキスト上でしクリックした場合しか、リンクを押せません。

この領域を広げるには、

  1. 要素をインラインからブロック要素へ変える
  2. paddingで領域を広げる

という操作が必要です。

具体的には

nav ul li a{
	color:inherit;
	text-decoration:none;
	display:block;
	padding: 10px 0;
}

とします。これにより

スクリーンショット_2014-05-31_10_01_37

と表示されます。これで完成です。

最終的なコード

以上のcssコードをまとめたものを示します。

【style.css】

nav{
	border-bottom:solid #333 1px;
	border-top:solid #333 1px;
}

nav ul{
	margin: 0;
	padding: 0;
}

nav ul:after{
	content:"";
	clear:both;
	display:block;
}

nav ul li{
	list-style:none;
	width:100px;
	float:left;
	border-left:solid 1px #333;
	padding: 5px 10px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	text-align:center;
	font-size: 16px;
	line-height:1.5;
}

nav ul li:first-child{
	border-left:none;
}

nav ul li a{
	color:inherit;
	text-decoration:none;
	display:block;
	padding: 10px 0;
}

nav ul li a:hover{
	background-color:#FFC;
}

グローバルナビを作る際の参考にしてみてください。

著者:安井 真人(やすい まさと)