未来を創る、テックコミュニティー

ならCSSだけで「あ」をいろいろデザインできる説

KURO
2021/06/08
CSSだけで「あ」をデザインする

Webページのコーディングで、HTML、CSSに携わったことがある人なら誰しも、思ったことがあるのではないでしょうか。

あれ、CSSだけで何でも作れるんじゃね?

そこで、このCSSの万能性を検証するために、今回はHTMLのコードを最低限にして、CSSだけでどんなものが作れるかを検証してみました。

条件は4つ

  • HTMLのpタグだけをいじる
  • 画像は使用しない
  • JSもbootstrapも禁止
  • 別フォントの利用禁止(デフォのみ)

あとは何を使ってもOKとします!

デフォルトの「あ」

さて、まずはHTMLをコーディングしていきましょう。実にシンプル、初心者でもわかるレベルです。

<link rel="stylesheet" href="style.css">
<p>あ</p>

なんということでしょう、たったのこの2行!!

PCやブラウザによっては動かない可能性もありますが、僕が使っているmac+Google Chromeではこれで、ちゃんと表示してくれるし、style.cssも読み込んでくれました。headもbodyもいれずに、なんと清々しいことか。

デフォルト表示

HTMLのデフォルト表示

あえてスクリーンショットを撮るまでもないかもですが、CSSは何もない初期の状態はこちらです。
さて、ここからやっていきましょう。

CSSで大きくしただけ

まずは真ん中にして、と。続いて、上下にボーダーを入れてみます。

CSSだけで「あ」をデザインする

See the Pen
ExWLpGG
by KURO (@wxksvvsd-the-lessful)
on CodePen.

イスラエルの国旗見たくなりました。
さて、ここから色々試してみたいと思います。

吹き出しっぽい「あ」

CSSだけで「あ」をデザインする

See the Pen
YzZLjgP
by KURO (@wxksvvsd-the-lessful)
on CodePen.

吹き出しっぽいので、「あ」って感じのものを作りたかったんですね。本体(p)と擬似要素(p::after)のCSSを組み、本体で円を、擬似要素で三角形を作って位置を合わせています。何かを思い出したような感じが出てますね。

「あ」のまわりに飾り

CSSだけで「あ」をデザインする

See the Pen
wvJjEwe
by KURO (@wxksvvsd-the-lessful)
on CodePen.

こちらも同様に、擬似要素を使って、もう一回り大きい円をつくって、枠線を左と下だけつけてみました。もう少しデザインを練っていけば、何かに使えるかも。。

色の重ね合わせを利用すると

次に作ったのがこちらですが、これはどうやって作ったでしょう?

CSSだけで「あ」をデザインする

See the Pen
RwpyYwa
by KURO (@wxksvvsd-the-lessful)
on CodePen.

なんと文字にもグラデーションがかかっています。しかし、これもCSSのみでやっています。

本体(p)と擬似要素(p::after)でCSSを組むと、デフォルトでは擬似要素の方が本体より上に被さります。ここでは、実は擬似要素が本体を覆い被さっている状態で、そのままだと本体が見えなくなるのですが、色の重ね合わせ(mix-blend-mode)で比較明るい(lighten)を使用し、本体のpタグには白背景に黒文字なのです。

「比較明るい」を上にかけていくと、黒は明るく、白は明るくなりようがないのでそのまま。つまり、黒い部分である文字の部分にグラデーションがかかるのですね。もちろん、文字だけにグラデーションをかけるのも可能です。ただし、実際に使用するときは、子の文字以外のその周りの背景色も考慮する必要があります。

さらに遊んでみた

CSSだけで「あ」をデザインする

See the Pen
gOmzdbL
by KURO (@wxksvvsd-the-lessful)
on CodePen.

デザインセンスのかけらもないですが、ただコードで遊んでるだけなのでご容赦を…
擬似要素を2つ(p::before、p::after)を設定し、左上の円と、文字本体へのグラデーションをかけています。文字だけにグラデーションがかかっているのは、先程と同じ色の重ね合わせを利用しています。

もう少し、いろいろ考えていけば、もっとかっこいい「あ」が誕生しそうですね。
CSSでハッカソンならぬ、「『あ』ッカソン」でもやってみたいものです。

この記事を書いた人
KURO
エディター