オンズのロゴ

ちょっとした遊びゴコロを発揮して CSS だけでオンズのロゴマークを作る方法を模索してみました。

もともと比較的簡単な構成のロゴマークなので、それほど難しくはないと思っていましたので、ちょっとハードルを上げるために１つのルールを定めました。
それは「たった１つの div 要素のみで作る」こと。

つまり使える html は <div class="onze"></div> のみで、あとはスタイルシートを駆使して制作することになります。

具体的には疑似セレクタ「:before」と「:after」を利用することになりますね。

以下、実際にできあがったコードを順を追って説明していきます。

.onze {
margin:0 auto;
position:relative;
width:130px;
height:130px;
background-color:#1aa;
border-radius:0 50% 0 50%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

まずはベースになる部分。
「width」と「height」は 130px として、「border-radius」を使って輪郭部分を作りました。
この要素に対して「position:relative;」を指定することを忘れてはいけません。

続いて外側の白い円の輪郭部分です。

.onze:before {
content:"";
width:130px;
height:130px;
position:absolute;
background-color:#1aa;
border:4px solid #fff;
top:-4px;
left:-4px;
border-radius:50%;
	box-sizing:padding-box;
z-index:1;
}

この箇所は「:before」疑似セレクタを使いました。
border:4px solid #fff;として白枠の部分を作り、さらにCSS3から使用可能になったbox-sizing:padding-box;を指定して、ボックスの大きさをカンタンに扱えるようにカスタマイズ。
さらにposition:absolute;で絶対配置にして「top」と「left」をそれぞれ「-4px」と指定して位置を調節します。

単にbox-sizing:border-box;として全体の円の大きさを 130px にしてしまうと、ベース部分とのサイズの兼ね合いで正確なロゴマークにならないので、この方法を選択しました。

最後のステップは中央の白抜きの円の部分です。

.onze:after {
content:"";
display:block;
position:absolute;
top:50%;
left:50%;
width:80px;
height:80px;
margin-top:-40px;
margin-left:-40px;
border-radius:50%;
background-color:#fff;
z-index:2;
}

前項で「:before」を使ったので次は「:after」を使うしかありません。
考え方は前項と同じですが、要素を中央に配置するためにネガティブ・マージンを使います。margin-top:-40px;とmargin-left:-40px;を使用しているのがポイントです。
そして念のためにz-indexで要素の重なり順も指定します。

以上。
完成したものは以下のURLよりご覧ください。

CSS だけで作ったオンズのロゴマーク：サンプル・デモ