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

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

リンクボタンの作成

完成イメージを見ると、全体を囲んでいるULタグの背景は白色になっています。そしてリンクボタンの周りには余白があります。
なのでリンボタンを作成する前に、まずはその設定を先にします。
id名「menu」のdiv内にulがありますので、下記のようにcssファイルに記述します。

backgroundで背景を白、 paddingでulの上下左右の余白を設定しています。
次はulの各項目をリンクボタンらしい外観にしていきます。
ulの項目はLIタグで囲まれています。そこでリンクボタンらしい外見にするために、まずは枠線、表示幅、行の高さを設定していきます。

「#menu li」でid名「menu」がついた要素内のliのみに記述したスタイルが適用されるようになります。 width:100%;でliの表示幅を最大にし、line-heightで行の高さ設定しています。 line-heightは2emにしましたが、お好みで高さを変更して下さい。 border-bottomでは、各項目（li）下の枠線を設定をしています。 solidで1本線、1pxで線の太さ、#ebe4daで枠線の色を指定しています。

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

これでid名「menu」が付いた要素内のa要素がブロックレベル要素となり、画像の右側のようにボタンとして表示される部分全体にリンクが設定されます。
なぜブロックレベル要素にするだけで表示領域（リンクボタンの表示領域）いっぱいにリンクが設定されたかというと、aは元々インライン要素です。インライン要素は、表示領域いっぱいには表示されませんよね。
ですがブロックレベル要素の場合は、表示領域いっぱいに表示される特徴があります。だからa要素が表示領域いっぱいに広がったわけです。

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

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

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

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

リンクボタンの装飾

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

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

aの後に「:after」と記述する事で、id名menuが付いている要素内のa要素の後に、content:;で入力した文字が表示されます。 font-familyはcontent:;で入力した文字の種類、font-sizeはcontent:;で入力した文字のサイズ、colorはcontent:;で入力した文字の色の設定となります。
これでa要素のテキストの後にcontentで入力した文字が、表示されました。ですが各項目のリンクボタン全てに、入力した文字が表示されちゃっています。
これを項目ごとにそれぞれ別の文字を表示するには、nth-childというのを使います。とりあえず何も考えずに記述してみましょう！先ほど記述したコードの下に記述して下さい。

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

なんとなくわかるかと思いますが、 :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を使ってスペースを開けます。

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

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

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

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

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

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

細かい設定

完成イメージを見てみると一番上のリンクボタンに背景、一番下のリンクボタンには枠線が設定されていません。なのでこの設定をしていきます。
先ほど実践したように、複数並んでいる項目には:nth-child()を使う事でスタイルを個別指定できますよね。ですが練習なので、ちょっと違うのを使ってみます。
項目の一番最初と最後をそれぞれ指定したい場合は:first-child、:last-childを使います。使い方は:nth-child()とほぼ同じで、指定したい項目に対して設定して下さい。例えばli:first-childとすれば、一番最初のli要素のみに、 li:last-childとすれば一番最後のli要素のみにスタイルを適用できます。
たったこれだけなので、きっと簡単ですよね！じゃさっそく記述してみましょう！

background-color（背景の色）でrgbaを指定していますが、最後の0.5はその色の透過度となります。 border-bottom（枠線）はnoneで非表示となります。
今回はfirst-child、last-childを使いましたが、最初に:nth-child()でもそれぞれの項目を設定しましたよね。なので本来であればそっちに記述しても問題ありません。コードも短くなりますし。
ただ練習用なので色々使ってみました。
リンクボタンの作り方は、大体こんな感じになるんですが、いかがでしたでしょうか？ cssの記述の仕方も色々ありますし、デザインの仕方も人それぞれだと思いますが、色々試してみて下さいね。
次回は、今回作成したリンクボタンの色の切り替え方などを紹介してきます！長々読んで頂き、ありがとうございます(^^♪