前回作成したモリクリのロゴですが、スマホで見ると改行が入ってしまいます。
そこで!
レスポンシブ仕様に調整していきたいと思います。
「レスポンシブ」とは、ブラウザサイズによって可変する仕組み。
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対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: ""; 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になるように指定しました。
そして!
完成したレスポンシブ仕様のモリクリロゴが↓こちら!