噂のCSSの機能、擬似要素をご紹介!

今年からコーディングをする時に見かけるようになった擬似要素。先輩のコードを引き継ぐ時に、見慣れない記述があり、「この記述なんだろ…?」と眺めていましたが最近どのサイトのコードを見ていても記述してあるので、そろそろ知っておかなきゃやばいなと感じ、今回の記事のテーマにしました。

そもそもCSS3って何?と思う方もいらっしゃると思います。CSS3とは、cssの第3版のことです。CSS(Cascading Style Sheet)というのはサイトのスタイルや書式を記述する言語の一つです。ちなみにhtmlだけのサイトだと、何の装飾もない文字と画像だけが出てきてしまいます。下の画像参照。 

 画像は大きいし、まとまってないですよね?CSSを記述するとこうなります。

先ほどのhtmlのみのものと比べると見やすくなったと思います。

そのCSSの第1版が勧告されたのは1996年です。ちなみにWindows95が出てきたのが丁度その頃です。その後CSS2が1998年に登場し、2011年にはCSS2.1が登場!結構最近ですね。そして私が使用しているCSS3が今徐々に勧告されてきています。

CSSは使いやすくなっている!

CSS1からCSS2へのバージョンアップではいくつか互換性の無い部分があります。つまりCSS2では使えてもCSS1では使えない部分が出てきたのです。ですが、CSS3は今まで使用していたものに便利な機能がついただけなので、1つのソースの中にCSS1、CSS2が混じっていても問題ありません。既存のソースを書き換えるというような面倒くさいことをせずにすむのです。

4つの機能をご紹介!

私がコーディングを始めたのは昨年の終わりからです。なのですでに擬似要素の機能はありました。(今までほとんど使ってこなかったけど…)

擬似要素と擬似クラスの違いはスタイルが反映される部分。

ちなみに今回のテーマは「擬似要素」ですが、「擬似クラス」というものもあります。

要素とクラスって…?
コーディングをしていて、この2つの違いが曖昧だったので調べてみました。

擬似要素には以下のような種類があります。
::before(要素の前にスタイルを反映させる)
::after(要素の後にスタイルを反映させる)
::first-letter(最初の1文字目にスタイルを反映させる)
::first-line(最初の1行目にスタイルを反映させる)

擬似要素が反映されるのは文章の1文字目、1行目など、要素の一部分に対してです。
例えば、

<p>赤いりんご</p>
(<p> </p>は一つの段落を表すタグです。)

上記の文章で「赤」という文字だけ赤くしたい場合

p::first-letter{ color: #ff0000;}

と記述することで「赤」の文字だけスタイルがつけられます。

 

では擬似クラスはというと、以下のような種類があります。
:hover(マウスポインターを乗せた時にスタイルを反映させる。)
:visited(訪問済みリンクにスタイルを反映させる。)
:link(未訪問リンクにスタイルを反映させる。)
etc…

擬似クラスが反映されるのは指定したクラス全体です。
例えば、

<p>赤いりんご</p>
(<a> </a>はリンクを表すタグです。)

上記の文章で「赤いりんご」部分にマウスポインターを乗せた時に赤くする場合

a:hover{ color: #ff0000;}

と記述することで、「赤いりんご」の文字全体が赤くなります。

簡単ではありますが、要素とクラスの説明は以上です。次に本題の擬似要素について書いていきます。

使い方いろいろ!before・after

本当に便利だと思ったのが、擬似要素のbeforeとafterです。コードの書き方によって今まで不可能だったことを可能にしています。ずは基本的な使い方から紹介します。

①文章の前、もしくは後に文字をいれる。

<p>赤いりんご</p>

上記の単語の前に「お店で」という言葉と、後に「買った。」という言葉を付けます。CSSのコードは下記のようになります。

p::before{ content: “お店で”;}
p::after{ content: “買った。”;}

比較的簡単なコードだと思います。before・afterで文字を入れるとドラッグしても選択されないのでSEOには弱くなります。

②文章の前、もしくは後に画像を入れる。

<p>赤いりんご</p>

上記の単語の前後にりんごの画像を入れます。

p::before{ content: url(img/apple.png); display: block;}

文字と同じく画像はドラッグできません。

③くの字矢印を作ってみる。

<p>くの字矢印アイコン</p>

上記の文章の前にくの字の矢印をつけます。

p::before{
left: 3px;
width: 5px;
height: 5px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

このコードを見た時、そんな使い方もあるのか!と驚いた覚えがあります。今まで画像で入れていた矢印がCSSで再現できてしまうなんてすごいですよね!応用することで、矢印を利用した吹き出しもCSSだけでできてしまいます。

 <div class=”box”></div>
(<div> </div>は一つのかたまりを表すタグです。)

 赤い吹き出しをつけたいと思います。

 .box{
position: relative;
background: #ff0000;
height: 70px;
width: 400px;
margin-bottom: 20px;
}
.box::after{
content: ‘’;
position: absolute;
border-top: 20px solid #ff0000;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
bottom: -20px;
left: 50%;
}

探してみると他にもbefore・afterだけでアイコンが表現できたり、リボンが表現できたりするので、ぜひ探して見てください。

最初の文字を強調させる!first-letter

先ほど記述しました、first-letterです。指定した一文字目にスタイルをあてることができます。例文も先ほど記述したのでここでは書きませんが、あまり見ないコードです。私は数は少ないですが、様々なサイトのコードを見てきて、first-letterまだ見たことがないです。

一行目にスタイルを当てたいならfirst-line!

first-letterと似ている機能です。ただスタイルが反映される部分が1行なので広くなります。

 <p>赤いりんごを買った。<br>
アップルパイにしようと思う。</p>
(<br>は改行のタグです。)

 上記の1行目を赤くしたいと思います。

p::first-line{ color: #ff0000;}

この記述だけで赤いスタイルがつきます。

 first-lineはfirst-letterと同じようにサイトのコードではなかなか見ません。

 所感

今回擬似要素を調べてみて今まで曖昧だったことが確認できたり、新発見につながりました。現在サイトを制作していて、擬似要素(特にbefore・after)の記述は見ない時がないです。それだけたくさんのWEBデザイナーの方が使用しているので新しい記述方法もこれからどんどん増えていくと思います。まだ勧告されていないものもあります。記述方法だけでなく、新しい擬似要素も新しく出てくるでしょう。
今後も今の状態に満足するのではなく新しいものにアンテナを張って、技術を取り込みたいと思いました。

このエントリーをはてなブックマークに追加

筆者

Y.Urushizaki

1日を100%全力で生きるをモットーに毎日すごしています。幸せだなと思う瞬間は仕事終わりに「今日も頑張った」と思いながら駐車場まで歩く時と、近所の野良猫と遊んでいる時です。最近自覚したことは周囲も驚くほどの雨女だったことで、過去に行ったテーマパーク(ディズニー・ユニバ・富士急・ナガスパ)はほとんど雨の思い出がしかありません。たまにテーマパークで晴れると自分より強い晴れ男・晴れ女が存在する事実に少しテンションがあがります。

筆者が最近執筆した記事