ならCSSだけで「あ」をいろいろデザインできる説
Webページのコーディングで、HTML、CSSに携わったことがある人なら誰しも、思ったことがあるのではないでしょうか。
あれ、CSSだけで何でも作れるんじゃね？
そこで、このCSSの万能性を検証するために、今回はHTMLのコードを最低限にして、CSSだけでどんなものが作れるかを検証してみました。
条件は４つ
- HTMLのpタグだけをいじる
- 画像は使用しない
- JSもbootstrapも禁止
- 別フォントの利用禁止（デフォのみ）
あとは何を使ってもOKとします！
目次
デフォルトの「あ」
さて、まずはHTMLをコーディングしていきましょう。実にシンプル、初心者でもわかるレベルです。
<link rel="stylesheet" href="style.css">
<p>あ</p>
なんということでしょう、たったのこの２行！！
PCやブラウザによっては動かない可能性もありますが、僕が使っているmac＋Google Chromeではこれで、ちゃんと表示してくれるし、style.cssも読み込んでくれました。headもbodyもいれずに、なんと清々しいことか。
デフォルト表示
あえてスクリーンショットを撮るまでもないかもですが、CSSは何もない初期の状態はこちらです。
さて、ここからやっていきましょう。
まずは真ん中にして、と。続いて、上下にボーダーを入れてみます。
See the Pen
ExWLpGG by KURO (@wxksvvsd-the-lessful)
on CodePen.
イスラエルの国旗見たくなりました。
さて、ここから色々試してみたいと思います。
吹き出しっぽい「あ」
See the Pen
YzZLjgP by KURO (@wxksvvsd-the-lessful)
on CodePen.
吹き出しっぽいので、「あ」って感じのものを作りたかったんですね。本体（p）と擬似要素（p::after）のCSSを組み、本体で円を、擬似要素で三角形を作って位置を合わせています。何かを思い出したような感じが出てますね。
「あ」のまわりに飾り
See the Pen
wvJjEwe by KURO (@wxksvvsd-the-lessful)
on CodePen.
こちらも同様に、擬似要素を使って、もう一回り大きい円をつくって、枠線を左と下だけつけてみました。もう少しデザインを練っていけば、何かに使えるかも。。
色の重ね合わせを利用すると
次に作ったのがこちらですが、これはどうやって作ったでしょう？
See the Pen
RwpyYwa by KURO (@wxksvvsd-the-lessful)
on CodePen.
なんと文字にもグラデーションがかかっています。しかし、これもCSSのみでやっています。
本体（p）と擬似要素（p::after）でCSSを組むと、デフォルトでは擬似要素の方が本体より上に被さります。ここでは、実は擬似要素が本体を覆い被さっている状態で、そのままだと本体が見えなくなるのですが、色の重ね合わせ（mix-blend-mode）で比較明るい（lighten）を使用し、本体のpタグには白背景に黒文字なのです。
「比較明るい」を上にかけていくと、黒は明るく、白は明るくなりようがないのでそのまま。つまり、黒い部分である文字の部分にグラデーションがかかるのですね。もちろん、文字だけにグラデーションをかけるのも可能です。ただし、実際に使用するときは、子の文字以外のその周りの背景色も考慮する必要があります。
さらに遊んでみた
See the Pen
gOmzdbL by KURO (@wxksvvsd-the-lessful)
on CodePen.
デザインセンスのかけらもないですが、ただコードで遊んでるだけなのでご容赦を…
擬似要素を２つ（p::before、p::after）を設定し、左上の円と、文字本体へのグラデーションをかけています。文字だけにグラデーションがかかっているのは、先程と同じ色の重ね合わせを利用しています。
もう少し、いろいろ考えていけば、もっとかっこいい「あ」が誕生しそうですね。
CSSでハッカソンならぬ、「『あ』ッカソン」でもやってみたいものです。
EVENTS
