モリクリのロゴをHTMLとCSSだけで作ってみた

ヘッダーにもあるモリクリのロゴ。

「morita create」に含まれるアルファベット小文字の「m」「r」「t」「c」で構成しています。

「シンプルなロゴだし、HTMLとCSSだけで出来るんじゃね？」

安直に考えて、さっそく実行〜♪
HTMLはこんな感じでいいかな？

<ul id="mrtc">
    <li class="m">m</li>
    <li class="r">r</li>
    <li class="t">t</li>
    <li class="c">c</li>
</ul>

liタグの中身の文字は特にいらないけど、コピーできるという特に使い道のない機能を入れ込んでみた。

そもそも、imgタグを使えば1行で済むのに、わざわざこんな事する意味はあるのだろうか？

まずは全体の構成から。

#mrtc {
	margin: 0 auto 1em;
}
#mrtc li {
	display: inline-block; //横並びのブロック要素に
	vertical-align: bottom; //下揃えに
	width: 100px; //横幅
	height: 50px; //高さ
	margin: 0 5px; //文字の間隔
	position: relative; //後々必要に…
	overflow: hidden; //ハミ出した要素を非表示に
	text-indent: -100%; //テキストを隠す
}

ベースのスタイルシートでリセットをかけているので、「list-style: none;」とかは省いてます。

縦横比が1：2なので、とりあえず横幅と高さは計算しやすいサイズにしました。

まずは「m」から。

#mrtc .m {
	border: 2px solid #000; //長方形のブロック要素を作成
	border-bottom: none; //下辺のボーダーを消す
	-webkit-border-top-right-radius: 15px;  //右上を角丸に
	-moz-border-top-right-radius: 15px;
	border-top-right-radius: 15px;
}
#mrtc .m:before {
	content: &amp;quot;&amp;quot;;
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	background: #000;
	width: 2px;
	height: 100%;
	margin-left: -1px;
}

基本は幅2pxの長方形をベースに、変形させていく感じです。
「:before」でliタグに擬似要素をつけて、幅2pxの縦棒を作ってセンターに配置させてます。

#mrtc {
	margin: 0 auto 1em;
}
#mrtc li {
	display: inline-block;
	vertical-align: bottom;
	width: 100px;
	height: 50px;
	margin: 0 5px;
	position: relative;
	overflow: hidden;
	text-indent: -100%;
}
#mrtc .m {
	border: 2px solid #000;
	border-bottom: none;
	-webkit-border-top-right-radius: 15px;
	-moz-border-top-right-radius: 15px;
	border-top-right-radius: 15px;
}
#mrtc .m:before {
	content: &amp;quot;&amp;quot;;
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	background: #000;
	width: 2px;
	height: 100%;
	margin-left: -1px;
}
#mrtc .r {
	border: 2px solid #000;
	border-right: none;
	border-bottom: none;
	-webkit-border-top-left-radius: 15px;
	-moz-border-top-left-radius: 15px;
	border-top-left-radius: 15px;
}
#mrtc .t {
	background: #c00;
	width: 104px;
	height: 104px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-tradius: 50%;
}
#mrtc .t:before {
	content: &amp;quot;&amp;quot;;
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	background: #fff;
	width: 2px;
	height: 100%;
	margin-left: -1px;
}
#mrtc .t:after {
	content: &amp;quot;&amp;quot;;
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	background: #fff;
	width: 100%;
	height: 2px;
	margin-top: -1px;
}
#mrtc .c {
	border: 2px solid #000;
	border-right: none;
	-webkit-border-top-left-radius: 15px;
	-moz-border-top-left-radius: 15px;
	border-top-left-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-bottom-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

そして完成したモリクリロゴCSSバージョンが↓コチラ〜♪

実はこのロゴ、三代目なんだけど、それはまた別の機会で！