/*============================================= 我的ベースCSS in 2019 10月後半からちょこちょこ直してるぞ ==============================================*/ * { font-size: 12px; } body { box-sizing: border-box; } h1, h2, h3, h4 { font-weight: normal; } @media screen and (max-width:420px){ * { font-size: 2vh; } body { width: 100vw; } } /*============================================= 共通部分 ==============================================*/ body { background-color: #dcdcdc; text-align: center; } a { color: #4682b4; text-decoration: none; } a:visited{ color: #708090; } a:hover{ text-decoration: underline; } /*背景用画像:1248*400 = 624*200, 25か30%くらいの半透明に*/ header { display: block; height: 200px; width: 624px; border: 1px gray solid; margin: 100px auto 40px; background-size: cover; } /*#hometop0{ background: url(picture-etc/header-illust/hometop23.png) no-repeat center; }*/ #hometop0{ background: url(pic/hometop/hometop23_.png) no-repeat center; } #hometop1{ background: url(pic/hometop/hometop20_.png) no-repeat center; } #hometop2{ background: url(pic/hometop/hometop21_.png) no-repeat center; } #hometop3{ background: url(pic/hometop/hometop22_.png) no-repeat center; } #hometop4{ background: url(pic/hometop/hometop15_.png) no-repeat center; } #hometop5{ background: url(pic/hometop/hometop16_.png) no-repeat center; } #hometop6{ background: url(pic/hometop/hometop17_.png) no-repeat center; } #hometop7{ background: url(pic/hometop/hometop18_.png) no-repeat center; } #hometop8{ background: url(pic/hometop/hometop19_.png) no-repeat center; } #hometop9{ background: url(pic/hometop/20190806_.png) no-repeat center; } /*-------------------------------------------------------------------------------------*/ h1 { font-family: 'Quantico', sans-serif; font-size: 76px; margin: 30px auto -10px; } h1 + small { font-size: 14px; font-family: 'Orbitron','メイリオ', sans-serif; } h3 { margin: 10px auto 20px; padding-top: 0px; font-family: 'Quantico', sans-serif; font-size: 20px; text-align: left; } nav { width: 800px; margin: 36px auto; display: flex; flex-flow: row nowrap; } nav div { font-family: 'Quantico','メイリオ', sans-serif; border-right: 1px solid #a1a1a1; font-size: 12px; padding: 20px 10px;; flex-basis: 20%; } #about li{ /*小文字ギリシア文字*/ list-style: lower-greek; margin-left: -15px; } #work li{ /*いろは*/ list-style: hiragana-iroha; margin-left: -15px; } #gallery li{ /*ヘブライ数字*/ list-style: hebrew; margin-left: -15px; } #links li{ /*アルメニア数字*/ list-style: armenian; margin-left: -15px; } #contact li{ /*グルジア数字*/ list-style: georgian; margin-left: -15px; } footer { text-align: left; font-size: 10px; font-family: 'Quantico', sans-serif; } /*============================================= PC用CSS =============================================*/ @media screen and (min-width: 769px){ } /*(↑PC-CSS↑)============================================*/ /*=============================================== スマホ用CSS(画面横幅~420) ===============================================*/ @media screen and (max-width:420px){ body { margin: 0px} header { width: 100%; box-sizing: border-box; } h1 { font-size: 60px; } header small { padding: 10px; } nav { width: 100%; flex-flow: row wrap; } nav { font-size: 26px; } nav div { flex-basis: 100%; border: 0px; padding: 0px; } nav h3 { font-size: 26px; margin: 10px auto 0px; } nav ul { margin: auto 20px; } nav li * { font-size: 14px; } footer { text-align: center;} #counter { margin-top: 375px; text-align: left; font-size: 10px; font-family: 'Quantico', sans-serif; } } /*----------------------------------------------------------Copyright-FreeInstall(~2019)*/