疑似要素「before」「after」の使い方とできること

beforeとafterの使い方

こんにちわー、ゆうです(^^)/

今回は疑似要素の「before」と「after」の紹介です! 疑似要素って言葉は一度は見たり聞いたりしたことがありますよね。 きっと最初は「疑似?何それ」「難しそう・・・」って感じになっちゃうと思うんですが、実はこれとっても簡単なんです(^^♪ 「疑似」って言葉がなんか難しそうな感じを漂わせてくるんですが、ホントに簡単で使い方を理解しちゃえばデザインの幅がめちゃ広がりますよ!

という事でさっそく紹介していきますね(^^)/

目次
疑似要素の「before」「after」とは
before・afterでできないこと

疑似要素の「before」「after」とは

疑似要素の「before」「after」っていうのは、名前の通りで、指定した部分の直前や直後に好きな文字や画像を導入することができます。

例えば、今日はねむいっていうようなタイトルがあるとします。 そして「今日はねむい」っていうタイトルの直前に、【注目!】っていう文字を付けたいとします。 こういう時に「before」を使うんです。

<h1>今日はねむい</h1>
h1:before{
  content:"【注目!】";
}
表示例とbefore、afterの解説

こんな感じで指定した部分の直前(上の場合h1)に好きなテキストを入れる事ができます。 でもわざわざbeforeを使わなくても、h1に直接入力すれば良くない?って思いますよね。 なぜここで使ったかというと、疑似要素のbeforeとafterで入力した文字は検索エンジンに認識されないからです。(単純に例としてわかりやすかった、ていうのもありましたけど)

つまり装飾などで使うまったく関係ない文字を入力しても、okという事です。

逆にbeforeとafterにページの重要なキーワードを入れたとしても、検索エンジンには認識されません。 なのでseo的にはまったく意味ないので注意して下さいね。

では詳しい使い方・記述方法などを紹介していきますね!

before・afterの使い方

beforeとafterの記述方法

使い方は要素名(h1やpなど)に続けて「:before」「:after」と記述します。

テキストを導入したい場合は「content:"";」内に好きな文字を入力。 画像を導入したい場合は「content:url();」内に画像のurlを入力します。

たったこれだけで指定した要素(h1やpなど)の直前または直後に色々なものが導入できます。

<p>htmlとは</p>
<p>cssとは</p>
<p>webとは</p>
p:after{
  content:"・・・・に続く";
}

表示例

htmlとは・・・・に続く cssとは・・・・に続く webとは・・・・に続く

上は例なんですが、こんな感じで要素名(この場合p)に続けて「:after」と記述し、content内に導入したいテキスト(この場合「・・・・に続く」)を記述する事で、 指定した部分(この場合p)の直後に表示されるようになります。

繰り返しますが、直前に導入したい場合は「:before」直後に導入したい場合は「:after」と記述して下さいね。 あとcontent:"";のように「ダブルクォーテーション」を忘れずに入力しましょう。

それと最初にも言いましたが、before、afterに入力したテキストは、ドラッグしても選択されません。 つまり通常のテキストのように文字としては認識されません

なので当然、グーグルなどの検索エンジンにも認識されないので、重要なキーワードをここに入れても意味ないです。 ですが逆にいえば、文字として認識されないので、関係ない文字をいくら入れてもseoに悪影響を及ぼさないってことです。 つまり装飾し放題ってこと。

ちなみにbefore・afterの部分はcssで、他の要素(h1やpなど)と同様に装飾することができます。 なのでその辺をちょっと説明していきますね。

before・afterをcssで装飾

cssで装飾したい場合は、contentに続けて入力していけばいいだけです。 まずは例を見てみて下さい。

<p>htmlとは</p>
<p>cssとは</p>
<p>webとは</p>
p:after{
  content:"・・・・に続く";
}

上は先ほど紹介した例です。 このafterの部分(「・・・・に続く」の部分)をcssを利用して装飾してみます。

記述の仕方は、contentの下にcssのコードを追加するだけ!

p:after{
  content:"・・・・に続く";
  background:#FF8C00;
  color:#fff;
  margin-left:10px;
}

表示例

htmlとは・・・・に続く cssとは・・・・に続く webとは・・・・に続く

こんな感じで、ただcssのコードを追加するだけなので、とっても簡単!

ここではサンプルなので適当なんですけど、色々できるので試してみて下さいね(^^♪ けっこう面白いですよ(^^)/

画像を入れる場合

before・afterで画像を入れる場合も基本的にはほぼ同じなんですが、注意点などもあるので、その辺を踏まえて紹介しますね。 まずは例を見てみましょう!

<p>htmlとは</p>
<p>cssとは</p>
<p>webとは</p>
p:before{
  content:url(http://www.yuu-diaryblog.com/image/main-kicon.png);
  margin-right:10px;
}

表示例

htmlとは cssとは webとは

画像を表示する場合は「content:url();」のカッコ()内に表示したい画像のurlを入力します。 ここで入力する画像のurlは絶対パス・相対パスのどちらも大丈夫です。

ただテキストを導入する時と違ってダブルクォーテーション(")を付ける必要はないので気を付けて下さいね。 あとbefore・afterで導入する画像はサイズを変更することができません なので、めちゃ面倒ですけどぴったりのサイズの画像を用意して下さいね。

ちなみにcssのmarginで右側の余白を開けているのは、単純に位置調整のためです。

あ!それと画像以外にもwebフォントを利用したアイコンなども表示できます。

例えば今見て頂いている私のブログの右サイドバー「カテゴリ」には、矢印がありますよね。 それとかはFont-awesomeというwebフォントをbefore・afterを利用して表示しています。 他にもSNSボタンのマークなんかにも利用しています。

※Font-awesomeの使い方などは別記事で紹介します。

before・afterでできないこと

すごい便利なんでついつい多用しちゃうbefore・afterなんですが、下の二つのことはできません。

  • 画像のサイズを変更する事はできない
  • before・afterで表示したテキストや画像にリンク(aタグなど)を貼る事はできない

残念ながらこの二つはできません。

リンクを貼る事はできないというのは、例えばcontent:"<a href="">リンク</a>";というように入力しても リンクが貼られることはないってことです。

以上が疑似要素のbeforeとafterについてでしたが、いかがでしたでしょうか?

「htmlのソースを見ても文字がないけど、どうやってるの?」 なんて所は、大体がbefore・afterと位置を自由に変えられるpositionプロパティを使って表現してたりします。

色んなサイトを見てると良くある「こんなの不可能じゃない??」って部分は、ほとんどがそれらを組み合わせて表現してる事が多いので、ぜひ試してみて下さいね。 ホームページやブログを作るのがすごい楽しくなりますよ(^^)/

頂いたコメント

  1. こんにちは。
    初心者の私でも最後まで読むことができました。
    ありがとうございます。
    もう一回読んだら実践してブログ作りを楽しみたいと思います。
    では応援して帰ります。

    • ゆう。 より:

      ヒルアンドンさん、こんにちわ(^^)/

      最後まで読んで頂きありがとうございます(^^♪

      できる限り、分かりやすく書いたつもりだったので、
      全部読んで頂けて、すごい嬉しいです(#^^#)

      疑似要素とか覚えると、今まで以上にブログ作りが面白くなると思うので、
      ぜひ実践してみて下さいね(^^♪