htmlとcssでいのちを輝かせる

こんばんは。りーぜんとです。

昨日からTwitterで大阪万博のロゴが話題です。
参考↓
大阪万博公式サイト

そう。みながTwitterで言ってるように、ちょっときもいんです。
ちなみにTwitterではみんながいのち輝く君って呼んでるんですが、本当はなんていうんでしょう。

何はともあれ、この記事ではこのロゴをHTMLで好きな場所に入れれるようにCSSで書いていきたいと思います。

まずは円から

手始めに円を一つ書いてみます。cssのbackground属性にradial-gradientを適用してみます。

index.html

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>いのちの輝き</title><linkrel="stylesheet"href="index.css"></head><body><divclass="inochi"style="width: 1000px; height: 1000px"></div></body></html>

style.css

.inochi{background:radial-gradient(circleat10.0%10.0%,red10%,transparent0%);}

至って普通の円がかけましたね。ほぼ日本。

円を増やしていく

本物のロゴの画像から、各円を楕円の座標関係をある程度洗い出し、並べてみます。

style.css

.inochi{background:radial-gradient(circleat43.0%12.4%,red5%,transparent0%),radial-gradient(ellipse93%100%at29.6%23.1%,red5%,transparent0%),radial-gradient(circleat13.5%32.8%,red5%,transparent0%),radial-gradient(circleat29.3%39.0%,red5%,transparent0%),radial-gradient(circleat16.9%52.9%,red5%,transparent0%),radial-gradient(ellipse60%100%at25.5%68.5%,red5%,transparent0%),radial-gradient(circleat34.7%81.9%,red5%,transparent0%),radial-gradient(circleat53.5%84.0%,red5%,transparent0%),radial-gradient(ellipse100%90%at71.4%69.5%,red5%,transparent0%),radial-gradient(ellipse83%100%at73.9%47.7%,red5%,transparent0%),radial-gradient(ellipse100%50%at75.3%32.7%,red5%,transparent0%),radial-gradient(circleat65.3%16.5%,red5%,transparent0%);}

いい感じ。楕円の形は大体の見た目で合わせました。

円の大きさ調整

次に円の大きさを調節していきます。いい感じの見た目にするまで結構時間がかかった。

style.css

.inochi{background:radial-gradient(circleat43.0%12.4%,red10%,transparent0%),radial-gradient(ellipse93%100%at29.6%23.1%,red10%,transparent0%),radial-gradient(circleat13.5%32.8%,red10%,transparent0%),radial-gradient(circleat29.3%39.0%,red10%,transparent0%),radial-gradient(circleat16.9%52.9%,red12.5%,transparent0%),radial-gradient(ellipse60%100%at25.5%68.5%,red11%,transparent0%),radial-gradient(circleat34.7%81.9%,red9%,transparent0%),radial-gradient(circleat53.5%84.0%,red13.5%,transparent0%),radial-gradient(ellipse100%90%at71.4%69.5%,red14.3%,transparent0%),radial-gradient(ellipse83%100%at73.9%47.7%,red11.3%,transparent0%),radial-gradient(ellipse100%50%at75.3%32.7%,red16%,transparent0%),radial-gradient(circleat65.3%16.5%,red13%,transparent0%);}

っぽい！！！

仕上げ

最後にあの絶妙なきもさを放っている目玉のような模様を追加していきます。

書き足した部分だけcssを示しておきます。

style.css

.inochi{　　radial-gradient(circleat7.9%29.5%,dodgerblue2.3%,transparent0%),radial-gradient(circleat10.5%31%,white5%,transparent0%),radial-gradient(circleat19.7%52.1%,dodgerblue2.7%,transparent0%),radial-gradient(circleat20%55%,white5.7%,transparent0%),radial-gradient(circleat52%91.75%,dodgerblue2%,transparent0%),radial-gradient(circleat52%89.0%,white4.7%,transparent0%),radial-gradient(circleat79.9%69.2%,dodgerblue2.8%,transparent0%),radial-gradient(ellipse100%90%at76.3%70.7%,white7%,transparent0%),radial-gradient(circleat70.5%9.2%,dodgerblue2.5%,transparent0%),radial-gradient(circleat68.5%11.5%,white5.3%,transparent0%);}