【HTML/CSS入門講座】4章.ギャラリー画面作成

HTML/CSS入門レッスン
2023.10.10

☜前の章へ　3.ホーム画面作成(2)

☞次の章へ　５.カテゴリー画面作成

【HTML/CSS入門講座】は全8章から構成される、初心者向けのJava学習コンテンツです。1章から8章まで学習して頂くことでHTML/CSSの基礎を学習することができます。

今回からは、ギャラリー画面を作成していきます。

ギャラリー画面のサンプル画像とソースコード

まずは、サンプル画面とソースコードを確認しましょう。

以下、新しく追加するギャラリー画面。
ページ右上の「GALLERY」をクリックすると遷移するページです。

以下、ギャラリー画面のHTMＬ。

<!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</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/tanbo.JPG" alt="">
                    <p>田んぼ</p>
                </div>
                <div class="item">
                    <img src="images/okinawa.jpg" alt="">
                    <p>沖縄</p>
                </div>
                <div class="item">
                    <img src="images/hanabi.jpg" alt="">
                    <p>花火</p>
                </div>
                <div class="item">
                    <img src="images/jinja.jpg" alt="">
                    <p>神社</p>
                </div>
                <div class="item">
                    <img src="images/sessya.jpg" alt="">
                    <p>摂社</p>
                </div>
                <div class="item">
                    <img src="images/komorebi.jpg" alt="">
                    <p>木漏れ日</p>
                </div>
                <div class="item">
                    <img src="images/gero.jpg" alt="">
                    <p>下呂</p>
                </div>
                <div class="item">
                    <img src="images/densensora.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>

以下、新規で追加するCSS

#gallery-header {
    background-image: url(../images/main-image.jpg);
    min-height: 30vh;
    margin-bottom: 50px;
}

#gallery-header .page-title {
    color: white;
    text-align: center;
    text-transform: none;
}

.gallery-contents {
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
    margin-bottom: 50px;
}

.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6px;
    margin-bottom: 50px;
    width: 70%;
}

.item p {
    border-bottom: 1px rgb(173, 54, 54) solid;
}

.item img {
    max-width:100%;
    height:300px;
}

/* サイドバー */
aside {
    width: 30%;
}

aside p {
    padding: 12px 10px;
}

.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px brown solid;
    font-weight: normal;
}

.sub-menu {
    margin-bottom: 60px;
    list-style: none;
}

.sub-menu li {
    border-bottom: 1px gray solid;
}

.sub-menu a {
    padding: 10px;
    display: block;
    color: black;
}

.sub-menu a:hover {
    color: orange;
}

以下、前回までのCSSと今回追加するCSSを繋げたソースコード

@charset "UTF-8";

/* 共通開始 */
html {
    font-size: 100%;
}

body {
    font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic Pro W3", sans-serif;
    line-height: 2;
    background-color: khaki; 
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 見出し */
.page-title {
    font-family: serif;
    font-size:  2.8rem;
    font-weight: normal;
}

/* 背景画像 */
/* ホーム */
#home {
    background-image: url(../images/main-image.jpg);
    min-height: 100vh;
}

#home .page-title {
    text-transform: none;
}

/* ホーム以外 */
#gallery-header {
    background-image: url(../images/main-image.jpg);
    min-height: 30vh;
    margin-bottom: 50px;
}

#gallery-header .page-title {
    color: white;
    text-align: center;
    text-transform: none;
}

.main-image {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
/* 共通終了 */

/* ホーム開始 */
/* ヘッダー */
.header {
    display: flex;
    justify-content: space-between;
}

.logo {
    width: 250px;
    margin-top: 5px;
}

.main-nav {
    display: flex;
    margin-top: 35px;
    margin-right: 40px;
    list-style: none;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.main-nav li {
    margin-left: 35px;
}

.main-nav a {
    color: white;
}

.main-nav a:hover {
    color: yellow;
}

/* コンテンツ全体 */
.home-content {
    margin-top: 10%;
    text-align: center;
    color: white;
}

.home-content p {
    font-size: 1.4rem;
}
/* ホーム終了 */

/* ギャラリー開始 */
/* コンテンツ部分 */
.gallery-contents {
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
    margin-bottom: 50px;
}

.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6px;
    margin-bottom: 50px;
    width: 70%;
}

.item p {
    border-bottom: 1px rgb(173, 54, 54) solid;
}

.item img {
    max-width:100%;
    height:300px;
}

/* サイドバー */
aside {
    width: 30%;
}

aside p {
    padding: 12px 10px;
}

.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px brown solid;
    font-weight: normal;
}

.sub-menu {
    margin-bottom: 60px;
    list-style: none;
}

.sub-menu li {
    border-bottom: 1px gray solid;
}

.sub-menu a {
    padding: 10px;
    display: block;
    color: black;
}

.sub-menu a:hover {
    color: orange;
}
/* ギャラリー終了 */

ソースコードの解説(HTML)

【HTML】ヘッダー部分作成

【HTML】<head></head>

前回までに作成した、ソースコードとほとんど同じです。
「<meta name=”description” content=”令和’s GALLERYの写真が一覧で表示されます。”>」ページの説明が変更されています。

【HTML】ギャラリー部分作成

【HTML】<body></body>

【HTML】<div class=”gallery-contents wrapper”></div>

新しく追加された要素です。このdivには、写真の部分とサイドメニューの部分の2つの要素があります。

【HTML】<div class=”wrapper grid”></div>
<div class="wrapper grid">
    <div class="item">
        <img src="images/ishidan.jpg" alt="">
        <p>石段</p>
    </div>
    <div class="item">
        <img src="images/fushimi-inari.jpg" alt="">
        <p>伏見稲荷</p>
    </div>
    <div class="item">
        <img src="images/fujisan.jpg" alt="">
        <p>富士山</p>
    </div>
    <div class="item">
        <img src="images/okinawa-machi.jpg" alt="">
        <p>沖縄の街</p>
    </div>
    <div class="item">
        <img src="images/sirakawago.jpg" alt="">
        <p>白川郷</p>
    </div>
    <div class="item">
        <img src="images/sakura.jpg" alt="">
        <p>桜並木</p>
    </div>
    <div class="item">
        <img src="images/temizuya.jpg" alt="">
        <p>手水舎</p>
    </div>
    <div class="item">
        <img src="images/densya.jpg" alt="">
        <p>電車</p>
    </div>
</div>

この部分が写真を表示しています。<div class=”wrapper grid”></div>の中に、写真を表示する<div class=”item”></div>を1つずつ入れています。CSSで位置などを整えます。

【HTML】サイドメニュー部分作成

【HTML】<aside></aside>
<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>

この部分がサイドメニューを表示しています。

以下、CSSを書いていない場合の画像です。

画像やサイドメニューが縦並びになっています。

ソースコードの解説(CSS)

【CSS】ヘッダー部分装飾

以下、CSSのないギャラリー画面のヘッダー部分です。

以下のCSSを追加します。

#gallery-header {
    background-image: url(../images/main-image.jpg);
    min-height: 30vh;
    margin-bottom: 50px;
}

#gallery-header .page-title {
    color: white;
    text-align: center;
    text-transform: none;
}

背景画像は「index.html」で使用していたものと同じです。「index.html」では、min-height: 100vh;でしたが、他のページでは画面の30%に表示されるようにしています。

以下、CSS適用後の画面

【CSS】ギャラリー部分装飾

.gallery-contents {
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
    margin-bottom: 50px;
}

.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6px;
    margin-bottom: 50px;
    width: 70%;
}

.item p {
    border-bottom: 1px rgb(173, 54, 54) solid;
}

.item img {
    max-width:100%;
    height:300px;
}

【CSS】.gallery-contents

【CSS】display: flex;

ギャラリーとサイドメニューが横に並ぶようにしています。

【CSS】.grid

【CSS】display: grid;

display: grid;とすることで、格子状のレイアウト(グリッドコンテナ)を作ることができます。今回は、画像(グリッドアイテム)が2枚横並びの格子状に表示されるようにします。格子状のレイアウトを構成する要素、今回は画像のことをグリッドアイテムと言います。

【CSS】gap: 26px;

gapは、グリッドアイテム間の間隔を指定します。ここでは、アイテム間の水平および垂直の間隔が26ピクセルに設定されています。

【CSS】grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

グリッドの列のサイズを指定しています。repeatは列のパターンを繰り返し指定する際に使用します。auto-fitは、可能な限り多くの列を作成します。240pxは最小幅を表します。1fr(1フラクション)は、最大幅を表しています。1frとすると、利用可能なスペースに応じて伸縮して表示されます。

【CSS】.item p

【CSS】border-bottom
border-bottom: 1px rgb(173, 54, 54) solid;

1pxは、線の太さです。rgb(173, 54, 54)は、赤・緑・青の割合を数字で指定しています。solidは、1本線を表しています。

以下、CSSを適用した画面になります

【CSS】サイドメニュー部分装飾

aside {
    width: 30%;
}

aside p {
    padding: 12px 10px;
}

.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px brown solid;
    font-weight: normal;
}

.sub-menu {
    margin-bottom: 60px;
    list-style: none;
}

.sub-menu li {
    border-bottom: 1px gray solid;
}

.sub-menu a {
    padding: 10px;
    display: block;
    color: black;
}

.sub-menu a:hover {
    color: orange;
}

基本的には、「index.html」で学んだものを使用しています。実際に、ソースコードを入力して、動きを確認してみましょう。

【CSS】.sub-menu a

【CSS】display: block;

display: block;とすると親要素の幅一杯に子要素の幅が広がります。また、高さや、余白を指定することができます。

以下、ブロックになっているのが、自然や田舎と表示されている部分になります。左側に余白があるのは、list-style: none;として、・を消していますが、paddingが消えていないためです。好みに合わせて、paddingを消しても良いです。消したい場合は、.sub-menu{}内でpadding: 0;としてください。

☜前の章へ　3.ホーム画面作成(2)

☞次の章へ　５.カテゴリー画面作成

タイトルとURLをコピーしました