第三弾　メインビジュアルを作ってみる

2022年11月15日

WEBサイト制作

#HTML
#css
#tips

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

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

◆過去記事はコチラ（第二弾　ヘッダーを作ってみる）

メインビジュアルとは

前々回のおさらいになります。
メインビジュアルとは、

上記画像の真ん中部分の赤枠でmainと書かれている箇所の上の箇所です。

さっそくメインビジュアルをコーディングしていこう！

さて、前回作成したヘッダーの記述があるHTMLを開いてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</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>
</body>
</html>

こんな感じになってますでしょうか。
では、
MV（メインビジュアル）を作りましょう！

メインビジュアル

記事をご覧になっているみなさん、おそらく普段からよくインターネットを使っているかと思います。
その際、よくみているWEBサイトにアクセスしてすぐ大きいサイズの文字、もしくは目立つ画像やイメージが表示されませんか？
それがMV（メインビジュアル）です。
会社によってはFV（ファーストビュー）やKV（キービジュアル）と呼ぶところもあります。
はじめにWEBサイトに訪れたユーザーに対して、強烈なメッセージと印象を持たせるための箇所になります。

HTMLを書いてみましょう。
＜/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>

では、タグの意味を解説していきましょう。

<main></main>

これはメインタグと言って、主にheaderとfooter以外のメインのコンテンツを記載する箇所を表します。
そのほかにもsidebarという箇所もありますが、
サイトの構成によってsidebarがないものもあるので、
今回は説明を省かせてもらいます。

<section></section>

これはセクションタグと言って、文書の指定した部分が１つのセクション、意味的な1つのまとまりであることを表すタグです。
今後よく使うので、覚えて置いてください。

<div></div>

これはディブタグと言って、なんの意味もないタグです。
が最も万能なタグと言っていいです。
コーダー自身で自由に名前をつけて要素を囲んでもいいタグです。
一番使用頻度が高いタグなのでマストで覚えましょう。

<img src="./img/mv.jpg" alt="">

これはイメージタグと言って、画像を読み込むためのタグです。
この場合、imgフォルダの中のmv.jpgという画像を読み込んでます。

では次に、CSSの解説していきます。
ちなみに下記リンクでclassとidについて記事を書いています！
ぜひご覧ください！

◆過去記事はコチラ（classとidとは）

またこの箇所から画像を使うので下記リンクからダウンロードしておいてください。
◆画像のダウンロードはコチラ

それではメインビジュアルのCSSを一気に書いていきましょう！

.main-visual{
    position: relative;
}
.main-visual-text{
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
}
.main-visual-text h2{
    font-weight: bold;
    color: #000;
    font-size: 36px;
    padding: 10px;
    background-color: #fff;
}
.main-visual-img img{
    width: 100%;
    max-width: 100%;
}

セレクタは＜section＞タグに「main-visual」というclass名をつけたものになります。
それに対してCSSを適用させています。
・positionとは要素の位置を強制的に指定するためのプロパティです。
値にrelativeと入っていますが、これは「相対的」という意味です。
簡単に説明すると直接の子要素の位置を強制的に指定するためのプロパティです。

では、次です。

.main-visual-text{
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
}

セレクタは＜div＞タグに「main-visual-text」というclass名をつけたものを指定しています。
・position: absoluteは先ほど指定したrelativeの直接の子要素の位置を指定するものです。
ちなみにabsoluteは「絶対的」という意味です。
・left: 100pxはpositionプロパティに紐付くもので、
この場合、親要素のmain-visualの一番左から100pxの位置と意味です。
・top: 50%はpositionプロパティに紐付くもので、
この場合、親要素のmain-visualの一番上からちょうど中央に位置する箇所という意味です。
・transform: translateY(-50%)は、これは完全にtipsでpositionプロパティを使って親要素内のちょうど中央に子要素を配置したい時に使用します。
上下中央に配置したいのなら、top: 50%とtransform: translateY(-50%)を組み合わせましょう。
左右中央に配置したいのなら、left: 50%とtransform: translateX(-50%)を組み合わせましょう。

では、次です。

.main-visual-text h2{
    font-weight: bold;
    color: #000;
    font-size: 36px;
    padding: 10px;
    background-color: #fff;
}

セレクタは＜div＞タグに「main-visual-text」というclass名をつけたものの直接の子要素＜h２＞です。
・font-weight: boldは文字を太文字にしています。
・color: #000は文字色を黒にしています。
・font-size: 36pxは文字のサイズを36pにしています。
・padding: 10pxは要素の内側の余白を10px持たせています。
・background-color: #fffは背景色の色を白にしています。

.main-visual-img img{
    width: 100%;
    max-width: 100%;
}

セレクタは＜section＞タグに「main-visual-img」というclass名をつけたものの直接の子要素＜img＞です。
・width: 100%は親要素の幅いっぱいに画像の幅を指定しています。
・max-width: 100%は最大幅を指定しています。この場合、親要素の幅いっぱいまで画像の幅広げることができるという指定です。

これでメインビジュアル完成ですね！
ブラウザを更新して確認してみてください！

ちなみにどういうHTML構成になっているか、
視覚化するとこんな感じです。