CSSの擬似要素を使って画像や線を作成する方法!擬似クラスとの違いも解説

2023.01.28
cssの疑似要素を使って画像や線を作成する方法

「CSSの擬似要素を使って画像を配置する方法について知りたい。」
「擬似要素の使い方がいまいち分からない」

上記のような疑問を抱えていて、この記事にたどり着いた方もいるのではないでしょうか?

擬似要素を使って新しく要素を作る方法は独特なので、使い方に迷ってしまいますよね。

今回WEBCAMP MEDIAでは、CSSの擬似要素を使って画像や線を作成する方法について解説します。

  • 擬似要素について
  • 擬似要素一覧
  • 画像を指定する方法
  • 線を引く方法
  • 三角形を作成する方法

以上の項目について解説します。

この記事を読むことで、擬似要素の種類と使い方について理解できるので、ぜひチェックしてみてくださいね!

擬似要素とは

擬似要素とは、セレクタで指定したHTML要素の一部分にスタイルを反映できます。

たとえば、pタグで「おはよう」という文を表示している場合、擬似要素を使うことで文中の1文字だけにCSSを指定できるのです。

擬似要素で有名なのが「::before」や「::after」が挙げられます。

擬似要素と擬似クラスの違い

擬似要素が一部分のみスタイルを反映するのに対して、擬似クラスは指定した要素全体にCSSを反映します。

擬似クラスには、マウスオーバーしたときの処理を行うhoverや、複数の要素を指定できるnth-childが挙げられます。

また、擬似要素を使うときは要素の前にコロンを二つ「::」入力し、擬似クラスにはコロンをひとつ「:」入力します。

以上の理由から、指定する要素の範囲と入力するコロンの数で擬似要素と擬似クラスを見分けることができます。

CSSで利用できる主な擬似要素一覧

CSSで主に利用される擬似要素は下記の4つです。

  • ::before:指定したHTML要素の前に新たな要素を作成できる
  • ::after:指定したHTML要素の前に新たな要素を作成できる
  • ::first-letter:HTML要素の最初の文字にスタイルを指定する
  • ::first-line:指定した要素に入力されている文章中の最初の行にスタイルを指定する

上記の中でも「::before」や「::after」は、Webサイトのタイトル横にアイコンとして使用したり、サブタイトルを入力するときに利用されます。

擬似要素を使って画像を指定する方

擬似要素に画像を表示させる方法は、contentプロパティとbackground-imageプロパティを使う方法の2通りあります。

contentプロパティで指定すると画像のサイズを変更できないので、サイズを変えたい場合はbackground-imageプロパティを利用しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    p::before {
    content: '';
    background-image: url(./test.png);
    width: 30px;
    height:30px;
    display: inline-block;
    vertical-align: middle;
    }
  </style>
</head>
<body>
    <p>beforeを使って左に画像を入力する</p>
</body>
</html>

display:inline-blockで横幅と縦幅を指定できる擬似要素を表示しています。

vertical-align: middleを使うと、pタグの文字の中心と同じ高さに画像を設定できます。

擬似要素で線を引く方法

CSSのborderを使うことでHTML要素に線を引くことができますが、要素のサイズに依存してしまうというデメリットが存在します。

擬似要素を使うことで、要素に依存せず自在に場所やサイズを指定できます。

今回は、擬似要素で下線を引く方法をサンプルコードを用いて解説します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    h2{
        position:relative;
    }

    h2::after{
        content:"";
        position:absolute;
        bottom:0;
        left:0;
        display:block;
        width:190px;
        height:3px;
        background-color:skyblue;
    }
  </style>
</head>
<body>
    <h2>下線を引くテスト</h2>
</body>
</html>

h2タグにposition:relativeを使って、擬似要素の起点になる位置を指定します。

擬似要素にposition:absoluteを指定し、bottomとleftを0にすることでh2タグの左下に要素を配置できます。また、下線のサイズはwidthとheightで指定可能です。

CSSの擬似要素で三角形を装飾する方法

擬似要素に追加したCSSプロパティの使い方を工夫することで、タイトル横のアイコンを作成できます。

HTML要素の横に左向きの三角形を作成する方法を例に、アイコンの作り方を解説します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    p{
        position: relative;
        padding-left: 10px;
    }
    p::before{
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-left: 8px solid #555;
    }
  </style>
</head>
<body>
    <p>下線を引くテスト</p>
</body>
</html>

擬似要素に指定しているposition: absoluteは、position:relativeを起点に浮いている状態です。

なので、擬似要素を追加するpタグの左にpadding-leftを指定してアイコン用の空白を作っています。

三角形を作るには、borderで矢印の縦サイズを指定してtransparentで透明にします。そのあと、border-leftで矢印の横幅のサイズと色を指定することで右向きの矢印を作成できます。

まとめ

今回は、CSSの擬似要素を使って画像や線を作成する方法について解説しましたが、いかがでしたでしょうか?

擬似要素は、CSSを使って擬似的な要素を作成する方法です。

擬似要素の中でも、HTML要素の前後に新たにコンテンツを配置するbeforeとafterがよく利用されています。

擬似要素を使うことで、Webサイトをよりおしゃれにデザインできるので、この記事をきっかけにぜひ試してみてくださいね!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5