Help us understand the problem. What is going on with this article?

[CSS]擬似クラス"before""after"で出来るアレコレ!

More than 5 years have passed since last update.

before_2_top

前回の投稿で擬似クラス”before”と”after”について書きましたが、その後も調べていくと、"before""after"では、画像を置換する他にも、contentプロパティを使って様々な事が出来るようなので、今回はその技をご紹介します。

 

beforeとafterでつくれる、あれこれ

その①:リボン

リボン

可愛さを出す為に多様しがちなリボン。
自分で書こうとすると、綺麗にバランスを取って作成するのが結構難しいんですよね・・。
そんなリボンも疑似クラスの”before””after”プロパティを使うことでで簡単に作ることができます。
こちらは、livetoolsというCSSジェネレーターがあるので、そこのCSSを元に編集すればOKです。

▶Ui Parade – Live Tools
 
 
 

その②:ふきだし

ふきだし画像

今までは画像で設定していたであろう「ふきだし」を擬似クラスを使用する事で、CSSで再現出来ます。
「色を変えたい!」となった際に、PhotoshopやIllustratorで作成しなおさなくても、CSSからcolorを書き換えるだけで済むので、お手軽です。
しかも、上記のサンプル画像以外にも様々な形状・タイプの「ふきだし」が作成出来ます。
サンプルコードと「ふきだし」のデモは以下のサイトで見れますので、ご確認下さい。

▶Pure CSS speech bubbles By Nicolas Gallagher
 
 
 

その③:パッ◯マン!


パックマン

ゲーム自体はプレイしたことは無いのですが・・・。
この形は様々な場所で見けてきた印象深い形なので、デザインの中にちょっとしたアクセントとして使えるかもしれません。これもCSSで作成出来ますので、colorは好きなように変更ができます。
ちなみに、パッ◯マンだけではなく、星形などアクセント使い出来るものから、虫眼鏡などの汎用性の高い形状まで、数多くを作成することが出来ます。
以下にThe Shapes of CSというサイトのリンクを記載しますので、URL内のリンクから各種CSSをご確認下さい。
 
 
▶The Shapes of CSS – CSS-TRICKS
 
 
 

まとめ


如何でしたでしょうか!
「ふきだし」や「リボン」などは、画像で作成するよりもデータ容量も軽いし、更新も楽なので便利ですね。
とはいえ、前回の記事でも書きましたが、擬似クラスは古いverのブラウザでは対応していない事も多いので、利用の際はご注意下さい。
便利だと思って色々試していたのですが、多様するとCSSが大分長くなってしまうんですよね・・・・。
便利な機能とはいえ、状況に合わせて活用した方が良さそうですね。
hiranai
”Graphic designer”から”WEB界”へ移籍したデザイナー。 紙の世界の単位”mm”とWEBの世界の単位”pixel”のギャップに苦しめられたが今は克服。HTMLとCSSを目下学習中。 デザイン系の話題から、簡単なHTMLに関する題材を投稿予定。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away