JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

テーブルを使わずにCSSでタイル式メニューを作る方法

まず最初に、<div> タグの中にリンクに使う文字を必要な数だけ続けて入力します。

Htmlソースコード

<div>Google</div>
<div>MSN</div>
<div>Yahoo</div>
<div>Apple</div>
<div>Microsoft</div>
<div>Japan</div>
<div>Lenovo</div>

結果表示

MSN
Yahoo
Japan

このままではあまりにも味気ないので、今度は背景に色を付けてみましょう。各メニューごとに違ったスタイルをもたせるには、各 <div> 要素に別々の id を指定します。今回はそれぞれの <div> タグに a1~a7の id を付けて、CSS でそれぞれ違う背景色を付けました。

Htmlソースコード 

<div id="a1">Google</div>
<div id="a2">MSN</div>
<div id="a3">Yahoo</div>
<div id="a4">Apple</div>
<div id="a5">Microsoft</div>
<div id="a6">Japan</div>
<div id="a7">Lenovo</div> 

CSS 

#a1 {
 background-color: #090;
}
#a2 {
 background-color: #06C;
}
#a3 {
 background-color: #C3C;
}
#a4 {
 background-color: #FC0;
}
#a5 {
 background-color: #F00;
}
#a6 {
 background-color: #0CF;
}
#a7 {
 background-color: #63F;

結果表示 

MSN
Yahoo
Japan

このままではちょっと文字が見ずらいので、文字を太文字にして色を白くしてみましょう。それと、文字が左寄せになっているので、これを中央寄せにしてより見やすくしようと思います。

このように、いくつかの要素をまとめて同じスタイルにする場合は、それぞれの要素に同一の class 名(今回は mn というクラス名)を付けて、ひとつのクラスで複数の要素のスタイルを設定します。 

Htmlソースコード

<div class="mn" id="a1">Google</div>
<div class="mn" id="a2">MSN</div>
<div class="mn" id="a3">Yahoo</div>
<div class="mn" id="a4">Apple</div>
<div class="mn" id="a5">Microsoft</div>
<div class="mn" id="a6">Japan</div>
<div class="mn" id="a7">Lenovo</div>

CSS

.mn {
 height: 30px;
 text-align: center;
 font-size: 18px;
 font-weight: bold;
 color: #FFF;

MSN
Yahoo
Japan

背景に色が付いて文字も白く見やすくなりましたので、今度はそれぞれの文字と背景のバーの部分にリンクを張ろうと思います。

リンクは普通に文字を <a> タグで囲むだけですが、そのままでは文字の部分にしかクリックに反応しなくなるので、色の付いたバーの中の <a> タグをスタイルシートで「ブロック要素」に拡張する必要があります。

また、ブログサービスなどを利用した場合に、環境によってはマウスポインターをリンク上にもってくると文字の下に下線がでたり、リンクの文字に別の色が付いたりする場合があるので「text-decoration: none;」「color: #FFF;」で強制的にその部分の <a> タグのスタイルを変更する必要があります。

Htmlソースコード

<div class="mn" id="a1">
<a href="http://google.co.jp" target="_blank">Google</a>
</div>
<div class="mn" id="a2">
<a href="http://www.msn.com/ja-jp" target="_blank">MSN</a>
</div>
<div class="mn" id="a3">
<a href="http://www.yahoo.co.jp" target="_blank">Yahoo</a>
</div>
<div class="mn" id="a4">
<a href="https://www.apple.com/jp/" target="_blank">Apple</a>
</div>
<div class="mn" id="a5">
<a href="https://www.microsoft.com/ja-jp/" target="_blank">Microsoft</a>
</div>
<div class="mn" id="a6">
<a href="http://dell.co.jp" target="_blank">Dell</a>
</div>
<div class="mn" id="a7">
<a href="http://www3.lenovo.com/jp/ja" target="_blank">Lenovo</a>
</div>

CSS 

.mn a {
 display: block;
 color: #FFF;
 text-decoration: none;
}

結果表示

これで、文字色が白くなり <a> タグの範囲がその外側の <div> タグの大きさに広がり、色が付いたバー全体がリンクのクリックに反応するようになりました。

 

END