system
虎澤 笑美

2018.10.17HTML/CSS 

フロントエンドエンジニア

虎澤 笑美

リキッドレイアウト時のデザインの再現性をCSSでどうにかする方法

リキッドレイアウト時のハンバーガーメニューのスタイル指定方法
マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

リキッドレイアウトでレスポンシブサイトを制作するとき、毎回頭を悩ますのが、要素の高さ問題。
横幅の%指定のようには融通がきかないので、デザインを再現する際は気を使います。
そんな高さ指定ですが、vwやcalcで指定すれば簡単に調整可能でした。
以下、ハンバーガーメニューのスタイルをリキッドレイアウトにする場合の一例です。

.g_hmbBox{
 width: 13.3vw;
 height: 13.3vw;
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 z-index: 10001;
 background-color: #ccc;
}
.g_hmb{
 width: 8.9vw;
 height: 7.4vw;
 margin: auto;
}
.g_hmb span{
 display: block;
 width: inherit;
 height: 1.6vw;
 background-color: #595757;
 border-radius: 4px;
 position: absolute;
 top: calc(50% – (1.6vw / 2));
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
.g_hmb .g_hmb_top{
 -webkit-transform: translateY(calc((2.9vw) * -1));
 transform: translateY(calc((2.9vw) * -1));
}
.g_hmb .g_hmb_btm{
 -webkit-transform: translateY(calc(2.9vw));
 transform: translateY(calc(2.9vw));
}
.g_hmbBox.js_open{
 position: fixed;
}
.g_hmbBox.js_open .g_hmb_mdl{
 background: rgba(255, 255, 255, 0);
}
.g_hmbBox.js_open .g_hmb_top{
 -webkit-transform: rotate(-45deg) translateY(0px);
 transform: rotate(-45deg) translateY(0px);
}
.g_hmbBox.js_open .g_hmb_btm{
 -webkit-transform: rotate(45deg) translateY(0px);
 transform: rotate(45deg) translateY(0px);
}

上記実際に書くとどうなるかをCode Penで作ってみました。

css上で四則演算ができるようになって本当に便利になりました。
対応ブラウザの問題などもまだまだありますが、使えるものは積極的に使って、制作の幅を広げていきたいですね。

以上、虎澤でした。

ホームページ制作サービスはこちら
ページTOPへ