# カードを作成する

NOTE

このページでは、なるべくコピー & 貼り付けではなく、自分でタイピングして入力しましょう。

カードの共通部分を作成します。以下のようになることを目標に、ベースとなる、枠とタイトルを作ってみます。

# 内容

このページに記載する内容は以下の通りです。すべてのプロパティは説明していません。以降のセクションでは、一見分かりづらい部分のみ解説しています。

~~/public/index.html

  <body>
    <img
      src="./assets/decorations/lt.svg"
      alt="背景デザイン画像1"
      class="page-bg-icon page-bg-icon-lt"
    />
    <img
      src="./assets/decorations/rb.svg"
      alt="背景デザイン画像2"
      class="page-bg-icon page-bg-icon-rb"
    />
    <div class="page-cover bg-3 text-dark">
      <h1 class="page-title text-1">Portfolio</h1>

      <div class="card-cover bg-white">
        <h2 class="card-title-cover bg-2 text-light">
          <div class="card-title">English Title</div>
          <div class="card-subtitle">日本語タイトル</div>
          <div class="card-title-line"></div>
        </h2>
        <div class="card-contents">内容</div>
      </div>

      <div style="height: 40px"></div>

      <footer class="footer-cover bg-2 text-light">
        <div style="height: 4px; background-color: rgba(0, 0, 0, 0.1)"></div>
        <div class="footer-contents">&copy; Yumi's web page.</div>
      </footer>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

~~/public/assets/main.css

/* ===== FOOTER END ===== */

/* ===== CARD COMMON BEGIN ===== */
.card-cover {
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.56);
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}
@media screen and (min-width: 1001px) {
  .card-cover {
    border-radius: 16px;
    overflow: hidden;
  }
}
.card-title-cover {
  margin: 0 0 0 16px;
  display: inline-block;
  padding: 8px 16px;
  position: relative;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  min-width: 100px;
  z-index: 1;
}
.card-title-cover::before {
  content: '';
  z-index: -1;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  top: 4px;
  right: -4px;
  bottom: -4px;
  left: 4px;
}
.card-title {
  font-family: 'Pacifico', Roboto, 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  line-height: 1.5em;
}
.card-subtitle {
  font-size: 0.7rem;
  line-height: 2em;
}
.card-title-line {
  background-color: rgba(0, 0, 0, 0.1);
  height: 4px;
}
.card-contents {
  padding: 16px;
  font-size: 0.875rem;
}
/* ===== CARD COMMON END ===== */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# @media screen and ...

CSS で .card-cover が、2 つ登場します。片方の .card-cover は、 @media screen and (min-width: 1001px) { ... } の中に囲まれています。これは、メディアクエリというもので、レスポンシブデザインという、画面幅に応じて適用する Style を変更する際に活用できる書き方です。MDN リファレンス (opens new window)

Animation27

メディアクエリに使用可能な制限は様々ありますが、今回は横幅が 1001px 以上になったときに、追加で .card-cover に、border-radius: 16px; (角丸)と overflow: hidden; をつけます。

overflow: hidden; については、以降のページで説明する、Hobby （趣味）のカードで、写真を一杯に広げた際に、角丸がしっかり適用されるために使用します。（この挙動はカード作成（趣味）のページでご確認ください。）

# ::before

.card-title-cover と .card-title-cover::before の 2 つがあります。::before は疑似要素といい、セレクターに付加するキーワードです。選択された要素の特定の部分にスタイルを付与できるようにするものです。以下のようなものがあります。

::after ...選択した要素の最後の子要素が対象
::before ... 選択した要素の最初の子要素が対象
::first-line ... ブロックレベル要素の最初の行が対象

以下は、CSS の ::before を使用した例です。★が自動的に付与されていることがわかります。

See the Pen favorite-list by Insell (@insell824) on CodePen.

文章中に複数の箇所で使用する部分は、以下のように Style を組み合わせると、再利用しやすいクラスを作成することができます。

See the Pen inline-a by Insell (@insell824) on CodePen.

# タイトルの構造

ここで、タイトルの構造について解説します。以下の画像のように、タイトルは背景要素が 2 重に見える構造になっています。

視覚的に理解するために、指定する色を極端な色にして、レイアウト以外のスタイルやタグを排除して確認すると、以下のようになります。

See the Pen card-base by Insell (@insell824) on CodePen.

::before の content に、空の要素を追加し、 position:absoluteと top、bottom、right、left オプションでずらしています。background-color に透明度のある黒（上の例では赤）を指定することで、重なっているように見せています。

::before は、要素の前に入りますが、元の要素の背景と、元の要素のテキストの間に挟まれてほしいため、 z-index を使用して、調整しています。

::before や ::after に装飾する場合、内容が何もない場合も、必ず content:""; として、空の文字を指定する必要があります。

← 共通部品・背景・フッター等を作成するカード作成（自己紹介） →