Web白描

Webデザインの勉強 - 演習課題

提出サイトのサムネイル作成

★実践演習

提出サイトのサムネイル作成

  • 幅「800px」高さ「800px」の画像を作成
ウェブページ全体をスクリーンショット - FireShot

使用可能な状態にする

  • ピンをブラウザのオプションバーに表示するために「ピンを有効化」する

スクリーンショットを作る
  1. ページをプレビューする
  2. FireShot「ページ全体をキャプチャ」をクリック

  • 「画像として保存」を選択して、管理可能な場所に保存する
Photoshopでトリミング
  • サムネイルとして使いたい部分を「切り抜きツール」で切り抜いておく（このときサイズ指定は不要）

  • 切り抜いたあとでの、修正は加えないでそのまま使用します

Photoshopで画像サイズを変更する
  • 「イメージ」メニュー → 「画像解像度」

  • 幅を「800px」にする（切り抜きツールで正方形に切り抜いた場合は、高さも自動的に800pxになります）

スクリーンショットの幅を800pxに設定する場合
  • 画像幅を「画像解像度」で「800px」にする

  • 「カンバスサイズ」で必要なサイズに切り抜く

拡張子「.webp」に変換

squoosh.app

課題 - 提出サイト制作

★実践演習

提出サイト制作

  • 番号のついている課題は、以下のようにアップロード時点でサムネイルをクリックしたら閲覧可能な状態にする
  • この段階では、シンプルなデザインで進めます
  • まだ完成していない課題は、ダミーを入れておきます
ダミー画像

placehold.jp

フォルダー構造

  • この構造は検索対象にしたくないため「robots.txt」を作成し、以下のように記述します
User-Agent: *
Disallow: /
完成例

コーディング例
  • 「update.js」の内容は、JavaScriptの授業内で記述します
  • レイアウトは、「display: grid;」で設定

Google Fonts

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>●●の課題サイト</title>
<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:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/update.js" defer></script>
</head>
<body>

<!-- ▼header -->
<header class="header">
  <h1>●●の課題サイト</h1>
</header>
<!-- ▲header -->

<!-- ▼main -->
<main class="main">
  <div class="container">
    <section class="web_site">
      <h2>Webサイト制作課題</h2>
      <ul class="works">
        <li>
          <a href="01_spain/index.html">
            <h3>01 スペイン観光ガイド</h3>
            <img src="img/01.webp" alt="01 スペイン観光ガイド">
          </a>
        </li>
        <li>
          <a href="02_portfolio/index.html">
            <h3>02 ポートフォリオ</h3>
            <img src="img/02.webp" alt="02 ポートフォリオ">
          </a>
        </li>
        <li>
          <a href="03_recipe/index.html">
            <h3>03 Recipe</h3>
            <img src="img/03.webp" alt="03 Recipe">
          </a>
        </li>
        <li>
          <a href="04_news/index.html">
            <h3>04 NEWS</h3>
            <img src="img/04.webp" alt="04 NEWS">
          </a>
        </li>
        <li>
          <a href="05_sightseeing/index.html">
            <h3>05 スペインの魅力</h3>
            <img src="img/05.webp" alt="05 スペインの魅力">
          </a>
        </li>
        <li>
          <a href="06_vegetables/index.html">
            <h3>06 旬の野菜便</h3>
            <img src="img/06.webp" alt="06 旬の野菜便">
          </a>
        </li>
        <li>
          <a href="07_girly/index.html">
            <h3>07 GIRLY STYLE</h3>
            <img src="img/07.webp" alt="07 GIRLY STYLE">
          </a>
        </li>
        <li>
          <a href="08_foodie/index.html">
            <h3>08 宅配料理</h3>
            <img src="img/08.webp" alt="08 宅配料理">
          </a>
        </li>
        <li>
          <a href="09_design/index.html">
            <h3>09 The Web Design</h3>
            <img src="img/09.webp" alt="09 The Web Design">
          </a>
        </li>
        <li>
          <a href="09_design/index.html">
            <h3>10 MyStyle</h3>
            <img src="img/10.webp" alt="10 MyStyle">
          </a>
        </li>
        <li>
          <a href="11_flowerCefe/index.html">
            <h3>11 Flower Coffee</h3>
            <img src="img/11.webp" alt="11 Flower Coffee">
          </a>
        </li>
        <li>
          <a href="xxx/index.html">
            <h3>12 xxxx</h3>
            <img src="https://placehold.jp/800x800.png" alt="10 MyStyle">
          </a>
        </li>
      </ul>
    </section>
  </div><!-- /.container -->
</main>
<!-- ▲main -->

<!-- ▼footer -->
<footer class="footer">
  <p id="update">更新日：xxxx年x月x日</p>
</footer>
<!-- ▲footer -->
 
</body>
</html>

@charset "UTF-8";

/* -------------------------------------------
  reset
------------------------------------------- */
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* -------------------------------------------
  body
------------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  line-height: 1.7;
}

/* -------------------------------------------
  layout
------------------------------------------- */
.container {
  width: min(90%, 1240px);
  margin: 0 auto;
}

/* -------------------------------------------
  header
------------------------------------------- */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  padding: 20px 0;
  background-color: #5880a3;
  color: #fff;
}
  h1 {
    font-size: 24px;
  }

/* -------------------------------------------
  main
------------------------------------------- */
.web_site h2 {
  position: relative;
  margin-bottom: 10px;
  padding-left: 50px;
}
  .web_site h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    height: 2px;
    width: 40px;
    display: inline-block;
    background-color: #5880a3;
  }
.works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
  .works li {
    padding: 10px 20px 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ccc;
  }
  .works h3 {
    margin-bottom: 10px;
  }

/* -------------------------------------------
  footer
------------------------------------------- */
.footer {
  padding: 10px;
  background-color: #000;
  color: #fff;
  text-align: center;
}

課題12 - IKECODE

IKECODE

  • formの練習

unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com

テキスト
IKECODE

ABOUT
WORKS
NEWS
CONTACT

About
IKECODE株式会社
Web制作会社として設立
Webサイト・アプリ開発を承ります
メールアドレス：ikecode@sample.com
Webサイト制作やアプリ開発を得意としています。また、新人の育成をしたい企業も募集しております。

Works

work1
work2
work3
work4
work5
work6
work7
work8
work9

News
2024/10/23
YouTubeチャンネルを開始しました。【チャンネル登録】よろしくお願いいたします。
2024/8/19
新しい記事の更新をしました。
2024/4/4
新しい記事の更新をしました。
2024/2/17
IKECODEが、Webサイトを公開しました。

Contact
お問い合わせは以下のフォームから

お名前
田中　景子
メールアドレス
tanaka@gmail.com
内容
お問合せ内容をお書きください。

© IKECODE
ワイヤーフレーム

作成のポイント

Google Fonts

min()関数

  • 最小値を基準とする
  • min()関数を選定すると、ブラウザは値(92%, 960px)の中で最も小さい値を選択
  • つまりスマートフォンでの最小値は「92％」、PCでの最小値は「960px」が適用されます

「width」と「margin: auto」はセットで記述

  • 「h1」と「nav」の関係
  • 「h1」は、文字サイズに合わせて幅が変更可能な値にする「width: fit-content;」

repeat()関数

  • 同じ幅を繰り返して並べる「カード型レイアウト」では、「display: grid;」を設定する
  • 「grid-template-column」プロパティは、gridレイアウトで横方向に何個並べるかを指定する
  • 「repeat()」関数はcssのGridレイアウトにおいて、値の繰り返しを表します
  • 「auto-fit」は、横幅に入るだけ配置するという意味
  • カードのレイアウトの幅を、「minmax(最小値, 最大値);」で指定する

文字幅の単位

  • ◯文字分で設定する
  • １文字の単位は「rem（root + em）」≒ 16px

子要素の指定

完成例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【コーディング練習】IKRCODE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.ico">

<!-- 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=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header -->
<header class="header">
  <div class="container">
    <h1 class="site-title"><a href="#">IKECODE</a></h1>
    <nav class="gnav">
      <ul>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#works">WORKS</a></li>
        <li><a href="#news">NEWS</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </nav>
  </div><!-- /.container -->
</header>
<!-- /header -->

<!-- main -->
<main class="main">
  <div class="main_visual">
    <img src="img/main_pc.webp" alt="">
  </div><!-- /.main_visual -->
  <div class="container">
    <!-- about -->
    <section id="about" class="sec_block">
      <h2>About</h2>
      <ul>
        <li>IKECODE株式会社</li>
        <li>Web制作会社として設立</li>
        <li>Webサイト・アプリ開発を承ります</li>
        <li>メールアドレス：ikecode@sample.com</li>
      </ul>
      <p>
        Webサイト制作やアプリ開発を得意としています。また、新人の育成をしたい企業も募集しております。
      </p>
    </section>
    <!-- works -->
    <section id="works" class="sec_block">
      <h2>Works</h2>
      <ul>
        <li><img src="img/works1.webp" alt="work1"></li>
        <li><img src="img/works2.webp" alt="work2"></li>
        <li><img src="img/works3.webp" alt="work3"></li>
        <li><img src="img/works4.webp" alt="work4"></li>
        <li><img src="img/works5.webp" alt="work5"></li>
        <li><img src="img/works6.webp" alt="work6"></li>
        <li><img src="img/works7.webp" alt="work7"></li>
        <li><img src="img/works8.webp" alt="work8"></li>
        <li><img src="img/works9.webp" alt="work9"></li>
      </ul>
    </section>
    <!-- news -->
    <section id="news" class="sec_block">
      <h2>News</h2>
      <dl>
        <dt>2024/10/23</dt>
        <dd>YouTubeチャンネルを開始しました。【チャンネル登録】よろしくお願いいたします。</dd>
        <dt>2024/8/19</dt>
        <dd>新しい記事の更新をしました。</dd>
        <dt>2024/4/4</dt>
        <dd>新しい記事の更新をしました。</dd>
        <dt>2024/2/17</dt>
        <dd>IKECODEが、Webサイトを公開しました。</dd>
      </dl>
    </section>
    <!-- contact -->
    <section id="contact" class="sec_block">
      <h2 class="sec-title">Contact</h2>
      <p>お問い合わせは以下のフォームから</p>
      <form action="#" method="post">
        <dl>
          <dt><label for="name">お名前</label></dt>
          <dd><input type="text" id="name" required placeholder="田中　景子"></dd>
          <dt><label for="email">メールアドレス</label></dt>
          <dd><input type="email" id="email" required placeholder="tanaka@gmail.com"></dd>
          <dt><label for="content">内容</label></dt>
          <dd><textarea id="content" required placeholder="お問合せ内容をお書きください。"></textarea></dd>
        </dl>
        <div class="button"><input type="submit" value="送信"></div>
      </form>
    </section>
  </div><!-- /.container -->
</main>
<!-- /main -->

<!-- footer -->
<footer class="footer">
  <p><small>&copy; IKECODE</small></p>
</footer>
<!-- /footer -->
</body>
</html>

@charset "UTF-8";

/* ----------------------------------------
  reset
---------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  scroll-behavior: smooth;
}

/* ----------------------------------------
  body
---------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-family:
    "Josefin Sans", "Noto Sans JP", sans-serif;
  line-height: 1.0;
}

/* ----------------------------------------
  layout（共通）
---------------------------------------- */
.container {
  width: min(92%, 960px);
  margin: 0 auto;
}
.sec_block {
  padding: 80px 0;
}
h2 {
  margin-bottom: 40px;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}

/* ----------------------------------------
  header
---------------------------------------- */
.header > .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 40px 0 30px;
}
  h1 {
    width: fit-content;
    margin-right: auto;
    font-weight: 600;
    font-size: 38px;
  }

/* ----------------------------------------
  nav
---------------------------------------- */
.gnav > ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
  .gnav li {
    font-size: 16px;
  }
  .gnav li a {
    display: block;
    padding: 20px 20px 16px;
    transition: .3s;
  }
    .gnav li:last-child a {
      background-color: #000;
      color: #fff;
    }
    .gnav li a:hover {
      opacity: 0.5;
    }

/* ----------------------------------------
  main_visual
---------------------------------------- */
.main_visual {
  margin-bottom: 80px;
}
  .main_visual img {
    width: 100%;
    height: 600px;
    object-fit: cover;
  }

/* ----------------------------------------
  about
---------------------------------------- */
#about ul {
  margin-bottom: 16px;
  padding-left: 5.0rem;
  list-style: disc;
  font-size: 18px;
}
  #about ul li, #about p {
    font-size: 18px;
    line-height: 1.8;
  }

/* ----------------------------------------
  works
---------------------------------------- */
#works ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
  #works ul li {
    width: 100%;
  }

/* ----------------------------------------
  news
---------------------------------------- */
#news dl {
  display: grid;
  grid-template-columns: 8.0rem auto;
  border-top: 1px solid #aaa;
}
  #news dt {
    padding-top: 6px;
    padding-left: 1.0rem;
    border-bottom: 1px solid #aaa;
    line-height: 2.4;
    font-weight: 700;
  }
  #news dd {
    padding-top: 6px;
    border-bottom: 1px solid #aaa;
    line-height: 2.4;
  }

/* ----------------------------------------
  contact
---------------------------------------- */
#contact p {
  text-align: center;
  margin-bottom: 20px;
}
#contact dl {
  display: grid;
  grid-template-columns: 10rem auto;
  margin-bottom: 20px;
  position: relative;
}
#contact dl::before {
  content: '※は必須項目';
  position: absolute;
  top: -30px;
  left: 0;
  color: #f00;
  font-size: 12px;
}
  #contact dt {
    position: relative;
    padding-left: 1em;
  }
  #contact dt::before {
    content: '※';
    position: absolute;
    top: 0;
    left: 0;
    color: #f00;
    font-size: 12px;
  }
  #contact dd {
    margin-bottom: 10px;
  }
    #contact dd input,
    #contact dd textarea {
      width: 100%;
      border: solid 1px #aaa;
      padding: 10px;
    }
    #contact dd textarea {
      height: 160px;
    }
  #contact .button {
    text-align: center;
  }
    #contact .button input {
      border: solid 1px #24292e;
      width: 200px;
      background-color: #24292e;
      color: #fff;
      padding: 15px 0;
      transition: .3s;
    }
    #contact .button input:hover {
      background: #fff;
      color: #24292e;
    }

/* ----------------------------------------
  footer
---------------------------------------- */
.footer {
  padding: 0 0 20px;
}
  .footer p {
    font-size: 14px;
    text-align: center;
  }

課題11 - Flower Coffee

★実践演習

Flower Coffee


画像
  • ブログ画像は、「幅：700px」「高さ：350px」

← logo.png（透過PNG）
← logo_white.png（透過PNG）

unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com

テキスト
Flower Coffee

menu
blog
access

Concept
心静かにコーヒーを
立ち止まって、 空の青さを眺めて、 一息つきましょう。

Blog

よりすぐりのコーヒ豆を厳選して提供致します。
2030.08.08

軽くて甘みがあるマカロンをどうぞ。
2030.08.05

コーヒーカップも販売しております。
2030.08.02

プレゼント用のコーヒーを販売中です。
2030.07.28

カフェラテもお勧めです。
2030.07.27

ブログをはじめました。
2030.07.26

ブログ一覧


© Flower Coffee
制作ポイント

マルチデバイス対応の可変レイアウトにする

  .blog > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 2%;
    row-gap: 20px;
  }

スマートフォンとPCのトップ画像を切り替える

  • pictureタグを使ってレスポンシブに画像を切り替える
  • srcset属性は、後述するmedia属性で条件が一致したときに表示する画像のパスを記述します
  • media属性は下記のようにmax-widthを使って条件を記述することもできます
<div class="main_visual">
  <picture>
    <source media="(max-width: 600px)" srcset="img/sp_visual.webp">
    <img src="img/main-visual.webp" alt="">
  </picture>
</div><!-- /.main_visual -->
記述例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】Flower Coffee</title>
<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=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header -->
<header class="header">
  <h1><img src="img/logo.png" alt="Sky Coffee"></h1>
  <div class="main_visual">
    <picture>
      <source media="(max-width: 600px)" srcset="img/sp_visual.webp">
      <img src="img/main-visual.webp" alt="">
    </picture>
  </div><!-- /.main_visual -->
  <nav class="gnav">
    <ul>
      <li><a href="#">menu</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">access</a></li>
    </ul>
  </nav>
</header>
<!-- ▲ header -->

<!-- main -->
<main class="main">
  <div class="container">
    <!-- concept -->
    <section class="concept">
      <img src="img/concept.webp" alt="">
      <div class="concept_copy">
        <h2>Concept</h2>
        <h3>心静かにコーヒーを</h3>
        <p>立ち止まって、
          空の青さを眺めて、
          一息つきましょう。</p>
      </div><!-- /.concept_copy -->
    </section>
    <!-- blog -->
    <section class="blog">
      <h2>Blog</h2>
      <ul>
        <li>
          <a href="#">
            <img src="img/thumbnail01.webp" alt="">
            <h3>よりすぐりのコーヒ豆を厳選して提供致します。</h3>
            <p><time datetime="2030-08-08">2030.08.08</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail02.webp" alt="">
            <h3>軽くて甘みがあるマカロンをどうぞ。</h3>
            <p><time datetime="2030-08-05">2030.08.05</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail03.webp" alt="">
            <h3>コーヒーカップも販売しております。</h3>
            <p><time datetime="2030-08-02">2030.08.02</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail04.webp" alt="">
            <h3>プレゼント用のコーヒーを販売中です。</h3>
            <p><time datetime="2030-07-28">2030.07.28</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail05.webp" alt="">
            <h3>カフェラテもお勧めです。</h3>
            <p><time datetime="2030-07-27">2030.07.27</time></p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/thumbnail06.webp" alt="">
            <h3>ブログをはじめました。</h3>
            <p><time datetime="2030-07-26">2030.07.26</time></p>
          </a>
        </li>
      </ul>
      <p class="btn"><a href="#">ブログ一覧</a></p>
    </section>
  </div><!-- /.container -->
</main>
<!-- /main -->

<!-- footer -->
<footer class="footer">
  <img src="img/logo_white.png" alt="">
  <p><small>&copy; Flower Coffee</small></p>
</footer>
<!-- /footer -->
</body>
</html>

@charset "UTF-8";

/* --------------------------------
  reset
-------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* --------------------------------
  body
-------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.0;
}

/* --------------------------------
  layout
-------------------------------- */
.container {
  width: min(90%, 1240px);
  margin: 0 auto;
  padding: 0 30px;
}

/* --------------------------------
  header
-------------------------------- */
.header {
  text-align: center;
}
  h1 > img {
    width: 360px;
    padding-block: 50px;
  }

/* --------------------------------
  nav
-------------------------------- */
.gnav {
  padding-block: 40px;
}
  .gnav > ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 80px;
  }
  .gnav li {
    font-size: 1.25rem;
    font-family: "Arial", sans-serif;
    letter-spacing: 0.1em;
  }
    .gnav li a{
      position: relative;
      }
      .gnav li.current a,
      .gnav li a:hover{
        color:#0497a2;
      }
        .gnav li a::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: -10%;
          width: 120%;
          height: 2px;
          background:#0497a2;
          transition: all .3s;
          transform: scale(0, 1);
          transform-origin: center top;
        }
          .gnav li.current a::after,
          .gnav li a:hover::after {
              transform: scale(1, 1);
          }

/* --------------------------------
  main
-------------------------------- */
.concept {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-flow: column;
  justify-content: left;
  margin-inline: auto;
  padding-block: 50px;
}
  .concept > img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .concept_copy {
    display: grid;
    place-content: center;
    padding-left: 20px;
    letter-spacing: 0.1em;
  }
    .concept_copy > h2 {
      font-size: 1.0rem;
      font-family: "Arial", sans-serif;
      font-weight: normal;
    }
    .concept_copy > h3 {
      margin-block: 20px 30px;
      color: #b4756e;
      font-size: 2.0rem;
      font-weight: 600;
    }
    .concept_copy > p {
      line-height: 2.0;
    }

/* ----------- blog ------------ */
.blog {
  padding-block: 0 20px;
}
  .blog > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 2%;
    row-gap: 20px;
  }
  .blog h2 {
    position: relative;
    padding-block: 40px 70px;
    font-size: 1.0rem;
    font-family: "Arial", sans-serif;
    font-weight: normal;
    text-align: center;
    letter-spacing: 0.1em;
  }
    .blog h2::after {
      position: absolute;
      content: "ブログ";
      top: 60px;
      right: 0;
      bottom: 0;
      left: 0;
      color: #b4756e;
      font-size: 2.0rem;
      font-weight: 600;
    }
  .blog h3 {
    margin-block: 12px;
    font-size: 0.9375rem;
    line-height: 1.4;
  } 
  .blog p {
    font-size: 0.9375rem;
  }

/* ------------ btn ------------- */
  .btn {
    margin-top: 40px;
    text-align: center;
  }
  .btn > a {
    position: relative;
    display: inline-block;
    margin-block: 40px;
    padding: 20px 80px;
    border: 1px solid #b4756e;
    color: #b4756e;
    text-align: center;
  }
  .btn > a::after {
    position: absolute;
    content: "▶";
    top: 22px;
    right: 16px;
    font-size: 0.5625rem;
  }

/* --------------------------------
  footer
-------------------------------- */
.footer {
  padding-block: 30px;
  background-color: #000;
  color: #fff;
  text-align: center;
}
  .footer img {
    width: 180px;
    margin-block: 40px;
  }
  .footer small {
    font-size: 0.75rem;
  }

Grid で中央配置

★Grid

Grid で中央配置

unsplash.com

完成例

コーディング例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】Grid で中央配置</title>
<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=Homemade+Apple&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
  <div class="container">
    <h1>HeroHeader</h1>
    <p>タイトルを中央に配置</p>
  </div><!-- /.container -->
</header>
</body>
</html>

@charset "UTF-8";

/* ----------------------------------------
  reset
---------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* ----------------------------------------
  body
---------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.0;
}


/* ----------------------------------------
  header
---------------------------------------- */
.header {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  background: url(../img/bg_img.jpg) no-repeat center top / cover;
}
  .container {
    width: fit-content;
    padding: 16px 40px 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid #fff;
    color: #3d3b28;
    text-align: center;
  }
    h1 {
      font-size: 32px;
      font-family: 'Homemade Apple', cursive;
      line-height: 1.2;
    }
    p {
      font-size: 20px;
  }
白描画（はくびょうが）

筆の線だけで制作された絵画であり、白画ともいう。
白描画は色彩をともなわず、あくまで筆線のみで完成された作品をさす。