Top

元オリンピックロゴを CSS だけで今更作ってみる

今更感。

そろそろ新しいオリンピックロゴが決まりそうなので、新しいロゴも作れたら作りたいですね。もう先人のどなたかが CSS で作っているかもしれませんが、決してパクリではありません。

olympic-logo

上はただの画像です。下に CSS でこの画像を再現したデモがありますのでご覧ください。

HTML
<div id="op-back-ground">
    <div id="op-gold"></div>
    <div id="op-silver"></div>
    <div id="op-circle"></div>
    <div id="op-black"></div>
    <div id="op-red"></div>
</div>

CSS
/*全体を囲う block*/
#op-back-ground {
    font-size: 200px; //大きさを変更したい場合はこの値を変更
    background-color: #fff;
    position: relative;
    overflow: hidden;
    height: 3em;
    width: 3em;
}
 
/*左上の金色*/
#op-gold {
    background-color: #aa8f47;
    position: absolute;
    top: 0;
    left: 0;
    height: 1em;
    width: 1em;
}
 
/*右下の銀色*/
#op-silver {
    background-color: #afb0af;
    position: absolute;
    top: 2em;
    left: 2em;
    height: 1em;
    width: 1em;
}
 
/*中央の白い円*/
#op-circle {
    background-color: #fff;
    position: absolute;
    top: -0.08em;
    left: -0.08em;
    height: 3.16em;
    width: 3.16em;
    border-radius: 50%;
}
 
/*黒い棒*/
#op-black {
    background-color: #323332;
    position: absolute;
    top: 0;
    left: 1em;
    height: 3em;
    width: 1em;
}
 
/*右上の赤い円*/
#op-red {
    background-color: #dc140e;
    position: absolute;
    top: 0;
    left: 2em;
    height: 1em;
    width: 1em;
    border-radius: 50%;
}
 
/*スマホ等のレスポンシブ対応*/
@media (max-width:600px) {
    #op-back-ground {
        font-size: 30vw;
    }
}

デモ(画像ではありません)

無駄にレスポンシブ対応済みなので、スマホでも枠内に収まるようになっています。ただし、単位 vw を使っていますので、場合によっては「30vw」では大きいかもしれません。各々変更してください。

「font-size: 200px」を基準値として全ての要素が相対値 em で書かれています。ですので、大きさを変更したい場合は「200px」の数値のみを変更します。他の要素は自動で大きさが変わります。また、全体の大きさが「600px」と基準値の3倍になるようになっていますので注意してください。

小数の位に関しては、もう少し細かく設定すべきかもしれませんが恐らくこのぐらいで大丈夫です。