今回はcssの疑似要素 ：beforeを使ってクリアボタンを作ってみようと思います。
HTMLはきちんと書きたいけど……なにか装飾的なものを加えたい。
そういった時に便利なのが擬似要素です。
まずは疑似要素についてですが、
疑似要素というのはcss2からついている機能で
特定のセレクタに対して、文字通り擬似的に要素を用意するというものです。
もうひとつcssには疑似クラスというのがあり、それは:hoverとかが有名でね。
これだけだととてもざっくりとした説明になってしまうんですが、このあたりの詳しい説明は
http://w3g.jp/css/guide/pseudo を参考にしてもらえればと思います。
ということで早速作っていきます。
今回作成するのはクリアボタンです。
※css3を使用しているため,ie9までが挙動対象となってますがご了承ください。
1.どの要素でどの形が出来ているのか整理してしました。
今回はボタンだけシンプルなので、
考えたところ、下の通りになっていると考えました。
イメージ図
下地になっているp要素、
文字の部分であるa要素に対して、
疑似要素で作られた透明な部分が存在していると言った感じですね。
2.それではさっそく下地部分から
ではまず、下地づくりから
●HTML
| 1 | ＜p＞＜a href=”#”＞Sample＜/a＞＜/p＞ |
HTMLはたったこれだけ。
続いてCSS
●CSS
| 1 | p{ |
| 2 | width: 200px; |
| 3 | height: 100px; |
| 4 | margin: 0 auto; |
| 5 | background: linear-gradient(to bottom, rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100%); ※ベンダープレフィックスは省略しています。 |
| 6 | font-size: 2em; |
| 7 | font-weight: bold; |
| 8 | text-align:center; |
| 9 | margin: 0 auto; |
| 10 | line-height: 100px; |
| 11 | } |
| 11 | |
| 12 | a{ |
| 13 | text-decoration: none; |
| 14 | } |
| 15 | |
| 16 | a:hover{ |
| 17 | color: #333333; |
| 18 |
} |
まずは四角を作ります。
3.続いて、疑似要素による白い半透明を作成します。
様々な疑似要素があるのですが、今回使うのは『:before』のみです。
●CSS
| 20 | p:before{ |
| 21 | content:””; |
| 22 | display:block; |
| 23 | background: linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 100%); |
| 24 | width: 170px; |
| 25 | height: 60px; |
| 26 | |
| 27 |
/*– ↓追加 –*/ |
| 28 | position: absolute; |
| 29 | left: 15px; |
| 30 | top: 5px; |
注意するポイントは
content:””と
display:blockを使用していることです。
:before,:afterには中身が無くてもcotent:””の記述が必須だということと、
display:blockを使用するのは、サイズ指定をするため。
この:before、:afterが持っているインライン、ブロックという属性部分は
その元となる要素(今回で言えばp要素)を基準にしているようです。
なので、
a要素にdisply:blockをかけても効きません。
だったら、pが元要素ならはdisplay:blockはかけてなくても良いんじゃないの？
と思われるかもしれませんが、『デフォルトではインラインだけど、
ブロック要素の:before、:afterはdisplayをかけることができて、サイズを指定できる』、と考えてもらうと分かりやすいかと思います。
そして、positon:absoluteで絶対配置にして位置を調整。
親要素は元となるpが元になるので、左上に配置されます。
あとは角丸をかけます。
| p{ | |
| 2~ | /*– 省略 –*/ |
| 11 | border-raidus: 50px; |
| } | |
| p:before{ | |
| 21~ | /*– 省略 –*/ |
| 31 | border-radisu: 25px; |
| } |
4.しかし、このままだとボタンが押せない状況が発生します。
どうやら、原因は疑似要素:afterはaよりもレイヤーが上にあるため、
アンカーを覆っているようです。
同時にこれではまだ、リンクが文字の部分しか反応しませんので、
ボタンとしてまだ未完成ですね。
なので、
display:blockを追加でエリア全体をクリックできるように
position:relativeをかけると、after要素よりも上のレイヤーになります。
border-radiusをかけないとaは四角のままになっています。
なので、下層のpと同じ形状にするために角丸をかけましょう。
ついでにマウスオンも作るために文字にhoverで光彩をかけてみます。
これで、ホバー時の演出も問題なしです。
●CSS
| 12 | a{ |
| 13 | /*– 省略 –*/ |
| 14 | display: block; |
| 15 | position: relative; |
| 16 | border-radius: 100px; |
| 17 | } |
| 18 | a:hover{ |
| 19 | text-shadow: 0px 0px 10px #FFFF00; |
| 20 | } |
ついでにbox-shadowなどを加えてみるのもありだと思います。
【注意点】
ie9はグラデーションに角丸を使うと、backgroundの四隅にborder-radiusがかからないバグがあります。
その、対策として、グラデーションをSVGで行うと、画像として、読み込むので、角丸をかけることができます。
そのSVGも出力してくれるジェネレーターを、
今回こちらの http://www.colorzilla.com/gradient-editor/ のサイトを利用させていただきました。
ie9対策もこちらのSVG出力機能を使わせていただきました。
【最後に】
ブラウザによってCSSの対応や動作の違い、対応状況がありますし、
もちろんie7,8で使用するとなれば、より対策が必要です。
使いどころは難しいですが、スマートフォンなどでページを軽くしたい場合には使えるかとは思います。角丸や、影、さらには変形を使ったりすれば、演出の幅は広がっていきますね。
この記事が皆様のWeb制作にお力添えできますように。
