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

18884 ワード
HTML デザイン 大阪万博 CSS ロゴ HTML テキストリンク

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

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

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

追記: いのちの輝き君だそうです。(コメントをくださったwakaba-bbqさん、ありがとうございます！)

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

まずは円から

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

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>いのちの輝き</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="inochi" style="width: 1000px; height: 1000px"></div>
</body>
</html>
style.css
.inochi {
    background: radial-gradient(
        circle at 10.0% 10.0%,
        red 10%,
        transparent 0%
    );
}

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

円を増やしていく

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

style.css
.inochi {
    background: radial-gradient(
        circle at 43.0% 12.4%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 93% 100% at 29.6% 23.1%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 13.5% 32.8%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 29.3% 39.0%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 16.9% 52.9%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 60% 100% at 25.5% 68.5%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 34.7% 81.9%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 53.5% 84.0%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 100% 90% at 71.4% 69.5%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 83% 100% at 73.9% 47.7%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 100% 50% at 75.3% 32.7%,
        red 5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 65.3% 16.5%,
        red 5%,
        transparent 0%
    );
}

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

円の大きさ調整

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

style.css
.inochi {
    background: radial-gradient(
        circle at 43.0% 12.4%,
        red 10%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 93% 100% at 29.6% 23.1%,
        red 10%,
        transparent 0%
    ),
    radial-gradient(
        circle at 13.5% 32.8%,
        red 10%,
        transparent 0%
    ),
    radial-gradient(
        circle at 29.3% 39.0%,
        red 10%,
        transparent 0%
    ),
    radial-gradient(
        circle at 16.9% 52.9%,
        red 12.5%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 60% 100% at 25.5% 68.5%,
        red 11%,
        transparent 0%
    ),
    radial-gradient(
        circle at 34.7% 81.9%,
        red 9%,
        transparent 0%
    ),
    radial-gradient(
        circle at 53.5% 84.0%,
        red 13.5%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 100% 90% at 71.4% 69.5%,
        red 14.3%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 83% 100% at 73.9% 47.7%,
        red 11.3%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 100% 50% at 75.3% 32.7%,
        red 16%,
        transparent 0%
    ),
    radial-gradient(
        circle at 65.3% 16.5%,
        red 13%,
        transparent 0%
    );
}

っぽい！！！

仕上げ

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

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

style.css
.inochi {
    background: radial-gradient(
        circle at 7.9% 29.5%,
        dodgerblue 2.3%,
        transparent 0%
    ),
    radial-gradient(
        circle at 10.5% 31%,
        white 5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 19.7% 52.1%,
        dodgerblue 2.7%,
        transparent 0%
    ),
    radial-gradient(
        circle at 20% 55%,
        white 5.7%,
        transparent 0%
    ),
    radial-gradient(
        circle at 52% 91.75%,
        dodgerblue 2%,
        transparent 0%
    ),
    radial-gradient(
        circle at 52% 89.0%,
        white 4.7%,
        transparent 0%
    ),
    radial-gradient(
        circle at 79.9% 69.2%,
        dodgerblue 2.8%,
        transparent 0%
    ),
    radial-gradient(
        ellipse 100% 90% at 76.3% 70.7%,
        white 7%,
        transparent 0%
    ),
    radial-gradient(
        circle at 70.5% 9.2%,
        dodgerblue 2.5%,
        transparent 0%
    ),
    radial-gradient(
        circle at 68.5% 11.5%,
        white 5.3%,
        transparent 0%
    );
}

注意点として、background内では後に書いた方がzindexが小さくなるので、赤い円たちの前に目玉を記述する必要があります。

おお！ほぼ完璧と言っていいのではないでしょうか。

今回作成したinochiをclassに指定することでどこでも大阪万博のロゴを使うことができます。やったね。

よければTwitterフォローしてください。またね。