-MediaQuery-L1-
-HTML-
GardenHouse
Top
Menu
Access
Map
一押し物件
1階にFlowerShopとCafeがあり、毎日が楽しくなる環境
-CSS-
* { margin: 0; padding: 0; } img { width: 100%; height: 100%; object-fit: cover; } ul { list-style: none; } #wrap { width: 100%; font-family: 'Cormorant Garamond','Noto Serif SC'; } /* header */ header { height: 50vh; background: url(images/headerImg.jpg)no-repeat center 50px / cover; position: relative; } header h1 { line-height: 70px; background: white; text-align: center; font-size: 10vw; } header nav:before { content: "Menu"; display: block; width: 50px; line-height: 50px; border: solid 1px black; border-radius: 50%; text-align: center; font-size: 18px; position: absolute; top: 10px; right: 5px; } header nav ul { display: none; } /* main */ main h2 { padding: 50px 0 10px; text-align: center; font-weight: normal; font-size: 7vw; } main p:first-of-type { width: 98%; margin: 0 auto; max-width: 500px; } main p:last-of-type { padding: 10px 0 30px; text-align: center; font-size: 14px; } /* footer */ footer { padding: 20px 0 5px; background: black; text-align: center; font-size: 14px; color: white; } footer p:first-of-type span { display: block; padding-top: 5px; } /* @media 980px以上 */ @media screen and (min-width:980px) { header { min-height: 500px; background-position: center -5px; } header h1 { padding-top: 15px; text-align: left; font-size: 5vw; } header nav { position: absolute; top: 25px; right: 20px; } header nav:before { display: none; } header nav ul { display: flex; } header nav li { width: 100px; text-align: center; font-size: 30px; } main h2 { font-size: 3vw; } footer p:first-of-type { padding-bottom: 7px; } footer p:first-of-type span { display: inline; } footer p:last-of-type { font-size: 36px; } }