【初心者向け】「カードを作成してみよう」 Web制作を独学で学ぶ人の為のコーディング講座 part3

SHARE

この記事の対象者
  • 未経験者
  • 学習を始めたての人
  • 独学で学んでいる人
  • 挫折してしまった人

Web制作を独学で学ぶ人のためにHTML・CSSを実務で通用するレベルで学習していきます。
それでは早速始めていきます。

目次 非表示

  1. 「カードを作成してみよう」
  2. カードの作り方
    1. カードの役割を考える
    2. カードの適切なHTMLタグ選定
    3. カードのHTML作成
    4. カードのCSS作成
  3. カードに慣れる
目次へ

「カードを作成してみよう」

今回のテーマは、「カードを作成してみよう」です。
カードとは、画像、テキスト、リンク等が含まれている要素のことです。
ECサイトの商品だったり、ブログ記事にも使用されています。

ボタンのような単体作成できるものではないのですが、複数の要素を組み合わせて作成することで他の似たようなパーツも作成できるようになります。

今回作成するカードはこちらです。

https://xd.adobe.com/view/727acf17-21d4-49cc-a127-a591f883c4bf-2729/

カードは基本的な作り方さえ理解しておけば応用が効くので、しっかり身につけていきましょう。

環境
・mac
※windowsでも適宜置き替えていただければ大丈夫です。

カードの作り方

早速カードを作っていきます。
これまでと同じ流れですが、手順を踏んでいきましょう。

  • カードの役割を考える
  • カードの適切なHTMLタグ選定
  • カードのHTML作成
  • カードのCSS作成

カードの役割を考える

カードの役割を考えてみましょう。

カードを文章に置き換えて考えてみると、画像、タイトル、テキスト、ボタンで構成されていて、それぞれが全て関連しています。
それらをひとまとまりにしてよりわかりやすくデザインしたものがカードと言えます。

詳細へをクリックしたらカードの詳細ページに遷移させることができるのですが、わざわざ詳細へボタンをクリックするとユーザにとっては不便です。

なので、カードをクリックしたら遷移するようにします。
ボタンは存在しているだけで押すことができるということがわかりますので今回は見た目だけのボタンとしましょう。

カードの適切なHTMLタグ選定

続いて、カードの適切なHTMLタグ選定をします。
今回は複数の要素の集まりなので少し大変ですが、慣れていきましょう。

まず、カードを構成している要素（画像、タイトル、テキスト、ボタン）それぞれのタグを考えます。

  • 画像
    画像を意味するimgタグ
  • タイトル
    見出しを意味するhタグ（今回はh3タグ）
  • テキスト
    段落(paragraph)を意味するpタグ
  • ボタン
    buttonタグを使用したいのですが、divタグを使用します

最後に、これらをひとまとまりにする且つカードをクリックしたらページ遷移させるaタグを使用します。

カードのHTML作成

それではいよいよコードを書いていきます。

cardというフォルダを作成してください。
もうそろそろ慣れてきていると思いますが、cardフォルダの中に、index.htmlファイルを作成しましょう。
そして、!を入力してtabキーもしくはenterを押してください。

画像はこちらを使用してください。

いつものようにささっと書いていきます。

このままでもできないことはないのですが、少し工夫します。
画像(imgタグ)のところを頭、タイトル・テキスト・ボタンを体と考えて分離します。
頭と体をそれぞれdivタグで囲ってあげます。
こんな感じです。

class指定(名前づけ)まで一気にやっていますが、まだこんなものかで大丈夫です。
お手本通り真似してください。

カードのCSS作成

続いて、カードのCSS作成をやっていきます。

こちらもお馴染みの作業ですね。
style.cssファイルを作成してください。
作成したら、index.htmlファイルにstyle.cssファイルのパスを通しておきましょう。

続いて、以下のリンクを開いてデザイン情報を確認しましょう。

https://xd.adobe.com/view/727acf17-21d4-49cc-a127-a591f883c4bf-2729/

デザイン情報の確認のやり方は、以下の記事を参照してください。

Web制作を独学で学ぶ人の為のコーディング講座 デザインデータ確認方法 Adobe XD 【初心者向け】
【初心者向け】デザインデータ確認方法 Adobe XD Web制作を独学で学ぶ人の為のコーディング講座【初心者向け】デザインデータ確認方法 Adobe XD Web制作を独学で学ぶ人の為のコーディング講座

必要な情報は、こんな感じです。
沢山あって大変ですが、一つずつ抑えていきましょう。

カードの全体の情報

  • カードの横幅 -> 200px
  • カードの高さ -> 260px
  • カードの背景色 -> #fff
  • カードのボーダー線 -> 1px solid #C3C3C3;
  • カードの影 -> 0px 3px 6px #00000029;

カードの画像部分(頭)

  • カードの画像の横幅 -> 100%
    200pxですが、カードの横幅いっぱいのサイズがデザインの解釈として正しいため。
  • カードの画像の高さ -> 120px

カードのタイトル、テキスト、ボタン部分(体)

  • カードのタイトルのサイズ -> 16px
  • カードのテキストのサイズ -> 14px
  • カードのテキストのスタイル -> ヒラギノ角ゴシック, W3
  • カードのテキストの色 -> #fff
  • カードのボタンの横幅 -> 64px
  • カードのボタンの高さ -> 32px
  • カードのボタンの色 -> #000
  • カードのボタンのテキストの色 -> #fff
  • カードのボタンのテキストのサイズ -> 12px

それではこれらの情報を当てはめてみましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
<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="style.css">
</head>
<body>
  <a href="" class="card">
    <div class="card__img">
      <img src="img.png" alt="">
    </div>
    <div class="card__body">
      <h3 class="card__heading">商品名</h3>
      <p class="card__text">この商品はおすすめです。<br>
      お得です。</p>
      <div class="btn">詳細へ</div>
    </div>
  </a>
</body>
</html>
style.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック";
}

.card {
  display: block;
  width: 200px;
  height: 260px;
  border: 1px solid #c3c3c3;
  box-shadow: 0px 3px 6px #00000029;
  text-decoration: none;
  color: #000;
}

.card__img {
  width: 100%;
  height: 120px;
}

.card__img img {
  width: 100%;
  height: auto;
}

.card__heading {
  font-size: 16px;
}

.card__text {
  font-size: 14px;
}

.btn {
  font-size: 12px;
  background-color: #000;
  color: #fff;
  width: 64px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

こんな見た目になってたらいい感じです。

最後に、余白の調整をします。
余白の確認も慣れてきたと思います。

最初に、テキスト等を囲ったdivタグ(card__body)に余白を設定します。
ここでわざわざテキスト等をdivタグ(card__body)で囲った意味がわかります。

商品名をクリックして、上と左の余白を確認、ボタンをクリックして右と下の余白を確認してください。
そうすると、上12px、左16px、右16px、下12px余白が空いてることがわかります。

まず、これをコードに書いてみます。
btnの下にcard__bodyの箇所を追加しました。

style.css

.btn {
  font-size: 12px;
  background-color: #000;
  color: #fff;
  width: 64px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__body {
  padding: 12px 16px;
}

すると、どうでしょうか。
あとはタイトルやテキスト等の上下の余白を指定するだけで良くなります。

これがdivタグで囲った理由です。

残りの余白を確認してみましょう。

この商品はおすすめです。の上の余白が14px、ボタンの上が16pxです。
ボタンは右に配置を指定します。

ただ、テキストの内容が増えたり減ったりが予想されます。
それでボタンの位置がズレるとイマイチなので工夫します。

card__headingにline-heightを追加、card__textにmargin-topを追加しました。

style.css
.card__heading {
  font-size: 16px;
  line-height: 1;
}

.card__text {
  font-size: 14px;
  margin-top: 14px;
}

cardにpositionを追加しました。

style.css
.card {
  display: block;
  width: 200px;
  height: 260px;
  border: 1px solid #c3c3c3;
  box-shadow: 0px 3px 6px #00000029;
  text-decoration: none;
  color: #000;
  position: relative;
}

btnにposition、right、bottomを追加しました。

style.css
.btn {
  font-size: 12px;
  background-color: #000;
  color: #fff;
  width: 64px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 12px;
  right: 16px;
}

positionの説明をします。
指定した場所の指定位置に配置することができます。

今回だと、cardの中の右下にボタンを配置するので、
cardにposition:relative;を指定します。
実際に配置させたい要素にposition:absolute;を指定して、
bottomとrightで位置調整しています。


確認してみましょう。
デザイン通りになっていると思います。

カードに慣れる

カードは最初は難しいですが、これが作れるようになると、大分理解が進んでいる証拠です。

何回も書いて練習してみてください。

次回は、Web制作を独学で学ぶ人の為の講座 HTML・CSS編 part4
「命名規則を理解しよう」です。

それではまた次回お会いしましょう。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【初心者向け】Google Fontsの設定方法 Web制作…

次の記事

【初心者向け】「命名規則を理解しよう」 Web制作を独学で学ぶ…