メインビジュアルを作ろう【ポートフォリオ作成】

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#22  メインビジュアルを作ろう【ポートフォリオ作成】

web兄さん

＼SHARE／

１｜HTMLとclass名を書いていこう

おさらい用の記事

aタグのページ内リンクについて

動画内で書いたコード

<!-- メインビジュアル -->
<div class="mainvisual">
    <div class="mainvisual__inner">
        <h1 class="mainvisual__title">My Portfolio<br>Website</h1>
        <p class="mainvisual__copy">企画・デザイン・開発、WEBサイト制作に関わる“すべて”の業務をお任せください。</p>
        <a class="mainvisual__link" href="#works">View Works</a>
    </div>
</div>
<!-- /メインビジュアル -->

現状の確認

以下のような見た目になっていればOKです。

２｜WEBフォントを読み込もう

Noto Sans Japanese – Google Fonts
Montserrat – Google Fonts

font-familyについて

font-familyは文字の種類を指定するプロパティです。

OSごとに使用できるフォントがあり、WindowsとMacでは共通のものもあれば、それぞれのOSでしか表示できないフォントもあります。

そのため、基本的にはどの端末でも同じフォントでの見た目になるように共通のフォントを使用するか、WEBフォントをインストールして同じ種類のフォントを使用することが多いです。

インストールしたフォントはfont-family : 'フォント名'で適用させることができ、「,（カンマ）」で区切ることで複数のフォントを指定することが可能です。

動画内で書いたコード

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Noto+Sans+JP:wght@100;300;400;500;700&display=swap" rel="stylesheet">
    
    <!-- CSS -->
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>
body{
  font-family: 'Noto Sans JP', sans-serif;
}

３｜CSSを書いていこう

動画内で書いたコード

/* -----------------------------
  
  mainvisual

----------------------------- */

.mainvisual {
    /* 背景画像のパス */
    background-image: url(img/mainvisual__bg.jpg);
    /* 背景画像の位置 */
    background-position: center;
}

.mainvisual__inner {
    max-width: 1140px;
    margin: auto;
    padding: 120px 0;
}

.mainvisual__title {
    color: #ffffff;
    font-weight: 700;
    font-size: 80px;
    line-height: 120%; /*文字の1.2個分の行間とする*/
    font-family: "Montserrat", sans-serif;
    margin-bottom: 15px;
}

.mainvisual__copy {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 50px;
}

.mainvisual__link {
    color: #ffffff;
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
    border-radius: 40px;
    border: solid 1px #fff;
    background-color: rgba(255, 255, 255, 0.06);
    padding: 20px 80px;
    display: inline-block; /*blockだと完全にブロック要素になってしまうが、inline-blockならデメリットをなくせる*/
}

一点動画内で間違いがありました

.mainvisual__link（ページ内リンクのボタン）に対して

font-family: "Montserrat", sans-serif;

のフォントの指定することが漏れていました。上記の正解コードには追加してあるので追記をしてください。

動画内で解説したポイントまとめ

  • 背景画像はbackground-imageで読み込み、background-〇〇で背景に関する設定が可能
  • line-height（行間）は文字の〇〇倍（120%）などで設定することが多い
  • 要素の角を丸くする場合はborder-radius
  • 色の透明度をコントロールしたい時はrgbaを使用する
  • インライン要素の特性を保ったままpaddingとmarginを効かせたいならdisplay: inline-block解説説記事はこちら→