1. TOP
  2. html&CSS入門
  3. CSSの疑似要素の使い方! befor・after をマスターしよう

CSSの疑似要素の使い方! befor・after をマスターしよう

擬似要素とは?

擬似要素とは、ある要素の特定の部分にスタイルがつけられるようにするものです。

例えば、beforeafterという擬似要素を使えば、選択した要素の前後にまるで要素があるかのようにスタイルがつけられます。

<p id="demo_130">これは普通の文章です</p>
 #demo_130::before{
   content:"これがbefore";
   background-color: tomato;
   padding: 5px;
   color: #fff;
 }
 #demo_130::after{
   content:"これがafter";
   background-color: royalblue;
   padding: 5px;
   color: #fff;
 }

これは普通の文章です

上記の例では、pタグで書かれた文章に対して、beforeafterという擬似要素を設定し、スタイルをつけています。

こうすることで、「これは普通の文章です」という文言の前後に、まるで要素があるかのようにスタイルをつけることができるようになります。

HTMLでは存在しない要素に対して、CSSで要素があるかのように扱えることから「擬似要素」と呼ばれます。

beforeの場合

指定した要素の前に擬似的な要素が追加されます。下記のようなイメージです。

{ここにbeforeが入ります} これは普通の文章です

afterの場合

指定した要素の後に擬似的な要素が追加されます。下記のようなイメージです。

これは普通の文章です {ここにafterが入ります}

よく使われる疑似要素

beforeafterが最もよく使われる擬似要素ですが、他にもいくつか種類があります。

first-letter

文章の最初の文字にだけスタイルをつけます。最初の文字だけ別の要素のように扱うイメージです。

<p id="demo_131">これは普通の文章です</p>
 #demo_131::first-letter{
    color: #00f;
    font-size: 30px;
 }

これは普通の文章です

first-line

要素の最初の行にスタイルををつけます。最初の行だけ別の要素のように扱うイメージです。

<p id="demo_132">これは普通の文章です<br>これは普通の文章です<br>これは普通の文章です<br>これは普通の文章です<br></p>
 #demo_132::first-line{
    color: #00f;
    font-size: 30px;
 }

これは普通の文章です
これは普通の文章です
これは普通の文章です
これは普通の文章です

とてもシンプルな擬似要素ですね。あまり使うことはないかもしれませんが覚えておくと便利です。

本記事では擬似要素の中でも奥が深くて便利な、beforeafterについてさらに掘り下げていきたいと思います。

擬似要素のメリット、デメリット

擬似要素のメリットは、HTMLは手を加えずにCSSだけを使って、まるで要素を追加したような複雑なスタイルをつけることができる点です。一度スタイルを作ってしまえば、他のHTML要素にクラスを追加するだけで適用できるので、使い回しも楽にできます。

つまり、メリットとしては、

  • 複雑なスタイルをCSSだけで実現できる
  • HTMLには手を加えなくて良い
  • 使い回しが楽

などが挙げられます。

疑似要素のデメリット

デメリットとしては、SEO的な側面になりますが、疑似要素に指定された文言はテキストとしてみなされないという点です。

googleのクローラーはHTMLのコードを解析し、テキストに何が書かれているか把握しています。

CSSの疑似要素で文字を追加しても、その部分はテキストとしてみなされません。大切なことは疑似要素ではなく、HTML内に記述するようにしましょう。

擬似要素 の使い方

コロンを2つ前につける

疑似要素は「::before」というように、コロンを2つのあとに疑似要素名が続きます。

p::before{ ここにスタイル }

以前はコロン1つで書かれていましたが、CSS3からはコロン2つに統一されました。

contentプロパティを指定する(before/afterの場合のみ)

before/afterを使う場合は、contentプロパティを使って、疑似要素の中身を指定します。

contentプロパティbefore/after専用のプロパティで、疑似要素で何を表示するかを指定するために使います。文字や画像のURLなどが指定できます。


/* 文字の指定 */
#p::before{
content:"これがbefore";
}

 
/* 画像の指定 */
#p::before{
    content:url(画像のパス);
}

ちなみに、contentを指定しないと「空の要素」としてみなされ何も表示されません。「なぜか疑似要素が表示されない!」という場合、大抵ここを忘れていることが多いので注意しましょう。

また、上述の通りcontentに画像を設定することが出来ますが、サイズを変えることが出来ないので使い勝手はいまいちです。

背景画像の場合はサイズ変更ができるので、contentに画像を指定するのではなく、背景に画像を指定する方が一般的です。

背景に画像を使った例

<p id="demo_136">背景に画像を。</p>
 #demo_136::before{
  content:"";
  width: 100px;
  height: 100px;
  display: block;
  background: url("https://images.unsplash.com/photo-1560707859-312eba39f044?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  background-size: cover;
  }

背景に画像を。

beforeを使って100pxの四角形の領域を作り、そこに背景画像を設定しています。

背景であればbackground-sizeを使ってサイズを変えられるので、画像を設定したい場合はこちらを使うのがおすすめです。

上の例でもありますが、contentに何も入れるものがない場合は、「content:””;」というように空の文字を指定しましょう。

疑似要素の対応ブラウザ

疑似要素はほとんどのブラウザで対応しています。

Image

https://caniuse.com/#search=CSS%20Generated%20content%20for%20pseudo-elements

IE8以前は危ういですが、IE11より以前のブラウザを使っている人はほぼいないので、問題なく使うことが出来ると考えて良いでしょう。

before/afterの使用例

ここからは、実際に使える疑似要素を使った表現方法を紹介していきます。

画像の上にラベルをのせる

画像の上にラベルをのせてみます。

<div id="demo_133">
  <img src="https://images.unsplash.com/photo-1560816801-08a84aa4bcd7?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
</div>
 #demo_133{
    width: 300px;
    position: relative;
  }
 #demo_133::before{
   content:"ラベル";
 
   /*   場所を指定 */
   position: absolute;
   right: 0;
   /*   以下装飾 */
   background-color: tomato;
   padding: 5px;
   color: white;
 }

ポイントとしては、親要素にposition: relative;を指定して、ラベルの位置の基準にしている点です。positionのrelativeやabsoluteについては下記の記事が詳しいです。

引用エリアを作る

 <blockquote id="demo_134">
    <p>これは引用の文章です。</p>
 </blockquote>
 #demo_134{
  /*   場所を指定 */
  position: relative;
  /*   以下装飾 */
  padding: 30px 20px 20px 30px;
  background-color: #ccc;
  width: 250px;
  }
 
 #demo_134::before{
    content: "“";
    /*   場所を指定 */
    position: absolute;
    top: 10px;
    left: 10px;
   /*   以下装飾 */
    font-size: 60px;
    line-height: 1;
 }
 

これは引用の文章です。

「”」を擬似要素で表示することで引用っぽさを出しています。

こちらもpositionを使っています。疑似要素とpositionはよく組み合わせる例なので覚えておくと便利です。

まとめ