【縛りプレイ】first-letter疑似要素を活用して「スターロッド」を描いてみた

この記事は <a href="https://qiita.com/advent-calendar/2019/css">CSS Advent Calendar 2019</a> の 8 日目の記事です。

#何があったの？

体内に電流が走りました。

普段CSSで図形を描くときは、divタグを複数使用して、自由気ままに描いておりました。
そんな時「<a href="https://yusugomori.com/projects/css-sans/fonts">CSS SANS</a>」という、CSSでフォントを作った方を見かけました。
どうやら、1つのdivタグで「AからZまでアルファベット」を表現されていました。
めちゃくちゃ感動しました。

これに刺激をうけた私は、1つのdivタグで「クリスマスっぽい何か」を描いてみることにしました。

#今回のルール

・設置するタグは、divタグ一つ
・Chromeで動けばOK

#成果物

まずは、成果物からご覧ください。
★に棒が刺さっている「スターロッド」です。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="satoshi_hayashi" data-slug-hash="BayoYJp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="スターロッド">
  <span>See the Pen <a href="https://codepen.io/satoshi_hayashi/pen/BayoYJp">
  スターロッド</a> by satoshi hayashi (<a href="https://codepen.io/satoshi_hayashi">@satoshi_hayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#使える疑似要素は「::before」と「::after」だけじゃない

divタグ1つだけでCSS図形を描く場合、「::before」と「::after」を使っている例が多いようです。
描画パーツは「div」「::before」「::after」の3つと、頭の中で固定観念ができあがっていました。

ところが、いろいろ試してみた結果、「::first-letter」も調整次第で、いろいろ使えることが分かりました。
「::before」と「::after」に続く、第四の描画パーツとして「::first-letter」が急浮上しました。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="satoshi_hayashi" data-slug-hash="eYYEyYP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="疑似要素テスト1">
  <span>See the Pen <a href="https://codepen.io/satoshi_hayashi/pen/eYYEyYP">
  疑似要素テスト1</a> by satoshi hayashi (<a href="https://codepen.io/satoshi_hayashi">@satoshi_hayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#first-letter疑似要素の調整
「::first-letter」を使用するには、何か1文字入力する必要があります。

```html:first-letter疑似要素の調整1
<div class="starrod">1</div>
```
さっそく文字を亡き者にして、余分なスペースをなくします。

```css:first-letter疑似要素の調整2
  font-size: 0; /* 文字を亡き者に */
  vertical-align: top; /* 上の隙間を解消 */
```

さらに、paddingを使って描画領域を確保します。
widthとheightを設定しているのと同じです。

```css:first-letter疑似要素の調整3
  padding-right: 60px; /* 描画領域におけるwidthの役割 */
  padding-bottom: 380px; /* 描画領域におけるheightの役割 */
```

最後に、backgroundプロパティに「〇〇-gradient」で図形を描画すればOKです。

```css:ロッドを描く
  background: 
    40px 80px / 20px 300px linear-gradient(yellow, yellow 10%, gray 40%, gray 100%) no-repeat;
```

今回は、長方形というシンプルな図形でしたが、もし、長方形以外の図形も描きたい方は、BOOTH様のサイトで「CSS図形 グラデーション」を検索ワードに入れて、検索してみてくださいませ m(_ _)m
※宣伝するつもりはないので、ここではリンクは張りません。

#聖属性っぽさを出す

クリスマスに向けて、神聖な感じを出せればと思っておりました。
そこで、ぼかしを入れることにしました。

```css:ぼかしを入れる
  filter: drop-shadow(0 0 10px yellow);
```

#成果物をもう一度

★に棒が刺さっている「スターロッド」です。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="satoshi_hayashi" data-slug-hash="BayoYJp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="スターロッド">
  <span>See the Pen <a href="https://codepen.io/satoshi_hayashi/pen/BayoYJp">
  スターロッド</a> by satoshi hayashi (<a href="https://codepen.io/satoshi_hayashi">@satoshi_hayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#まとめ

「first-letter疑似要素」は使える！！！
これからもっと研究して、活用パターンを増やしていきたいです。