擬似要素 | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

こんにちは！

クリエイティブプロダクト部 クオリティコントロール班インターン生の老沼みほです！

本日は、OWLetのパーツ修正をメインに行った1日でした！

擬似要素

少しでもWeb制作に関わったことある人なら知っているのではないでしょうか？

::before

::after

のようなもの。

言葉で検索をかけてみると

CSSの擬似要素（pseudo-element）は、HTML要素の特定の部分にスタイルを適用するために使用されるCSSの機能。擬似要素はコロン（:）で始まる擬似クラスとは異なり、ダブルコロン（::）を使用して表されている。

このように出てきました。

疑似要素を知らない人からすれば、よく分からないかもしれません。

自分は擬似要素が”特定の部分にスタイルを適用するため”ということは知っていたのですが、パーツを作るうえで擬似要素を使い切れていませんでした。

例えば今日の業務であった例

誤り

【HTML】

<section>

  <div class = "-w-inner">

  ーーーーー内容ーーーーーー

  </div>

↑ このdivに擬似要素を付けたい

</section>

【CSS】

section｛

position:relative;

｝

.-w-inner::before{

position:fixed;

top:0;

left:0;

.

.

.

}

正解

【HTML】 

<section>

  <div class = "-w-inner">

【CSS】

.-w-inner｛

position:relative;

｝

.-w-inner::before{

position:fixed;

top:0;

left:0;

.

.

.

}

このように擬似要素が要素を作るということを理解できていなく、使い切れていませんでした。

擬似要素はHTMLでの<div></div>の役割を果たしているということを始めて知りました！

上の正解のHTML,CSSを書き換えると以下のように感じです！

【HTML】

<section>

  <div class = "-w-inner">

    <div class = "-w-before">

    </div>

  </div>

</section>

【CSS】

.-w-inner｛

position:relative;

｝

.-w-before{

position:fixed;

top:0;

left:0;

.

.

.

}

毎回の業務でこのような学びを得ることができます！

今回の日記は擬似要素についての自分のアウトプットのようになってしまいましたが、言いたいことは伝わったでしょうか。

自分は、理解して、言語化することが少し苦手であるので今後も練習していきたいと思います！

-------------------------------------------------------------------------------------------------------------------

フロントエンドエンジニアコースのインターン：https://guardian.jpn.com/recruit/intern/frontendengineer/

メンバー紹介ページ：https://guardian.jpn.com/member/miho_oinuma/

--------------------------------------------------------------------------------------------------------------------