第四弾　コンテンツを作ってみる

2022年11月28日

WEBサイト制作

#HTML
#css

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は第四弾。
以前の記事の続きになります。

◆過去記事はコチラ（第三弾　メインビジュアルを作ってみる）

コンテンツとは

前々々回のおさらいになります。
コンテンツとは、

上記画像の真ん中部分の赤枠でmainと書かれている箇所、メインビジュアルの下の部分です。

さっそくコンテンツをコーディングしていこう！

さて、前回作成したヘッダーとメインビジュアルの記述があるHTMLを開いてみてください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <h1>ロゴ</h1>
        <nav>
            <ul>
                <li><a href="#">リンク1</a></li>
                <li><a href="#">リンク2</a></li>
                <li><a href="#">リンク3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="main-visual">
            <div class="main-visual-text">
                <h2>新たな未来をつなぐ人材をあなたに</h2>
            </div>
            <div class="main-visual-img">
                <img src="./img/mv.jpg" alt="">
            </div>
        </section>
    </main>
</body>
</html>

こんな感じになっていますか？
では、
コンテンツを作りましょう！

＜/section＞の直後に記述を追加してください。

<section class="contents">
    <div class="container">
        <h3>事業紹介</h3>
        <ul class="contents-list">
            <li><a href="#"><img src="./img/contents01.jpg" alt=""><p>人材育成</p></a></li>
            <li><a href="#"><img src="./img/contents02.jpg" alt=""><p>人材派遣</p></a></li>
            <li><a href="#"><img src="./img/contents03.jpg" alt=""><p>ソリューション</p></a></li>
        </ul>
    </div>
</section>

今回はもうタグの説明はいらないですね。
すでに見たことがあるものばかりです。
もし、不安でしたら過去の記事をぜひご参照ください。
◆過去記事はコチラ（第一弾　トップページ（基本骨格）を作ってみる）
◆過去記事はコチラ（第二弾　ヘッダーを作ってみる）
◆過去記事はコチラ（第三弾　メインビジュアルを作ってみる）

また、画像も使用するのでダウンロードしておいてください。
◆画像のダウンロードはコチラ

それではコンテンツのCSSを一気に書いていきましょう！

.contents{
    padding: 120px 0;
}
.container{
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
.contents h3{
    font-weight: bold;
    text-align: center;
    margin: 0 0 20px 0;
    font-size: 30px;
}
.contents-list{
    display: flex;
    justify-content: center;
}
.contents-list li{
    width: calc(100% / 3);
    list-style: none;
    margin: 0 20px 0 0;
}
.contents-list li:last-of-type{
    margin: 0;
}
.contents-list li a{
    transition: 0.4s;
    color: #000;
    text-decoration: none;
    text-align: center;
}
.contents-list li a:hover{
    opacity: 0.7;
}
.contents-list li a img{
    width: 100%;
    max-width: 100%;
}

では一つずつ解説していきます。

.contents{
    padding: 120px 0;
}

セレクタは＜section＞タグに「contents」というclass名をつけたものを指定しています。
・paddingは要素の内側に余白を持たせるプロパティです。
この場合は上下に120px余白を持たせています。

では、次です。

.container{
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

セレクタは＜div＞タグに「container」というclass名をつけたものを指定しています。
・widthは要素の幅を指定するプロパティです。
この場合、画面いっぱいという指定をしてます。
・max-widthは要素の最大幅を指定するプロパティです。
この場合、1000pxが最大の幅ですよと指定しています。
・marginは要素の外側の余白を指定しています。
この場合、autoという値を指定して画面の中央に配置させています。

では、次です。

.contents h3{
    font-weight: bold;
    text-align: center;
    margin: 0 0 20px 0;
    font-size: 30px;
}

セレクタは＜section＞タグに「contents」というclass名をつけたものの＜h3＞タグを指定しています。
・font-weightは文字の太さを指定しています。
この場合、太文字を指定しています。
・text-alignは文字を左寄せ、中央寄せ、右寄せ、いずれかに指定するプロパティです。
この場合、中央寄せにしています。
・marginは要素の外側の余白を指定しています。
この場合、下に余白を待たせています。
・font-sizeは文字の大きさをしてするプロパティです。
この場合、30pxに指定しています。

では、次です。

.contents-list{
    display: flex;
    justify-content: center;
}

セレクタは＜ul＞タグに「contents-list」というclass名をつけたものを指定しています。
・display: flexは要素を横並びにするプロパティです。
この場合、直接の子要素＜li＞を横並びにさせています。
・justify-content: space-betweenはdisplay: flexと連なるプロパティです。
効果はdisplay: flexで括られた要素同士の間隔を指定します。
この場合、中央を基準に寄せて配置する指定をしています。

では、次です。

.contents-list li{
    width: calc(100% / 3);
    list-style: none;
    margin: 0 20px 0 0;
}

セレクタは＜ul＞タグに「contents-list」というclass名をつけたものの子要素の＜li＞を指定しています。
・widthは要素の幅を指定するプロパティです。
ここで初めて出てきました。calc()！
これはcalculationの略で、CSS関数というものです。
どういった機能があるかというと、calc()の()内に計算式を記述すると自動的に計算されてCSSに反映されるといったものです。
例えばこの場合、三つの要素を同じ大きさにしたい時、いちいち電卓で横幅割る要素の数を計算するのは面倒くさいじゃないですか。
なのでcalc()というCSS関数を使って自動的に計算をしてもらうんです。
とても便利なので皆さん積極的に使っていきましょう！
・list-styleは＜li＞要素の装飾を指定するためのプロパティです。
この場合、装飾はいらない設定をしています。
・marginは要素の外側の余白を指定しています。
この場合、下に20pxの余白を指定しています。

では、次です。

.contents-list li:last-of-type{
    margin: 0;
}

:last-of-type・・・見たことのないセレクタが出てきましたね。
これは擬似クラスと呼ばれるもので、要素に対してclass名を設定しなくても、
CSSのセレクタの方で要素を細かく指定することができる機能です。
この場合、三つ並んだ＜li＞タグの最後の要素に対してという意味になります。
これも便利なので、覚えておきましょう！
・marginは要素の外側の余白を指定しています。
この場合、余白はなしにする指定をしています。

では、次です。

.contents-list li a{
    transition: 0.4s;
    color: #000;
    text-decoration: none;
    text-align: center;
}

・transitionは要素が変化をするタイミングや時間、アニメーションを緩急を指定するプロパティです。
この場合、ただ単に0.4秒以内にアニメーションが始まって完了する指定をしています。
・colorは文字色の指定をするプロパティです。
この場合、黒を指定しています。
・text-decorationはテキストの装飾を指定するプロパティです。
この場合、アンカーリンクには自動的に下線がついてしまうので無しにする指定をしています。
・text-alignは文字を左寄せ、中央寄せ、右寄せ、いずれかに指定するプロパティです。
この場合、中央寄せにしています。

では、次です。

.contents-list li a:hover{
    opacity: 0.7;
}

:hover・・・また出てきましたね。知らないセレクタ。
これも擬似クラスと呼ばれるものです。
マウスが指定した要素に乗るとCSSが指定したものに切り替わるという機能があります。
この場合、opacityという透明度を指定するプロパティを記述しているので、
要素の上にマウスのカーソルがある間、要素が70％の濃さになるというものです。

では、次です。

.contents-list li a img{
    width: 100%;
    max-width: 100%;
}

セレクタは＜ul＞タグに「contents-list」というclass名をつけたものの子要素の＜li＞の子要素の＜a＞の子要素の＜img＞を指定しています。
・widthは要素の幅を指定するプロパティです。
この場合、要素の幅いっぱいという指定をしてます。
・max-widthは要素の最大幅を指定するプロパティです。
この場合、要素の幅いっぱいが最大の幅ですよと指定しています。