記事の詳細

こんにちわ!木曜担当の吉見です。

みなさんは疑似クラス、疑似要素ってご存知ですか?

 

私は先日K氏に教えてもらい、初めて知ることができました。
今までは見たことはあっても、自分が知っていることで進めていたのですが
「超便利やん!!!」と感動しましたので、紹介します(/・ω・)/

 

 

ちなみにインクループにいるK氏とは、幼稚園が一緒、WEBデザインの学校が一緒、
そしてインクループで一緒…と学年は違うものの、3度目の先輩ってことになります。
もはや運命!!!としか言いようがないのです(/・ω・)/(笑)

世間とは、広いような狭いような…
インクループの人たちはみんな近くに住んでいるので、地元の話でよく盛り上がります。
近所のラーメン屋の話とか、ケーキ屋さんの話、パン屋さんの話とか…って全部食べ物のことですね(笑)
地元の話ができるってなんだか嬉しいですよね(*’▽’)ぽっ

 

 

話が脱線していますが…
では今日のテーマ、疑似クラスのことをお話しします(*’▽’)!

疑似クラス、疑似要素とは?

タグでたまに見かける、:before, :afterなどのことを疑似クラス、疑似要素と言います。

 

:before, :afterは今までに使ったことないけど、マウスを乗せたときに変化が起きるhoverは使ったことある!という方も多くいらっしゃるのではないでしょうか。
hoverはダイナミック疑似クラスと呼ばれ、ダイナミックに変化させることができます。

どういうところが便利なの?

before⇒前
after⇒後ろ
ざっくりとした説明ですが、前と後ろに要素をつけるんですね。前にも後ろにも疑似要素としていろいろな表現や使い方ができます。
覚えておくとデザインの幅が広がり、作業効率もアップすること間違いなしでしょう(*’▽’)

 

 

例えば、疑似クラスを使って見出しのデザインを作ってみます。

今回作るのは、グラデーションの見出し。

こちらのサイトで制作してみました♪⇒http://grad3.ecoloniq.jp/

グラデーションの見出し

英語なんですが、使う場所は少ないですし、簡単にできちゃいます(*’▽’)

まずは好きな色をチョイス。(下画面↓)右はじにある赤枠をダブルクリックすることで色の変更ができます。

見出しの色を選ぼう
見出しの色のカラー

カラーコードも挿入可能です。

好きな感じのグラデーションができたら、右にあるコードを全てコピーします。
(Ctrl+A)で全選択ができて便利です。

これをstyle.cssに追加して、h2の見出しをスタイリッシュなデザインにしちゃいましょう。

 

これできれいなh2タグの見出しができました!

先頭にワンポイントをつけることもつけてスタイリッシュな見出しに完成♫
スタイリッシュな見出し

参考サイトはこちらです(http://blog.3streamer.net/html5-css3/pseudo-elements-and-pesudo-classes-530/

今回はbeforeだけの説明になってしまいましたが、また機会があるときにafterも説明したいと思います(*’▽’)

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
吉見 千香
WEBデザイン職業訓練校卒の新米WEBデザイナー。一児のママで毎日育児に奮闘しながらWEBデザインとマーケティング、SEOについて学んでます。日々壁にぶち当たりながらレベルアップ中!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

お知らせ

平成28年度補正予算 小規模事業者持続化補助金

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

ページ上部へ戻る