Cssで画像(アイコン付き)とテキストを縦横に並べて碁盤の目のようなメニューを作成します。
完成したメニューはこちらです。
メニュー下のエリアです。
実装の仕様
実装するにあたり、作りたい仕様を簡単に解説します。アイコンの下にまずテキストを置きます。
横に3つ、縦に3つ並べます。スマホのメニューみたいなものを作りたかったのです。
今回、Box Sizingを使うことにしました。
Box Sizingを使えば、paddindやborderを気にしなくてOKです。
アイコンはFont Awesomeを使う方法もありますが、自分で作成した画像を使いたかったため、単純に画像を使っています。
コードとコードの解説
まず、htmlコードです。アイコンの画像はhtml内で個別に変更します。
<div id="grid_menu"> <a href="#" target=”_blank”><img src="icon1.png"><br />wordpress</a> <a href="#" target=”_blank”><img src="icon2.png"><br />電子書籍</a> <a href="#" target=”_blank”><img src="icon3.png"><br />test</a> <a href="#" target=”_blank”><img src="icon4.png"><br />test</a> <a href="#" target=”_blank”><img src="icon5.png"><br />test</a> <a href="#" target=”_blank”><img src="icon6.png"><br />test</a> <a href="#" target=”_blank”><img src="icon7.png"><br />test</a> <a href="#" target=”_blank”><img src="icon8.png"><br />test</a> <a href="#" target=”_blank”><img src="icon9.png"><br />test</a> </div> <p class="break">メニュー下のエリアです。</p>
次に、cssコードです。
/* メニュー */ #grid_menu { margin:20px 0; } #grid_menu a { width:33%; padding:10px 0; background:#f2f2f2; text-align:center; float:left; box-sizing: border-box; border-top:2px solid #333; } #grid_menu a:nth-child(3n+2){ border-right:2px solid #333; border-left:2px solid #333; } #grid_menu a:nth-last-child(1) , #grid_menu a:nth-last-child(2) , #grid_menu a:nth-last-child(3){ border-bottom:2px solid #333; }
個別に解説します。
width:33%;
33%で3つに分割すると、1%の隙間ができますが、どのみち隙間ができるようなので、今回は1%は無視しました(^^;
こういうところにこだわるべきでしょ、というお話もわかるんですけどね。
まあ、余白の取り方やサイドバーに線を引いていなければわからないなど、工夫次第で問題を吸収できるかな、とか思いましたね。まあいいかなと。
text-align:center;
box-sizing:内の中央合わせを行います。
線の引き方についてです。
border-top:2px solid #333;
上部はすべて線を引いて問題ないため、普通に引きます。
左右の線を引きます。両端は線を引かないことにします。
#grid_menu a:nth-child(3n+2){ border-right:2px solid #333; border-left:2px solid #333; }
3n
だと、左から3番目のセル
3n+1
だと、左から1番目のセル
3n+2
だと、左から2番目のセル(要は中央)
今回は真ん中に線を引きたいため、3n+2になります。
この3n+2の左右に線(border)を引くことになります。
上部の線はすでに引いてあるため、次に下線を引きます。lastは後ろからです。列を追加した場合は、こちらをいじるだけです。
#grid_menu a:nth-last-child(1) , #grid_menu a:nth-last-child(2) , #grid_menu a:nth-last-child(3){ border-bottom:2px solid #333; }
今回、参考にさせていただいた、ありがたいサイトはこちらになります。
初めてスマートフォン専用ページを作成する際に知っておきたいポイント|Webpark
floatの解除を忘れずに
このメニューの下に何かを置く場合、メニューがfloatを使っているため回り込みを解除する必要があります。
/*float:left;を解除 */ .break { clear:left; }
float:left;を使っているため、clear:left;で回り込みを解除します。
ちなみに、float:left;とfloat:right;を使ったら、clear:both;になります。
図のある、わかりやすいサイトはこちらになります。
float段組の基本|floatレイアウトホームページ作成講座
Webは素人なので何か適当なところがあるかもしれませんが^^;、参考になるところがあれば幸いです。
コメント