かんたんCSS HTML抜きで要素を追加する(::before, ::after)

  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

::before, ::afterはCSSの疑似要素で一番使うものです。HTMLのタグから作られる要素ではなく、CSSで新たに要素を追加します。HTMLに書くまでもないかんたんな要素を作るときに使います。

その::before, ::afterについて、かんたんに誰でも分かるようにサンプルコードを使いながら解説します。

(::before, ::afterでしか使えないcontentプロパティも説明します。)

::before, ::afterのサンプルコード

言葉で説明するよりも作っていく方が分かりやすいので、サンプルコードを作って動かしながら見ていきます。

まずはHTMLです。

HTML
<div>start</div>
<div class="add-element">add element</div>
<div>end</div>

HTMLの説明はいらないですね。ただ<div>を3つ並べただけです。これにCSSで2つの要素を追加します。

CSS
.add-element {
  background: rgba(219, 222, 255, 0.7);
  color: #fff;
}
.add-element::before {
  content: "add before";
  background: rgba(130, 215, 255, 0.7);
}
.add-element::after {
  content: "add after";
  background: rgba(255, 130, 165, 0.7);
}

くわしい説明はあとにして、とりあえずここでは::before, ::afterで要素を追加しているということだけ理解できればいいです。そしてその要素の内容はcontentプロパティに指定します。あとは、見やすいように背景色をつけました。

HTMLの結果です。

HTML結果
start
add element
end

::beforeと::afterの親(.add-element)の前と後ろに要素が追加されました。

ブラウザのデベロッパツール(chromeならF12キー)で見ると::before, ::afterが確認できます。

::before, ::after image
chromeのデベロッパーツール

ここでのポイントは、追加した要素はインラインになるということです。

ブロックとインライン

インラインは文章のようにヨコに並ぶこと。それに対してブロックは段落のようにタテに並ぶ。

インライン: <a>, <span>など

ブロック: <div>, <table>, <img>など

ブロックは、『ヨコに並ぶのをブロックして次の段に要素を配置する』と考えると覚えやすい。インラインの対だからアウトラインと言いたくなるが、そうじゃないところに注意が必要。

インラインになるのが分かりやすいのはリストを作ったときです。

HTMLを変更して実行します。

リストのHTML
<ul>
<li>start</li>
<li class="add-element">add element</li>
<li>end</li>
</ul>
HTML結果
  • start
  • add element
  • end

::before,::afterを追加したところはリストのマークは消えてしまいます。ただ、この現象はそんなに重要じゃないです。『こういうことがある』ぐらいでいいです。

::before, ::afterをタテに並べるのはかんたんです。要素をブロック化する『あれ』を追加するだけです。

.add-element::before, .add-element::after {
  display: block;
}
ブロック化の結果
start
add element
end

 

::before, ::afterの基本的な機能はこれだけです。

contentプロパティ

サンプルコードでは::before, ::afterに文字列を挿入しました。contentプロパティではほかにも挿入できます。使い方は、backgroundプロパティと似ています。

画像

画像を挿入
.xxxx::before {
  content: url('xxxx.jpg');
}

svgファイルも挿入できます。

アイコンフォント

Fontawesomeのアイコン挿入
.xxxx::before {
  content: '\f24d';
  font-weight: 900;
}

ほかのアイコンフォントでもコードが提供されていれば使うことができます。

contentプロパティは::before, ::afterだけで使えるプロパティです。ほかには使えないので注意しましょう。

::before, ::afterを使ったHTML&CSSのパーツ

::before, ::afterは、いろいろなところで応用されて使われています。たとえばボックスにスタイルを適用させる、

サンプル。サンプル。サンプル

などのパーツは::before, ::afterを使っています。このパーツのHTMLはボックスの中身だけです。

ほかにもいろいろなパーツを作成することができます。ぼくの自作ですがいくつかご紹介します。

(自作ですが、ぼくのオリジナルの発想ではないです。だれでも思いつくものです。)

  • メッセージボックス -> (作成中。近日公開)
  • 装飾ボックス -> (作成中。近日公開)
  • 引用のカスタマイズ -> (作成中。近日公開)
  • 会話風吹き出し(LINEとかの)-> (作成中。近日公開)
HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!