記事の詳細
グラデーションの見出しを疑似クラスと疑似要素で装飾する!
こんにちわ!木曜担当の吉見です。
みなさんは疑似クラス、疑似要素ってご存知ですか?
私は先日K氏に教えてもらい、初めて知ることができました。
今までは見たことはあっても、自分が知っていることで進めていたのですが
「超便利やん!!!」と感動しましたので、紹介します(/・ω・)/
ちなみにインクループにいるK氏とは、幼稚園が一緒、WEBデザインの学校が一緒、
そしてインクループで一緒…と学年は違うものの、3度目の先輩ってことになります。
もはや運命!!!としか言いようがないのです(/・ω・)/(笑)
世間とは、広いような狭いような…
インクループの人たちはみんな近くに住んでいるので、地元の話でよく盛り上がります。
近所のラーメン屋の話とか、ケーキ屋さんの話、パン屋さんの話とか…って全部食べ物のことですね(笑)
地元の話ができるってなんだか嬉しいですよね(*’▽’)ぽっ
話が脱線していますが…
では今日のテーマ、疑似クラスのことをお話しします(*’▽’)!
今回のブログの見出しはコチラです!
疑似クラス、疑似要素とは?
タグでたまに見かける、:before, :afterなどのことを疑似クラス、疑似要素と言います。
:before, :afterは今までに使ったことないけど、マウスを乗せたときに変化が起きるhoverは使ったことある!という方も多くいらっしゃるのではないでしょうか。
hoverはダイナミック疑似クラスと呼ばれ、ダイナミックに変化させることができます。
どういうところが便利なの?
before⇒前
after⇒後ろ
ざっくりとした説明ですが、前と後ろに要素をつけるんですね。前にも後ろにも疑似要素としていろいろな表現や使い方ができます。
覚えておくとデザインの幅が広がり、作業効率もアップすること間違いなしでしょう(*’▽’)
例えば、疑似クラスを使って見出しのデザインを作ってみます。
今回作るのは、グラデーションの見出し。
こちらのサイトで制作してみました♪⇒http://grad3.ecoloniq.jp/
英語なんですが、使う場所は少ないですし、簡単にできちゃいます(*’▽’)
まずは好きな色をチョイス。(下画面↓)右はじにある赤枠をダブルクリックすることで色の変更ができます。
カラーコードも挿入可能です。
好きな感じのグラデーションができたら、右にあるコードを全てコピーします。
(Ctrl+A)で全選択ができて便利です。
これをstyle.cssに追加して、h2の見出しをスタイリッシュなデザインにしちゃいましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
h2{ /*background: url(../../../h2_img.png) no-repeat;*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.51, #dcdddd), color-stop(0.00, #fff)); background: -webkit-linear-gradient(top, #fff 0%, #dcdddd 51%); background: -moz-linear-gradient(top, #fff 0%, #dcdddd 51%); background: -o-linear-gradient(top, #fff 0%, #dcdddd 51%); background: -ms-linear-gradient(top, #fff 0%, #dcdddd 51%); background: linear-gradient(to bottom, #fff 0%, #dcdddd 100%); } h2:before { margin: 0 10px 0 0; content: ""; display: inline-block; width: 1.0em; height: 1.0em; background: url(../../../midashi_h2.png) 0 0 no-repeat transparent; background-size: contain; vertical-align: middle; position: relative; top: -3px; } |
これできれいなh2タグの見出しができました!
先頭にワンポイントをつけることもつけてスタイリッシュな見出しに完成♫
参考サイトはこちらです(http://blog.3streamer.net/html5-css3/pseudo-elements-and-pesudo-classes-530/)
今回はbeforeだけの説明になってしまいましたが、また機会があるときにafterも説明したいと思います(*’▽’)
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。