記述ポイント
- 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する
- スマートフォンでのナビゲーションは、画面いっぱいに押しやすい状態に広げて設定
- 文字を読みやすくサイズ変更
@charset "UTF-8";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
vertical-align: bottom;
}
html {
font-size: 100%;
}
body {
background-color: #fff;
color: #333;
font-size: 1.0rem;
font-family: "Josefin Slab", "Noto Sans JP", sans-serif;
line-height: 1.0;
}
.container {
width: min(90%, 1240px);
margin: 0 auto;
}
.header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background: url(../img/main.webp) no-repeat center top / cover;
background-attachment: fixed;
color: #fff;
font-weight: 700;
text-align: center;
}
.header > .container {
width: 100%;
}
.text_block {
width: 100%;
}
h1 {
width: 100%;
margin-bottom: 30px;
padding-top: 100px;
font-size: 96px;
border-bottom: 1px solid #fff;
}
h2 {
position: relative;
margin-bottom: 30px;
padding-top: 60px;
font-size: 6.0rem;
}
h2::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: block;
width: 60px;
height: 60px;
background: url(../img/point.webp) no-repeat center center;
background-size: contain;
}
.cta {
margin-bottom: 60px;
font-size: 1.75rem;
}
.cta a {
padding: 12px 60px 10px;
border: 1px solid #fff;
color: #fff;
}
.cta a:hover {
background-color: rgba(255,255,255,0.6);
}
@media screen and (max-width: 767px) {
.header {
display: block;
background: url(../img/main.webp) no-repeat 36% top / cover;
}
h1{
width: 100%;
margin-bottom: 0;
padding-top: 40px;
font-size: 2.6rem;
border-bottom: 1px solid #fff;
text-shadow: 0 0 6px #271811;
}
h2{
font-size: 1.5rem;
}
.header p.cta {
margin-bottom: 30px;
}
.header p.cta a{
font-size: 1.5rem;
color: #fff;
border: 1px solid #fff;
padding: 12px 9% 10px;
}
.header p.cta a:hover{
background-color: rgba(255,255,255,0.6);
}
}
.gnav{
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.6);
}
.gnav > ul {
position: relative;
display: flex;
justify-content: center;
}
.gnav li {
font-size: 24px;
font-weight: 700;
}
.gnav a {
display: block;
padding: 10px 20px;
color: #000;
transition: .3s;
}
.gnav a:hover, .gnav a.current{
background-color: rgba(115, 79, 67, 0.7);
color: #fff;
}
@media screen and (max-width: 767px) {
.gnav {
position: static;
background-color: transparent;
}
.gnav >ul {
display: block;
}
.gnav > ul a {
display: block;
padding: 16px 0;
border-bottom: 1px solid #fff;
color: #fff;
}
.gnav li:first-child a {
border-top: 1px solid #fff;
}
}
.main{
padding: 100px 0 30px;
background-color: #fff;
color: #3D272B;
text-align: center;
}
.main h3 {
margin-bottom: 30px;
font-size: 2.25rem;
font-weight: 700;
}
.main img {
margin-bottom: 30px;
}
.main p{
margin-bottom: 30px;
padding: 0 4%;
line-height: 1.7;
text-align: left;
}
@media screen and (max-width: 767px) {
.main{
padding: 40px 0 0;
}
.main h3 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.main p{
font-size: 0.9125rem;
}
}
.footer {
padding: 24px 0;
background-color: #3d272b;
color: #fff;
text-align: center;
}
.footer small {
font-size: 16px;
}
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyStyle</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<header class="header">
<div class="container">
<h1>Hero Header</h1>
<p class="mark"><img src="img/point.png" alt=""></p>
<h2>Welcome to MyStyle</h2>
<p class="cta"><a href="#">Infomation</a></p>
</div>
<nav class="gnav">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main class="main">
<div class="container">
<h3>Hero Header Style</h3>
<img src="img/sub.webp" alt="">
<p>大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。<br>
ランディングページなど注目を集めたいサイトにおすすめです。<br>ヒーローイメージで使用する写真は、サイトのイメージを端的に表すものを使用するよう、心がけましょう。</p>
<ul>
<li><img src="" alt=""></li>
</ul>
</div>
</main>
<footer class="footer">
<p><small>© Hero Header Style</small></p>
</footer>
</body>
</html>
