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