こんにちは、工藤です。
今回は個人的に知っておくと便利だなと思うcssの小技をご紹介します。
目次
ブロック要素（div等）全体にリンクを付ける
DEMO
div等のブロック要素全体にリンクさせたい…なんてことありますよね。
HTML5やjsで解決出来る場合もありますが、そうはいかないなんて時もありますので…自分はよくこの方法に頼ることが多いです。
HTML
|
1 2 3 4 5 |
<div class="box"> <p>テキストだけじゃなくdiv全部にリンクさせる</p> <a href="#" target="_blank"></a> </div> <!--//.box--> |
とりあえずHTMLの記述です。
全体リンクにするaタグを空で置いています。
もし空で置くのが気になるようでしたら中にテキストを置いて、cssで『text-indent:-9999px;』を指定しておいてもよいと思います。（あまりSEO的にはよくなさそうですが…）
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.box{ position:relative; display:block; font-size:13px; width:200px; height:200px; background:#99CC33; color:#FFF; vertical-align:middle; text-align:center; padding:20px; } .box a{ position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .box a:hover{ background:rgba(255,255,255,0.5); } |
ハイライトを付けた箇所が大事な箇所になります。
ブロック要素（今回は.box）にposition:relative;で相対位置の指定をします。
リンク要素（今回は.box a）にposition:absolute;で絶対位置の指定をします。
topとleftもきちんと『0』の指定をしてください。
widthとheightはブロック要素いっぱいになるように『100%』の指定をします。
これでブロック要素全体にリンクが貼られます。
DEMO
hoverの指定はお好みに合わせて調整をどうぞ。
横幅可変のページのページャーを中央寄せにする
DEMO
widthが決まっていればmargin:0 auto;で中央寄せにできるのですが、レスポンシブにした時などは難しくなってしまうと思います。
そんな時に使える方法です。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="pagerArea"> <ul class="pagerList"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <!--//.pagerList--> </div> <!--//.pagerArea--> |
ページャーにするリスト（今回はul.pagerList）をdiv等（今回は.pagerArea）で囲むのがポイントです。
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.pagerArea{ text-align:center; } .pagerArea ul.pagerList{ font-size:0; } .pagerArea ul.pagerList li{ display:inline-block; font-size:13px; margin:0 0.5em 0.5em 0; } .pagerArea ul.pagerList li:last-child{ margin-right:none; } .pagerArea ul.pagerList li a{ display:block; color:#FFF; background:#99CC33; text-decoration:none; padding:0.5em 0.7em; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .pagerArea ul.pagerList li a:hover{ background:#CCC; } |
ハイライトを付けた箇所が大事な箇所になります。
.pagerAreaにまず『text-align:center;』を記述します。
これで要素を中央寄せにする下準備ができました。
ul.pagerListのliには『display:inline-block;』を指定。
これが横並びかつ中央寄せのための大事な要素になります。
つまるところ子要素にdisplay:inline-block;を使っておけば親要素に指定したtext-alignを再現してくれます。便利です。
ちなみに.pagerArea ul.pagerListに『font-size:0;』を指定しているのは『display:inline-block;』で横並びにした時に発生する隙間をなくすためです。
親要素に『font-size:0;』を指定、子要素に改めてフォントサイズを指定すると、改行の影響が解消されて隙間がなくなるんです。
なので、子要素である『.pagerArea ul.pagerList li』にはフォントサイズ（今回はfont-size:13px;）を忘れず指定してあげましょう。
その後はaタグを装飾してあげると完成です。
DEMO
ちなみに…
上記で紹介した方法だと2行になった時などはli自体が中央に寄るので下の画像のようになります。
これを下の画像のように全体は中央寄せかつliは左揃えにしたい…という場合はcssの記述を下記のようにします。
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.pagerArea{ text-align:center; } .pagerArea ul.pagerList{ display:inline-block; overflow:hidden; } .pagerArea ul.pagerList li{ float:left; margin:0 0.5em 0.5em 0; } .pagerArea ul.pagerList li:last-child{ margin-right:none; } .pagerArea ul.pagerList li a{ display:block; color:#FFF; background:#99CC33; text-decoration:none; padding:0.5em 0.7em; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .pagerArea ul.pagerList li a:hover{ background:#CCC; } |
liではなく.pagerArea ul.pagerListに『display:inline-block;』を指定しました。
.pagerArea ul.pagerList liは『float:left;』を指定しています。
floatの解除はclearfixやoverflow:hidden;等その時に応じて使用してください。
上記の物よりもfont-size:0;の指定などがない分単純なコードになりました。
DEMO
どこかの機会にまた他の方法もご紹介できればと思います。
それでは、今回はこのあたりで。
