ページの先頭へ
トップに戻る
2017年2月6日 Web制作

もう少しでバレンタインだからCSSでチョコレート作っといた

はい。ピュアチョコレートならぬピュアCSSチョコレートです。こんな時間になにやってるんだろうね俺。もう深夜3時だよ。

Pure CSS Chocolate 1時間クッキング

まず「板チョコ」で画像検索して出てきたちょうどいい画像を用意します。
これを見ながらザクザクコーディングすると…

See the Pen rjKdLP by Kuzlog (@Kuzlog) on CodePen.

完成です。
制作時間は1時間くらいですが、レイアウトやボーダー部分の調整は意外とあっさり終わりました。極端な話、ただ四角並べてるだけだからね。

んで、一番苦労したのがです。どうせ作るならめちゃくちゃ美味しそうに仕上げてやろうと思ったんですが、彩度を上げすぎると胡散臭いし、暗めの色にするとマズそうだし…ってことでこの色に落ち着きました。

ちなみにあかまる(@Akamaru12mg)は板チョコあんまり好きじゃないです。プリングルス美味しい。

Pure CSS Chocolateの活用方法

クソも役に立たないと思われたPCC(ピュアCSSチョコレート)ですが、Web系男子に渡せばウケるかもしれません。

HTMLとCSSを圧縮してUSBメモリに保存し、綺麗なラッピングを施して

「レンジ(解凍ソフト)でチン(解凍)してから食べて(開いて)ね♥」

とか言って渡せばいいと思います。ただし、どんな空気になっても責任は取りません。てかチョコレートをレンジでチンてなんだよ。

おやすみなさい。