【CSS】 疑似要素の before や after を使ってアイコン、画像などの挿入、吹き出しを作成|HTML&CSS入門講座(20)

HTML&CSS
この記事は約4分で読めます。

はじめに

 HTML&CSS入門講座の第二十弾として、【CSS】疑似要素の使い方、beforeとafterの使い方ついて紹介します。

 この記事を読むと次の疑問について知ることができます。

  • CSSの擬似要素とは?
  • first-letterとfirst-line疑似要素の例
  • beforeとafter疑似要素
    • 簡単な文字などを差し込む
    • 文書の初めと終わりを記号を付与
    • positionを使い、ある一定の位置にラベルを表示
    • アイコンフォントを疑似要素beforeで利用
    • 疑似要素で画像の挿入
    • 吹き出しを疑似要素beforeで作成
 HTML&CSS入門講座(19)では、【HTML】tableの基本の書き方、 CSSによる修飾について解説してきました。
 
 ここでは【CSS】疑似要素の使い方、beforeとafterの使い方について深堀していきます。

CSSの擬似要素とは?

 HTML文書内の言葉の前後に言葉や画像要素(疑似要素)をcssを使って付加したりすることができるようになります。

 cssの疑似要素主要なものを次に載せます。

● ○○:: first-letter(要素の一文字目を指定)
● ○○:: first-line(要素の一行目を指定)
● ○○::before(要素の直前にコンテンツを追加)
● ○○::after(要素の直後にコンテンツを追加)

ここで、○○には、htmlのタグのcssでのid、class名などが入ります。

first-letterとfirst-line疑似要素の例

 ここでは、HTMLのh3タグ内に書かれた、最初の文字を赤文字に、また、文書を2つに分け(途中強制的に改行を入れる)て、その最初の文を赤字にすることをしてみたいと思います。

 ここで、HTML、CSSの埋め込みには、 JSFiddleを利用させていただいています。

 HTML、CSS、Resultのタブをクリックするたことにより、それぞれのコードや結果の表示を見ることができます。

 結果の表示では、全部表示されない場合は、横にスライドバーが表れますので、そのスライドバーを操作することにより、結果の全てを見ることができます。

beforeとafter疑似要素

簡単な文字などを差し込む

 ここでは、before疑似要素では、「昨日の花色は何だっけ!」を1.5倍の文字の大きさで赤文字で破線で枠で囲ったものを入れ、after疑似要素では、「わたしは花が好きだよ!」を0.5倍の文字の大きさで赤文字で破線で枠で囲ったものを差し込んでみたいと思います。

文書の初めと終わりを記号を付与

 before疑似要素では、「【」を、after疑似要素では、「】」を差し込んでみたいと思います。

 分かり易いように、【】の文字は赤にします。

positionを使い、ある一定の位置にラベルを表示

 ある決まった位置にラベル的なものを貼り込んでみたいと思います。

 ラベルは、「花について」と言うタイトルで、背景を赤にし、他の部分はシルバーの背景にしました。

アイコンフォントを疑似要素beforeで利用

 fonnt Awesomeフォント(救急車)を疑似要素before使ってい、リストで表示して見たいと思います。

<ul class="oya02">
<li class="giji06">この花一本</li>
<li class="giji06">あの花は二本</li>
<li class="giji06">あそこの花は三本</li>
</ul>
.oya02 {
list-style-type: none;
}
.giji06::before {
font-family: "Font Awesome 5 Free";
content: '\f0f9 ';
font-weight: 900;
color:blue;
}

 結果は次の通り。

疑似要素で画像の挿入

 画像の挿入は、文書の前に疑似要素beforeを使って花の画像を、文書の後ろには、疑似要素beforeを使って私のファビコンを挿入してみました。

吹き出しを疑似要素beforeで作成

 吹き出しの背景色を薄赤色としてみました。

 この吹き出しは、「サルワカさんの記事」を参考にさせていただきました。

おわりに

 如何だったでしょうか?

 CSSの擬似要素とは?、first-letterとfirst-line疑似要素の例、beforeとafter疑似要素、簡単な文字などを差し込む、文書の初めと終わりを記号を付与、positionを使い、ある一定の位置にラベルを表示、アイコンフォントを疑似要素beforeで利用、疑似要素で画像の挿入、吹き出しを疑似要素beforeで作成などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました