TR Output

フロントエンドエンジニアの備忘録

【2021年3月】今月読んだ良記事

1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。

HTML

CSS

JavaScript

Vue

React

TypeScript

フロントエンドほか

ブラウザ

Web系ほか

デザイン / UI / UX

Python

開発 / インフラ / ツール

SEO / マーケティング

iOS / Android

「CSS完全に理解した」の再現 〜疑似要素編〜

Introduction

CSS完全に理解した」Tシャツは以前から知っていて、ネタとして面白いし、敢えてそのデザインを再現するには多少CSSの理解が必要になってきて、深いな(?)と思っていました。

そんな中最近この記事を見つけ、楽しく拝見させていただき、これに触発される形でこの記事を書こうかなと思いました。

こちらの記事で前提としている状態とは違ってしまいますが、 一番シンプルに再現できそうな方法で実際に作ってみました。

Results

まずは最終的なコードから。

See the Pen I understand the css completely. by ryo tate (@ryo_tate) on CodePen.

疑似要素だけで外側の枠を再現するので、HTMLは最低限の<p>だけで済みます。
テキストの増減にも問題なく対応

テキストを囲うボーダーを用意するために、

  1. p はブロック要素なので、右端まで要素が伸びてしまうのを防ぐため、inline-block にしておきます。
  2. pposition: relative を付け、
  3. p の疑似要素(::before)にはborderとradiusposition: absoluteで浮かせ、
  4. top, left, right, bottom をそれぞれ 0 にしたのが下の状態です。 f:id:ttryo:20210318024421p:plain
    そこから枠を左にズラすため、
  5. transform: translateX(-40px); を当てます。

基本的には上記の5手順で再現はできます。
top, left, right, bottom のそれぞれをマイナスにすることで padding を当てたときと同じような余白を再現できます。(今回はそれぞれ -10pxを当ててみました。)
親要素に余白を何も当てていないと p は左端に行ってしまい、枠が画面外へはみ出てしまうため、今回はmargin も当てて枠が全て見えるようにしておきました。

Conclustion

いかがだったでしょうか。
疑似要素を上手く使うことで表現の幅が広がり、HTMLをシンプルに保てる場面が非常に多くあります。
疑似要素が使いこなせれば「CSS完全に理解した」状態にグッと前進すると思うので、是非使ってみてください。

【2021年2月】今月読んだ良記事

1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。

HTML

CSS

JavaScript

Vue

React

TypeScript

フロントエンドほか

ブラウザ

Web系ほか

デザイン / UI / UX

アルゴリズム

開発 / インフラ / ツール

SEO / マーケティング

iOS / Android

その他