テーブルを使わずにCSSでタイル風メニューを作る方法
CSSでタイル風メニューを作る
今回はテーブルを使わずにタイル風のメニューを作る方法を説明します。
＜手順説明＞
まず最初にメニューの数だけ <div></div> タグを用意し、その中にメニューに使う文字列を入力します。
Htmlソースコード
<div>Google</div>
<div>MSN</div>
<div>Yahoo</div>
<div>Apple</div>
<div>Microsoft</div>
<div>Japan</div>
<div>Lenovo</div>
結果表示
次に、各メニューの背景に色を付けますが、メニューごとに違った背景色にするには各 <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;
}
結果表示
次に、このままではちょっと文字が見ずらいので、文字を太文字にして色を白くしてみましょう。それと、文字が左寄せになっているので、これを中央寄せにしてより見やすくしようと思います。
このように、いくつかの要素をまとめて同じスタイルにする場合は、それぞれの要素に同一の 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;
}
背景に色が付いて文字も白く見やすくなりましたので、今度はそれぞれの文字と背景のバーの部分にリンクを張ろうと思います。
リンクは普通に文字を <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
