インソースマーケティングデザイン
2018.10.17 コーディング
リキッドレイアウト時のデザインの再現性を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);
}
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上で四則演算ができるようになって本当に便利になりました。
対応ブラウザの問題などもまだまだありますが、使えるものは積極的に使って、制作の幅を広げていきたいですね。
以上、虎澤でした。
