前回作成したモリクリのロゴですが、スマホで見ると改行が入ってしまいます。
そこで！
レスポンシブ仕様に調整していきたいと思います。
「レスポンシブ」とは、ブラウザサイズによって可変する仕組み。
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: "";
display: block;
padding-top: 12.5%; //mrcの上部に余白を付ける
}
#mrtc li {
float: left; //左揃えの横並びにする
display: block; //ブロック要素にする
width: 23%; //横幅をパーセント指定
margin: 0 1%; //間隔をパーセント指定
position: relative; //相対位置指定
}
#mrtc li:before {
content: "";
display: block; //ブロック要素に
padding-top: 50%; //擬似要素でliの高さを指定
}
#mrtc span {
position: absolute; //絶対位置指定
top: 0; //上部の位置
right: 0; //右部の位置
bottom: 0; //下部の位置
left: 0; //左部の位置
display: block; //ブロック要素に
}
このCSSを見ればわかるように、アスペクト比を固定するための擬似要素をliタグに使う必要があるため、spanタグを追記しました。
2対１に固定された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: "";
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: "";
position: absolute;
top: 0;
left: 50%;
display: block;
background: #fff;
width: 2px;
height: 100%;
margin-left: -1px;
}
#mrtc .t span:after {
content: "";
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になるように指定しました。
そして！
完成したレスポンシブ仕様のモリクリロゴが↓こちら！