Skip to content

Instantly share code, notes, and snippets.

@tao-s tao-s/sp.css
Last active Jun 21, 2019

Embed
What would you like to do?
Base setting
@media screen and (max-width:480px){/* 480pxまではスマホ表示。ここは760pxでも良いと思います */
html,body{
width: 100vw; /* bodyの横幅を画面横幅に指定 */
max-width: 100vw; /* bodyの最大横幅も画面横幅に指定 */
overflow-x: hidden; /* 横にはみ出す部分を非表示に設定 */
font-size: 4vw ; /* お好みで基本文字サイズを設定 */
}
#header,
#container,
#footer_wrap,
#footer,
#copyright,
#leftcolumn,
#one_maincolumn,
#two_maincolumn,
#three_maincolumn,
#rightcolumn
{
width: 100%; /* 横幅を固定で指定しているものをリセット */
}
#container{ /* メインエリアの上部にヘッダー分の余白をとる */
margin-top: 70px;
}
#header_wrap{ /* ヘッダーが常に表示されるように */
height: 70px;
min-height: 70px;
max-height: 70px;
position: fixed;
top:0;
}
#leftcolumn { /* サイドバーをドロワーメニューに */
background-color: #EEE;
position: fixed;
top: 70px;
width: 100vw;
height: 100vh;
overflow-y: scroll;
z-index: 999;
/* ハンバーガーメニューアイコンをクリックした時のアニメーション設定 */
transition: transform 0.2s ease-in;
transform: translate3d( -100%,0,0);
}
#leftcolumn.open{
transform: translate3d( 0,0,0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.