今回からは、カテゴリー画面を作成していきます。
カテゴリー画面のサンプル画像とソースコード
サンプルサイトのギャラリーにはカテゴリーが3つあります。自然、田舎、神社です。
第4章で作成したギャラリー画面をベースに、ギャラリー画面のソースコードをコピーし、少し変更を加えるだけで簡単に作成できます。
カテゴリーページはどれも構造が同じのため、1つのカテゴリー画面を解説します。
以下、カテゴリー「自然」の画面
サイドメニューの自然をクリックすると遷移するページです。
カテゴリーごとに表示させる画像を制限しているだけのため、簡単に作成可能です。CSSは、ギャラリー画面と同一のものを使用するため、特に追加でCSSを書く必要はありません。
CSSを追加で書きたい場合は書いてください。
以下、カテゴリー「自然」のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="令和's GALLERYのカテゴリー自然の写真が一覧で表示されます。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>令和's GALLERY CATEGORY NATURE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="gallery-header" class="main-image">
<header class="header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.png" alt="ホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="profile.html">PROFILE</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<h2 class="page-title">Gallery</h2>
</div>
</div>
<div class="gallery-contents wrapper">
<div class="wrapper grid">
<div class="item">
<img src="images/fujisan.jpg" alt="">
<p>富士山</p>
</div>
<div class="item">
<img src="images/sakura.jpg" alt="">
<p>桜並木</p>
</div>
</div>
<aside>
<h3 class="sub-title">カテゴリー</h3>
<ul class="sub-menu">
<li><a href="category_nature.html">自然</a></li>
<li><a href="category_countryside.html">田舎</a></li>
<li><a href="category_shrine.html">神社</a></li>
</ul>
<h3 class="sub-title">このGALLERYについて</h3>
<p>
令和に撮影した。美しい日本の風景をGALLERYとしてまとめています。
</p>
</aside>
</div>
<footer>
<div class="wrapper">
<p><small>© reiwasgallery</small></p>
</div>
</footer>
</body>
</html>contentの説明が変わっているのと、gridの画像が自然に該当するものになっています。
<div class="wrapper grid">
<div class="item">
<img src="images/fujisan.jpg" alt="">
<p>富士山</p>
</div>
<div class="item">
<img src="images/sakura.jpg" alt="">
<p>桜並木</p>
</div>
</div>上記の部分を表示させたい画像に変更するだけです。
今回はギャラリーサイトですが、もし日記のサイトにしたい場合は、カテゴリーを「学校」、「部活」、「ゲーム」、「思い出」といった感じに分けて、日記を書いていくこともできます。
自分好みにアレンジしてください。
