TIPSWEB制作コメントを書くこんにちわ!木曜担当の吉見です。みなさんは疑似クラス、疑似要素ってご存知ですか?私は先日K氏に教えてもらい、初めて知ることができました。今までは見たことはあっても、自分が知っていることで進めていたのですが「超便利やん!!!」と感動しましたので、紹介します(/・ω・)/ちなみにインクループにいるK氏とは、幼稚園が一緒、WEBデザインの学校が一緒、そしてインクループで一緒...と学年は違うものの、3度目の先輩ってことになります。運命!!!としか言いようがないのです(/・ω・)/(笑)世間とは、広いような狭いような...インクループの人たちはみんな近くに住んでいるので、地元の話でよく盛り上がります。今回作るのは、グラデーションの見出し。:afterなどのことを疑似クラス、疑似要素と言います。:afterは今までに使ったことないけど、マウスを乗せたときに変化が起きるhoverは使ったことある!という方も多くいらっしゃるのではないでしょうか。hoverはダイナミック疑似クラスと呼ばれ、ダイナミックに変化させることができます。いうところが便利なの?before⇒前after⇒後ろざっくりとした説明ですが、前と後ろに要素をつけるんですね。前にも後ろにも疑似要素としていろいろな表現や使い方ができます。覚えておくとデザインの幅が広がり、作業効率もアップすること間違いなしでしょう(*’▽’)例えば、疑似クラスを使って見出しのデザインを作ってみます。今回作るのは、グラデーションの見出し。こちらのサイトで制作してみました♪⇒http://grad3.ecoloniq.jp/英語なんですが、使う場所は少ないですし、簡単にできちゃいます(*’▽’)まずは好きな色をチョイス。(下画面↓)右はじにある赤枠をダブルクリックすることで色の変更ができます。カラーコードも挿入可能です。好きな感じのグラデーションができたら、右にあるコードを全てコピーします。(Ctrl+A)で全選択ができて便利です。これをstyle.cssに追加して、h2の見出しをスタイリッシュなデザインにしちゃいましょう。参考サイトはこちらです(http://blog.3streamer.net/html5-css3/pseudo-elements-and-pesudo-classes-530/)今回はbeforeだけの説明になってしまいましたが、また機会があるときにafterも説明したいと思います(*’▽’)この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。千香WEBデザイン職業訓練卒。男の子2人の育児で毎日奮闘中です。WEBサイトやSNSの運用、SEOの研究が大好きで日々検証してます。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。現代のマーケティング課題を解決する資格セミナーを行っているマーケティングリテラシー協会様のLPを作成いたしました。Animateを利用したアニメーションを作ってみる。「米の娘ちゃん」LINEスタンプ第2弾2016-8-10横浜市港北の格安板金『フレエム屋』フレーム修理も出来る技術力で任せて安心!フレーム屋様のWEBサイトをスマホ対応させていただきました。小・中学生プログラミングコンテスト」を開催しました!2016-7-26まずはお家を調査・診断!!一友ビルドテック様のチラシを制作させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。