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

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

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

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

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


m
r
t
c


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バージョンが↓コチラ〜♪

CodePen Embed Fallback

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