1.ヘッダーの実装
HTML実装
<header class="header">
<div class="header__wrap">
<h1 class="header__logo">
<img src="./img/logo.png" alt="富士山の紹介">
</h1>
<nav class="header__nav">
<div class="header__nav-item">
<a href="#">TOP</a>
</div>
<div class="header__nav-item">
<a href="#">ABOUT</a>
</div>
<div class="header__nav-item">
<a href="#">INTERVIEW</a>
</div>
<div class="header__nav-item">
<a href="#">GALLERY</a>
</div>
<div class="header__nav-item">
<a href="#">CONTACT</a>
</div>
</nav>
<nav class="header__navsp">
<div class="header__navsp-line header__navsp-line--1"></div>
<div class="header__navsp-line header__navsp-line--2"></div>
<div class="header__navsp-line header__navsp-line--3"></div>
</nav>
</div>
</header>
CSS実装（PC編）
.header {
width: 100%;
background: #e6ecf1;
}
.header__wrap {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
margin: 0 auto;
padding-right: 50px;
padding-left: 50px;
max-width: 1280px;
height: 80px;
}
.header__logo {
width: 220px;
}
.header__logo img {
width: 100%;
}
.header__nav {
display: flex;
}
.header__nav-item {
margin-left: 35px;
}
.header__nav-item a {
font-size: 14px;
letter-spacing: 0.2em;
color: #006a80;
text-decoration: none;
font-weight: bold;
}
.header__navsp {
display: none;
}
PC 実装解説
背景色を width: 100% で敷きたいので.headerで指定します。
.header__wrap では、ロゴとナビゲーションを左右端に配置するために display: flex で justify-content: space-between を指定します。
ロゴとナビゲーションが離れすぎないように、一定のブラウザ幅まで達したら広がりを止めるよう max-width: 1280px とします。
ナビゲーション（.header__nav）も横並びにするので display: flex を指定してください。
CSS実装（スマホ編）
@media all and (max-width: 767px) {
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 100;
}
.header__wrap {
padding-right: 23px;
padding-left: 10px;
height: 50px;
}
.header__logo {
width: 135px;
}
.header__nav {
display: none;
}
.header__navsp {
position: relative;
display: block;
width: 20px;
height: 20px;
}
.header__navsp-line {
position: absolute;
left: 2px;
width: 16px;
height: 1px;
background-color: #006a80;
}
.header__navsp-line--1 {
top: 3px;
}
.header__navsp-line--2 {
top: 9px;
}
.header__navsp-line--3 {
top: 15px;
}
}
スマホ 実装解説
ヘッダーはスマホ時、ブラウザ上部に固定されるので position: fixed; を使います。常に１番上に来るよう z-index も指定しておきましょう。
PCで使ったナビゲーションは使わないので .header__nav を display: none で消します。代わりに .header__navsp でハンバーガーナビを作ります。
2.キービジュアルの実装
キービジュアルの実装は、「2-2. 要素の位置や大きさを変えるレイアウトの実装」でやったデザインと似ています。
HTML実装
<div class="mv">
<div class="mv__wrap">
<div class="mv__texts">
<h2 class="mv__texts-title">日本の世界遺産、富士山</h2>
<p class="mv__texts-p">富士山は、静岡県と山梨県に跨る活火山です。<br>
標高3776.24m、日本最高峰の独立峰で<br>
その優美な風貌は日本国外でも日本の象徴として<br>
広く知られています。</p>
</div>
</div>
</div>
CSS実装（PC編）
.mv {
width: 100%;
height: 780px;
background-image: url(../img/mv.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.mv__wrap {
position: relative;
margin: 0 auto;
max-width: 1280px;
}
.mv__texts {
position: absolute;
top: 115px;
left: 77px;
color: #fff;
}
.mv__texts-title {
font-size: 28px;
letter-spacing: 0.2em;
line-height: 1;
}
.mv__texts-p {
padding-top: 30px;
padding-left: 5px;
font-size: 16px;
letter-spacing: 0.2em;
line-height: 2.25;
}
PC 実装解説
.mv で横幅と高さを決め background で背景を指定します。
background のプロパティの解説は「背景色と背景画像を設定する」を参考にしてみてください。
テキストは .mv__texts で position: absolute を指定します。
今回は left, top をpx指定していますが、%の方がよい場合もあります。デザインに合わせて適宜変えましょう。
CSS実装（スマホ編）
@media all and (max-width: 767px) {
.mv {
width: 100%;
height: 525px;
background-image: url(../img/mv_sp.png);
}
.mv__texts {
position: absolute;
top: 90px;
left: 27px;
color: #fff;
}
.mv__texts-title {
font-size: 20px;
}
.mv__texts-p {
padding-top: 20px;
padding-left: 3px;
font-size: 11px;
line-height: 2;
}
}
スマホ 実装解説
.mv 背景をスマホ用にするため background-image を変えます。
テキストの位置もスマホ用に変更しましょう。
3.ニュースの実装
ニュース部分はPC、スマホで大きなレイアウトの違いはないので難しくないと思います。
HTML実装
<div class="news">
<h3 class="news__title">NEWS</h3>
<div class="news__body">
<div class="news__body-item">
<div class="news__body-item-date">20XX.01.01</div>
<div class="news__body-item-title">20XX年の登山シーズンは終了しました。</div>
</div>
<div class="news__body-item">
<div class="news__body-item-date">20XX.01.01</div>
<div class="news__body-item-title">20XX年の登山シーズンを更新しました。</div>
</div>
<div class="news__body-item">
<div class="news__body-item-date">20XX.01.01</div>
<div class="news__body-item-title">1月の富士山の風景を更新しました。ギャラリーよりご覧いただけます。</div>
</div>
</div>
</div>
CSS実装（PC編）
.news {
box-sizing: border-box;
margin: 0 auto;
padding-top: 79px;
padding-right: 50px;
padding-bottom: 70px;
padding-left: 50px;
max-width: 1280px;
}
.news__title {
font-size: 30px;
letter-spacing: 0.2em;
line-height: 1;
font-weight: bold;
color: #8fc0ca;
}
.news__body {
padding-top: 30px;
}
.news__body-item {
display: flex;
font-size: 14px;
letter-spacing: 0.2em;
line-height: 2.25;
}
.news__body-item-date {
padding-right: 26px;
}
.news__body-item-title {
}
PC 実装解説
.news__body-item に display: flex を指定して、日付とニュースタイトルを横並びにします。
CSS実装（スマホ編）
@media all and (max-width: 767px) {
.news {
padding-top: 50px;
padding-right: 10px;
padding-bottom: 57px;
padding-left: 10px;
}
.news__title {
font-size: 19px;
text-align: center;
}
.news__body {
padding-top: 14px;
}
.news__body-item {
padding-top: 7px;
font-size: 10px;
line-height: 1.8;
}
.news__body-item-date {
padding-right: 21px;
}
}
スマホ 実装解説
見出し（.news__title）を text-align: center で中央寄せにし全体的にマージンや文字サイズを調整しましょう。
