モリクリのロゴをHTMLとCSSだけで作ってみた【レスポンシブ編】

前回作成したモリクリのロゴですが、スマホで見ると改行が入ってしまいます。

そこで!
レスポンシブ仕様に調整していきたいと思います。

「レスポンシブ」とは、ブラウザサイズによって可変する仕組み。
CSSに記述するサイズなどは、「ピクセル指定」はせずに「パーセント指定」にするのが基本です。

今回のHTMLは、前回からちょっと改良を加えて、spanタグをはさみました。

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

これは、liタグをアスペクト比固定のボックスにして、spanタグで文字を構成するためです。
追記した要素にコメントしておきます。

#mrtc {
	margin: auto;
	overflow: hidden;
}
#mrtc:before {
	content: &quot;&quot;;
	display: block;
	padding-top: 12.5%; //mrcの上部に余白を付ける
}
#mrtc li {
	float: left; //左揃えの横並びにする
	display: block; //ブロック要素にする
	width: 23%; //横幅をパーセント指定
	margin: 0 1%; //間隔をパーセント指定
	position: relative; //相対位置指定
}
#mrtc li:before {
	content: &quot;&quot;;
	display: block; //ブロック要素に
	padding-top: 50%; //擬似要素でliの高さを指定
}
#mrtc span {
	position: absolute; //絶対位置指定
	top: 0; //上部の位置
	right: 0; //右部の位置
	bottom: 0; //下部の位置
	left: 0; //左部の位置
	display: block; //ブロック要素に
}

このCSSを見ればわかるように、アスペクト比を固定するための擬似要素をliタグに使う必要があるため、spanタグを追記しました。
2対1に固定されたliタグにspanタグを絶対位置指定することで、同様にアスペクト比が固定されます。

続いて文字要素です。

#mrtc .m span {
	border: 2px solid #000;
	border-bottom: none;
	-webkit-border-top-right-radius: 10% 20%;
	-moz-border-top-right-radius: 10% 20%;
	border-top-right-radius: 10% 20%;
}
#mrtc .m span:before {
	content: &quot;&quot;;
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	background: #000;
	width: 2px;
	height: 100%;
	margin-left: -1px;
}
#mrtc .r span {
	border: 2px solid #000;
	border-right: none;
	border-bottom: none;
	-webkit-border-top-left-radius: 10% 20%;
	-moz-border-top-left-radius: 10% 20%;
	border-top-left-radius: 10% 20%;
}
#mrtc .t span {
	background: #c00;
	width: 100%;
	height: 200%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-tradius: 50%;
	margin-top: -50%;
}
#mrtc .t span:before {
	content: &quot;&quot;;
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	background: #fff;
	width: 2px;
	height: 100%;
	margin-left: -1px;
}
#mrtc .t span:after {
	content: &quot;&quot;;
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	background: #fff;
	width: 100%;
	height: 2px;
	margin-top: -1px;
}
#mrtc .c span {
	border: 2px solid #000;
	border-right: none;
	-webkit-border-top-left-radius: 10% 20%;
	-moz-border-top-left-radius: 10% 20%;
	border-top-left-radius: 10% 20%;
	-webkit-border-bottom-left-radius: 10% 20%;
	-moz-border-bottom-left-radius: 10% 20%;
	border-bottom-left-radius: 10% 20%;
}

前回からほとんど変わっていませんが、spanを追記したのに加え、角丸をパーセント指定にしてあります。
これで、ブラウザの横幅が変わっても、角丸のサイズ感はそのままになります。

これで、可変するロゴは完成!

しかし!

スマホサイズで見ると、線幅が太い気が…。
逆に大きいサイズのブラウザで見ると細すぎる気がしますね…。

そこで!

ブラウザの横幅に応じてスタイルシートを再定義させる、レスポンシブデザインには欠かせない魔法の呪文「メディアクエリ」の登場です。

@media screen and (min-width:560px){
	#mrtc li span {
		border-width: 3px !important;
	}
	#mrtc .m span:before,
	#mrtc .t span:before {
		width: 3px;
	}
	#mrtc .t span:after {
		height: 3px;
	}
}
@media screen and (max-width:320px){
	#mrtc li span {
		border-width: 1px !important;
	}
	#mrtc .m span:before,
	#mrtc .t span:before {
		width: 1px;
	}
	#mrtc .t span:after {
		height: 1px;
	}
}

ブラウザの横幅が560px以上だと、線幅が3pxになるように指定し、iPhone4くらいのサイズだと1pxになるように指定しました。

そして!

完成したレスポンシブ仕様のモリクリロゴが↓こちら!