Last active
June 21, 2019 04:09
-
-
Save tao-s/39f1a6b7086f2034728d0101fda4abb0 to your computer and use it in GitHub Desktop.
Base setting
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@media screen and (max-width:480px){/* 480pxまではスマホ表示。ここは760pxでも良いと思います */ | |
*{ max-width: 100%; } /* 手抜きのおまじない */ | |
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