NHKのアレをCSSとHTMLで再現してみた
公開日 2019/09/19
アレってどれ？
これです。
Embedded content: https://codepen.io/ebifly/pen/vYBVRqr
Twitterでかんちゃんさんが作っていたので、僕なりに改良してみました。
「終 制作・著作 ⓃⒽⓀ」のロゴをCSSで作ってみた
Embedded content: https://twitter.com/sapporo_east_k/status/1174334316010065922?ref_src=twsrc%5Etfw
ざっくりマークアップ
<body>
<div class="nhk">
<h1 class="nhk_owa">終</h1>
<p class="nhk_seisaku">制作・著作</p>
<span class="nhk_line"></span>
<ul class="nhkList">
<li>N</li>
<li>H</li>
<li>K</li>
</ul>
</div>
</body>
完成図をイメージしながら、 まとまってくれてたら嬉しいポイント を意識しながらマークアップしていきます。
かんちゃんさんとの違うポイントとしては、制作・著作の間をhrタグで書いていない点です。hrタグは段落レベルのテーマの区切りとかの時に書くものらしい のでここでは相応しいくないように思えます。なので、spanタグで書きました。
（そもそもとしてロゴのマークアップに段落もクソも無くね…？って気持ちもありますでしょうが、グッと飲み込みましょう）
NHKの文字には、卵っぽい〇が付いているという共通項目があるので、リストでマークアップしました。
ロゴをマークアップする経験がなくベストプラクティスが分からないので、雰囲気と感覚で書きましょう…！
テキストに縁取り付ける
恐らく、どんな背景でも使えるように 全ての文字に縁取りが付いている のでこれを再現しましょう。
CSSにテキストに縁取りを付ける用のプロパティは無いので力技を使います。
【css】text-shadowで文字に太い縁取りや光彩を装飾する方法
nhk_owa{
font-size: 50px;
font-weight: bold;
margin-bottom: 10px;
text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000;
}
該当コードは上記のtext-shadowです。
やっていることは、 シャドウを何重にも重ねて縁取りっぽく見せている だけです。
ぼかしも集まれば塗りになる！
卵型の円を描く
NHKの文字を囲う〇が正円ではなく卵型の楕円形なのでこれを再現します。
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
上記の記事にあるようにborder-radiusの指定をいい感じにすると角丸だけでなく、楕円形も表現することが出来ます。
border-top-left-radius: 50% 30%;
border-top-right-radius: 50% 30%;
border-bottom-left-radius: 50% 60%;
border-bottom-right-radius: 50% 60%;
ここのコードはでっていうさんがUPしてくれたものを流用させていただきました。
Embedded content: https://twitter.com/de_teiu_tkg/status/1174344822817284098?ref_src=twsrc%5Etfw
卵に縁取り付ける
文字に縁取り付ける方法を説明したので次に、 卵にシャドウをかける方法 を説明していきます。
卵はborderで表現しているので、text-shadowと同じように box-shadow :0 0 2px #000,0 0 2px #000,・・・と描けば良いのですが
このままでは、 内側の縁取りが存在していません 。なので、box-shadow:0 0 2px #000 inset ;という風に内側のシャドウを足してあげます。
最終的なコード以下の通り。
box-shadow: 0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset,0 0 2px #000 inset;
数が激しくテキトー なのでよしなに変更してあげてください。
そして、表示はこのようになります。
うーん…。
卵が重なり合ってしまい、 デザインを正しく再現出来ていない ですね。
解決方法は、 シャドウを持っていない卵を上重ねる という方法です。
.nhkList{
>li{
&::before,&::after{
// 卵を表示するコード
}
&::before{
// 卵にシャドウをかけるコード
}
}
}
このように、 卵を二枚重ねにして下の卵にだけシャドウをかけてあげる と
思惑通りの表示になりましたね！
いかがでしたでしょうか？
割と簡単なHTMLとCSSだけでNHKのアレが再現できるということが伝わったかと思います。
記事にして欲しいとの要望を頂いたので、書きましたがこれで良かったのだろうか？
皆さんもNHKのアレを作ってみてくださいね！
「誰も作らないよ」
終
制作・著作
━━━━━
ⓃⒽⓀ
