リンクボタンを作ってみよう!

このページはULを使ってナビゲーションメニューを作ってみようの続きです。

前回はULタグ(箇条書き)を使って、ナビゲーションメニューを作っていきました。 今回はそこの各項目に枠線や表示サイズの設定などをして、リンクボタンを作成していきます。

目次
リンクボタンの作成
細かい設定

リンクボタンの作成

リンクボタン完成イメージ
<div id="menu">
<ul>
   <li><a href="sample.html">ホーム</a></li>
   <li><a href="sample1.html">遊び</a></li>
   <li><a href="sample2.html">仕事</a></li>
   <li><a href="sample3.html">パソコン</a></li>
   <li><a href="sample4.html">アフィリエイト</a></li>
 </ul>
</div>

完成イメージを見ると、全体を囲んでいるULタグの背景は白色になっています。 そしてリンクボタンの周りには余白があります。 なのでリンボタンを作成する前に、まずはその設定を先にします。

id名「menu」のdiv内にulがありますので、下記のようにcssファイルに記述します。

#menu ul{
}

これでid名「menu」が付いている要素内のULにのみ記述したCSSが適用されるようになります。

#menu ul{
  background:#fff;
  padding:10px;
}
表示例

ULを使ってナビゲーションメニューを作ってみようで記述したcssルールと被ってますが、前回記述してもらったものの下に書いてもらえれば、cssは上書きされます。

backgroundで背景を白、paddingでulの上下左右の余白を設定しています。

次はulの各項目をリンクボタンらしい外観にしていきます。

ulの項目はLIタグで囲まれています。 そこでリンクボタンらしい外見にするために、まずは枠線、表示幅、行の高さを設定していきます。

#menu li{
  width:100%;
  line-height:2em;
  border-bottom: 1px solid #ebe4da;
}
表示例

「#menu li」でid名「menu」がついた要素内のliのみに記述したスタイルが適用されるようになります。 width:100%;でliの表示幅を最大にし、line-heightで行の高さ設定しています。 line-heightは2emにしましたが、お好みで高さを変更して下さい。

border-bottomでは、各項目(li)下の枠線を設定をしています。 solidで1本線、1pxで線の太さ、#ebe4daで枠線の色を指定しています。

リンクボタンのスタイルを設定

リンクボタンのスタイルを変更

ナビゲーションメニューの項目がリンクボタンのように表示されるようになりましたが、機能としてはまだ不十分ですよね。 例えば上記画像のように、現在はリンク部分(上記画像の赤背景を付けた所)をクリックしないと目的ページへ移動できません。 横の空白の部分も含めて、ボタン全体にリンクを設定したい所ですよね。

画像の右側のようにリンクボタンが表示されている領域全体にリンクを設定するには、各項目のa要素ブロックレベル要素にする必要があります。

ブロックレベル要素にするにはdisplayプロパティを使用します。 細かい事は置いといて、とりあえず書いてみましょう!

#menu a{
  display:block;
}

これでid名「menu」が付いた要素内のa要素がブロックレベル要素となり、画像の右側のようにボタンとして表示される部分全体にリンクが設定されます。

なぜブロックレベル要素にするだけで表示領域(リンクボタンの表示領域)いっぱいにリンクが設定されたかというと、aは元々インライン要素です。 インライン要素は、表示領域いっぱいには表示されませんよね。 ですがブロックレベル要素の場合は、表示領域いっぱいに表示される特徴があります。 だからa要素が表示領域いっぱいに広がったわけです。

文字色を変更してアンダーラインを消す

a要素を使ってリンクを設定すると、テキストが青色で表示され、アンダーラインが付きます。 これを消すにはtext-decorationプロパティを使います。 noneと記述するだけで、アンダーラインが消せます

そしてリンクの文字色を変更するにはa要素にcolorプロパティを使います。 ココで注意してもらいたいのは、リンクの文字色はa要素に対してcolorプロパティを使用しないと、文字色は変わらないっていう点です。

例えば各項目のli要素に「color:red;」というように指定しても、a要素の文字色は変わりません。 説明するとちょっと長くなるので省略しますが、とりあえずリンクの文字色を変えたい時は「a要素に対して指定する」と覚えておいてもらえれば大丈夫です。

それではさっそく記述してみましょう。

#menu a{
  display:block;
  text-decoration:none;
  color:#463a1c;
}
下線が消えてボタン全体にリンクが設定された(表示例)

リンクボタンの装飾

リンクボタン完成イメージ

次はリンクボタンを装飾していきます。 完成イメージを見ると各項目にローマ字で色々装飾してありますよね。

こんな感じにするには、疑似要素のafterやbeforeを使います。 もちろん疑似要素を使わずに、リンクボタン内にローマ字で色々入力していっても大丈夫です。 ですがそれだと、seoに悪影響がある可能性があります。 なのでここでは、疑似要素を使った方法を紹介していきますね。

※疑似要素のafter・beforeについて詳しくは疑似要素「before」「after」の使い方をご覧ください。

まずはリンクボタンのa要素にafterを設定し、表示する文字、文字の種類、サイズ、色を設定します。

#menu a:after{
  content:"HOME";
  font-family: 'Mv Boli', cursive;
  font-size:0.8em;
  color: #cbbe9c;
}
表示例

aの後に「:after」と記述する事で、id名menuが付いている要素内のa要素の後に、content:;で入力した文字が表示されます。 font-familyはcontent:;で入力した文字の種類、font-sizeはcontent:;で入力した文字のサイズ、colorはcontent:;で入力した文字の色の設定となります。

これでa要素のテキストの後にcontentで入力した文字が、表示されました。 ですが各項目のリンクボタン全てに、入力した文字が表示されちゃっています。

これを項目ごとにそれぞれ別の文字を表示するには、nth-childというのを使います。 とりあえず何も考えずに記述してみましょう! 先ほど記述したコードの下に記述して下さい。

#menu li:nth-child(2) a:after{
  content:"ENJOY";
}
#menu li:nth-child(3) a:after{
  content:"BUSINESS";
}
#menu li:nth-child(4) a:after{
  content:"COMPUTER";
}
#menu li:nth-child(5) a:after{
  content:"AFFILIATE";
}
表示例

これで各項目ごとに違う文字が表示されるようになります。

なんとなくわかるかと思いますが、:nth-child()の部分で順番を指定しています。 例えば「#menu li:nth-child(2) a:after」であれば、id名「menu」が付いた要素内の2番目のli要素内のa:afterに対しての設定。 「#menu li:nth-child(3) a:after」であれば3番目のli要素内のa:afterに対しての設定となります。

なので〇〇番目の要素に対して何かを設定したい場合は、:nth-child()を使います。 ()内の数字を変えるだけで、〇〇番目の要素に対して指定できるようになるので、とりあえずこういうものだと思って使ってみて下さい。

位置の変更

装飾用の文字は表示できましたが、今のままでは位置が微妙ですよね。 なので次は位置を変更していきます。

リンクボタン(a要素)のテキストの下に先ほど表示したい文字を移動させたい所ですが、スペースがありません。 なのでpaddingを使ってスペースを開けます。

#menu a{
  display:block;
  text-decoration:none;
  color:#463a1c;
  padding:6px 5px 20px;
}
表示例

a要素に対してpaddingを使ったので、リンクボタンの表示領域いっぱいにリンクも設定されています。 ここでli要素に対してpaddingを指定すると、見た目は同じでもリンクの範囲が変わっちゃうので注意して下さいね。

さてスペースも空いたので、次はpositionを使ってafterで表示させた装飾用の文字を移動させます。

※positionの詳しい使い方はpositionプロパティの「relative」「absolute」の使い方をご覧ください。

まずは移動するための基準位置を設定するために、a要素にposition:relative;を設定します。 こうする事で各項目のa要素を基準にして、afterで表示させた装飾用の文字の位置を変更することができます。

#menu a{
  display:block;
  text-decoration:none;
  color:#463a1c;
  padding:6px 5px 20px;
  position:relative;
}

これでa要素が基準となりましたが、まだ表示上の変化はありません afterの部分を移動させるためには、さらにafterの部分にposition:absolute;を設定し、top、left、rightなどで位置を決めます。 この時、移動距離の基準となるのが先ほどrelativeを設定したa要素となります。

例えばtop:10px;と指定すれば「a要素の上から10pxの位置にafterの部分が移動」というように基準位置からの移動距離を指定できるわけです。 とりあえず難しく考えないで、まずは記述してみましょう。

#menu a:after{
  content:"HOME";
  font-family: 'Mv Boli', cursive;
  font-size:0.8em;
  color: #cbbe9c;
  position:absolute;
  bottom:0;
  left:5px;
}
表示例

これでafter部分の位置がa要素を基準として左から5px、下に0の位置に移動しました。 なんとなくわかったかと思うのですが、基準位置(relativeなど)を設定しないと画面の左上が基準となってしまうので、そこだけは注意して下さいね。

細かい設定

完成イメージ

完成イメージを見てみると一番上のリンクボタンに背景、一番下のリンクボタンには枠線が設定されていません。 なのでこの設定をしていきます。

先ほど実践したように、複数並んでいる項目には:nth-child()を使う事でスタイルを個別指定できますよね。 ですが練習なので、ちょっと違うのを使ってみます

項目の一番最初と最後をそれぞれ指定したい場合は:first-child、:last-childを使います。 使い方は:nth-child()とほぼ同じで、指定したい項目に対して設定して下さい。 例えばli:first-childとすれば、一番最初のli要素のみに、li:last-childとすれば一番最後のli要素のみにスタイルを適用できます。

たったこれだけなので、きっと簡単ですよね! じゃさっそく記述してみましょう!

#menu li:first-child{
  background-color: rgba(243,241,233,0.5);
}
#menu li:last-child{
  border-bottom:none;
}
表示例

background-color(背景の色)でrgbaを指定していますが、最後の0.5はその色の透過度となります。 border-bottom(枠線)はnoneで非表示となります。

今回はfirst-child、last-childを使いましたが、最初に:nth-child()でもそれぞれの項目を設定しましたよね。 なので本来であればそっちに記述しても問題ありません。 コードも短くなりますし。

ただ練習用なので色々使ってみました。

リンクボタンの作り方は、大体こんな感じになるんですが、いかがでしたでしょうか? cssの記述の仕方も色々ありますし、デザインの仕方も人それぞれだと思いますが、色々試してみて下さいね。

次回は、今回作成したリンクボタンの色の切り替え方などを紹介してきます! 長々読んで頂き、ありがとうございます(^^♪