今回はサイトコンテンツの最終コンテンツの制作を行います。
では行きましょう！
この記事の目次
このレッスンでの表示目標
完成系デザイン
完成系コード
では完成系のコードです。
HTML
<section id="photo">
<p class="sub-ttl text-center">PHOTO</p>
<h2 class="text-center">写真</h2>
<div class="archive">
<article>
<img src="images/post03.jpg" alt="好きな仲間たちと生きる">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.05</p>
</article>
<article>
<img src="images/post04.jpg" alt="写真好き">
<h3>写真好き</h3>
<p class="date">2022.06.06</p>
</article>
<article>
<img src="images/post05.jpg" alt="ハンモック楽しい">
<h3>ハンモック楽しい</h3>
<p class="date">2022.06.07</p>
</article>
<article>
<img src="images/post06.jpg" alt="インスタ映え">
<h3>インスタ映え</h3>
<p class="date">2022.06.08</p>
</article>
<article>
<img src="images/post07.jpg" alt="日差し強いけどサングラスしない">
<h3>日差し強いけどサングラスしない</h3>
<p class="date">2022.06.09</p>
</article>
<article>
<img src="images/post08.jpg" alt="デザインの勉強は大事">
<h3>デザインの勉強は大事</h3>
<p class="date">2022.06.10</p>
</article>
</div>
<a href="#" class="btn">もっと見る</a>
</section>CSS
.archive{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
article{
width: 30%;
min-width: 227px;
margin: 0 7px 42px;
}
article img{
margin-bottom: 14px;
}
article h3{
margin-bottom: 7px;
}
.btn{
display: block;
width: 200px;
text-align: center;
border: 1px solid #707070;
margin: 60px auto 0;
padding: 13px 0;
}では、分解して解説していきましょう！
３カラム要素の制作
書き始めは前回と同様</main>タグの直前に書き足していきます。
今回のコードを追加する場所です。
左の数字（行数）はもしかしたら違うかもしれませんが、気にしないでください。
ではまず、一番外側のsectionタグと主題と副題を書きます。
<section id="photo">
<p class="sub-ttl text-center">PHOTO</p>
<h2 class="text-center">写真</h2>
</section>実行結果
ここは簡単だと思います。CSSもはじめに使っている共通パーツ用のCSSを適用しているので、追加するCSSもありません。
では、次にarticleタグ部分を説明します。
今までのdisplay: flex;で見てきた時と子要素の数は違いますが基本は同じです。
次に、<div class="archive">の子要素を作ります。少しコードは長くなってしまいますが<article>タグの中身の構造は同じです。
<div class="archive">
<article>
<img src="images/post03.jpg" alt="好きな仲間たちと生きる">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.05</p>
</article>
<article>
<img src="images/post04.jpg" alt="写真好き">
<h3>写真好き</h3>
<p class="date">2022.06.06</p>
</article>
<article>
<img src="images/post05.jpg" alt="ハンモック楽しい">
<h3>ハンモック楽しい</h3>
<p class="date">2022.06.07</p>
</article>
<article>
<img src="images/post06.jpg" alt="インスタ映え">
<h3>インスタ映え</h3>
<p class="date">2022.06.08</p>
</article>
<article>
<img src="images/post07.jpg" alt="日差し強いけどサングラスしない">
<h3>日差し強いけどサングラスしない</h3>
<p class="date">2022.06.09</p>
</article>
<article>
<img src="images/post08.jpg" alt="デザインの勉強は大事">
<h3>デザインの勉強は大事</h3>
<p class="date">2022.06.10</p>
</article>
</div>実行結果はこんな感じですね。
画像が縦に長くなりますので、途中までしか映していません。
では次に横並びにしますので親要素の<div class="archive">にdisplay: flex;を効かせましょう。さらに今回はjustify-content: center;も追加してください。
どうでしょうか横並びになりましたが、全ての子要素が横並びになりましたね。
実行結果
3つずつの横並びにします。
CSSで<div class="archive">にflex-wrap: wrap;を追加してください。
.archive{
display: flex;
justify-content: center;
flex-wrap: wrap; /* 追加されたコード */
}すると、横に3つずつで<article>要素が並ぶようになりました。
実行結果
flex-wrap: wrap;は子要素の幅が親要素の幅を超えたとき、下に回り込みの動きをする。
というものです。難しく考える必要はありません。中のものがいっぱいになったら、下に落ちるという感覚で今は正解です。またflexについては詳しく別記事（制作中）で書きます。
まだ少しデザインと違うので、微調整をしてきます。
以下のCSSを追加してください
article{
width: 30%;
min-width: 227px;
margin: 0 7px 42px;
}
article img{
margin-bottom: 14px;
}
article h3{
margin-bottom: 7px;
}
では、実行結果です
これでいい感じですね！
width: 30%；とmix-width: 227px;について説明します。
width: 30%;は親要素の横幅30%で<article>タグの幅を設定しています。
そしてwidthの最小値をmin-width: 227px;で設定しています。
つまり、横幅は30%だけど、227px以下にはならないでね～。ということになります。
では、今回のレッスンの最後にボタンを作りましょう。
ボタンの作成
※今回のレッスンでは見た目のみの制作になります。実際に別ページへのリンクする機能は付けていません。
ではコードです。
<a href="#" class="btn">もっと見る</a>.btn{
display: block;
width: 200px;
text-align: center;
border: 1px solid #707070;
margin: 60px auto 0;
padding: 13px 0;
}では解説します。
今回のボタンのポイントはdisplay: block;を適用します。
<a>タグは本来インライン要素なので高さと幅は指定できません。
ですがブロック要素へと指定してあげることで色々とデザインが出来るようになります。
さらにmargin: 60px auto 0;も説明しておきます。
marginは上下左右にそれぞれ距離（余白）を作るためのCSSですね。
ファーストビューの制作でも説明したように
ではこれで、サイトのコンテンツ部分は以上になります。
次のレッスンはフッターの制作を行います。
この記事の目次