コーディング時のポイントまとめ

ZeroPlus入学テストのコーディング時のポイント

この記事は、入学テストのコーディングで手詰まってしまった方および見直しをしたい方向けに作成されました。
大事なポイントが多く含まれているため、記事を通してコーディングの理解を深めましょう。

適切なタグを使用できているか

まず初めのポイントは、HTMLのタグの使い方についてです。

HTMLのコーディングでは、適切なHTMLタグが使われているかを確認しましょう。
ZeroPlus入学テストで主に使われるタグおよび使用場所は、以下になります。

ZeroPlus入学テストで主に使われるタグおよび使用場所

• ヘッダーにheaderタグ
• タイトルにh1タグ
• ナビゲーションにnavタグ
• メインコンテンツにmainタグ
• 各セクションごとにsectionタグ

これらのタグの中で、使用方法がわからない部分がございましたら以下の記事をご覧ください。

HTMLのよく使うタグ一覧！この15個さえ押さえればOK！

画像のパスを正しく記述できているか

次のポイントは、パスの記述についてです。

画像を表示する際に、「パス」を正しく出力できているか確認しましょう。
今回のポイントは、画像を「相対パス」で指定できているかどうかです。

正しい例：相対パスでの記述

index.htmlと同じ階層であるimgフォルダからパスを記述する。

<img src="img/img_mv.jpg" alt="" class="mv-img" />

NGな例：絶対パスでの記述

<img src="/Users/user/Desktop/blog/src/img/img_mv.jpg" alt="" class="mv-img" />

<img src="https://zeroplus.jp/img/img_mv.jpg" alt="" class="mv-img" />

相対パスや絶対パスについてわからない部分がございましたら、以下の記事で復習を行いましょう。

相対パスと絶対パスの違いと書き方を学ぼう

画像の表示方法の使い分けができているか

次のポイントは、Webサイトの画像の表示方法についてです。

Webサイトに画像を表示する方法として、大きく以下の２つの方法があります。

Webサイトに画像を表示する方法

• HTMLで「imgタグ」を使って表示する
• CSSで「background-imageプロパティ」を使って表示する

画像の表示方法がイメージできたら、次はそれぞれの使い分けも把握していきましょう。

imgタグの使い方

imgタグは、Webサイトの内容上、必要不可欠な画像に使用します。
つまり、この画像がなかったらコンテンツの情報が欠けてしまうような箇所で使用します。
（例.ブログのサムネイル、記事の中の画像など）

background-imageプロパティ

background-imageプロパティでの指定は、装飾目的に使用する画像に使用します。
imgタグとは反対に、この画像はなくてもWebサイトのコンテンツとして成り立つ箇所に使用します。
（例.装飾目的の背景画像）

テスト時の注意点

背景画像は、文字通り「背景」として表示されている画像です。
なので、background-imageプロパティでの実装を試みてみましょう。

無理に「imgタグの画像の上に、要素をpositionプロパティで重ねる」という方法は今回は用いません。

Flexboxを正しく使用できているか

次のポイントは、Flexboxの使い方についてです。

Flexboxは、Webサイト内の要素の配置を、短いコードで実装することができる書き方です。
主に以下のような「要素の配置」を行う際に使います。

• 要素を横並びにする
• 要素内のテキストを中央配置する

まずは、Flexboxを用いた配置の方法の例を確認しましょう。

正しい書き方：Flexboxでレイアウトを横並びにする

<ul class="list">
  <li class="list-item">リストアイテムA</li>
  <li class="list-item">リストアイテムB</li>
  <li class="list-item">リストアイテムC</li>
</ul>

.list {
  display: flex;
  gap: 24px;
}

Flexboxで要素内のテキストを中央配置する

<a href="" class="button">詳しく見る</a>

.button {
  /* ボタンの見た目のコード */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  width: 116px;
  height: 25px;
  background: #ff7979;
  border-radius: 4px;
  /* ここから中央配置のコード */
  display: flex;
  align-items: center;
  justify-content: center; 
}

ここまでで、Flexboxを用いた要素の配置の方法を復習しました。

ただ、上記のFlexboxの方法以外にも、横並びのレイアウトを実装する方法は存在します。

以下の２点は、横並びの方法として今は望ましくない例です。（少し古い書き方のイメージ）
実装の見た目上は問題ありませんが、Flexboxの方が後々の配置の方法を調整しやすくなります。

NGな例：floatプロパティを用いて横並びを作る

.list-item {
  float: left;
}

.list-item:not(:first-child) {
  margin-left: 24px;
}

NGな例：インライン要素にして横並びにする

.list-item {
  display: inline-block;
}

.list-item:not(:first-child) {
  margin-left: 24px;
}

Flexboxの使い方は、以下の記事で解説しています。
まずは簡単な導入の部分だけでもイメージできるように復習しましょう。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

フォントサイズが正しい値であるか

次のポイントは、デザインデータの数値の読み取り方についてです。

Webサイトのデザインには、さまざまな大きさのフォントサイズが存在していています。
デザインデータの数値通りに、それぞれの数値を正確に読み取りコーディングすることが必要です。

プロパティから数値を確認する

読み取りたいテキストを選択（選択ツールの状態でクリック）して、プロパティを確認しましょう。
上記の画像のように、フォントサイズの数値を確認することができます。
（Adobe XDの画面の数値が、どのようなスタイルの値を表しておくのかを把握することも大切です。）

また、デザインデータによっては使用する数値をスタイルガイドに載せてくれているので、そちらも活用しましょう。

スタイルガイドから数値を確認する

一番よく使用する数値は、Webサイト全体に記述しておく

本文のフォントサイズは、今回のデザイン内で一番多く使用されるフォントサイズです。
なので、以下のようにbodyタグのスタイルとして記述し、Webサイト全体に反映されるようにします。

他にも、Webサイトでよく使用される「テキストの色」や「行間」などのスタイルも合わせて記述しておきましょう。

正しく余白が指定できているか

次のポイントは、余白の指定方法についてです。

余白を指定する際は、以下の３つのポイントを把握しておきましょう。

• 上下のmarginの指定は方向を統一する
• marginとpaddingの使い分けを把握する
• 連続する要素間の余白の付け方

それでは、１つ１つ確認していきます。

上下のmarginの指定は方向を統一する

margin-topおよびmargin-bottomは、どちらかのみを使うようにします。
両者を使うと、以下のようにmarginの相殺が起こる可能性があり、意図せぬスタイルのずれを生んでしまいます。

marginとpaddingをつけるケース

デザインで確認した余白をmarginで実装するか、paddingで実装するかはコーディングする上で迷いやすいです。

きちんと両者の違いについては覚える必要があるので、以下の記事でmarginとpaddingの性質の違いを理解しましょう。

marginに関する記事

よく使うCSSのプロパティと使い方を学ぼう

paddingに関する記事

よく使うCSSのプロパティと使い方を学ぼう

連続する要素間の余白の付け方

以下のように、連続する要素間の余白をコーディングする際は、画像のように:not(:first-child)で余白を指定します。

.item:not(:first-child) {
  margin-top: 16px;
}

:not(:first-child)についてわからない部分がございましたら以下の記事をご覧ください。

CSSの擬似クラスを使いこなそう

marginがつけられるケース、つけられないケース

使用したHTMLタグによっては、marginがつけられない要素が存在します。
以下のようなインライン要素には、上下に対してmarginがつけられません。

• a
• span
• input
• tr
• th
• td

etc.

これらに対しては以下のような方法で余白をつける必要があります。

paddingで余白を指定

display: block; またはdisplay: inline-block;を指定した上でmarginを使う

インライン要素ついてわからない部分がございましたら以下の記事をご覧ください。

【CSS】inline・block・inline-blockの違いとは？使い分けを解説

クラス名の決め方について

クラス名は、わかりやすく、簡潔に要素を説明できるように名前を決めましょう。
名前の決め方は「命名法則（命名規則）」と呼ばれることが多いので覚えておきましょう。

基本的なクラスの命名方法

Webサイトの要素は大きく2種類に分けられます。

それは「要素のかたまり」とその「子要素」です。

• 要素のかたまり : Webサイトの大きな構造
• 子要素 : 「要素のかたまり」の構成要素

よりイメージしやすいように以下のコードを例に確認していきましょう。

コードの例

<header class="header">
  <h1 class="header-logo">ロゴ</h1>
  <nav class="header-nav">
    <ul class="header-list">
      <li class="header-item"><a href="#" class="header-link">リスト</a></li>
      <li class="header-item"><a href="#" class="header-link">リスト</a></li>
      <li class="header-item"><a href="#" class="header-link">リスト</a></li>
    </ul>
  </nav>
</header>

ヘッダーという「要素のかたまり」の中に、ロゴやナビゲーションなどの「子要素」が入っています。
このような要素にクラスめ名をつけるときは、以下のポイントを意識しましょう。

名前の付け方：「どこの-何か」

「要素のかたまり」は、その要素の説明を１単語で説明してあげます。
（要素のかたまり : header）

「子要素」は、親要素である「要素のかたまり」の名前と、その要素を説明する１単語を「 - 」で繋げて書きます。
（子要素 : header-nav, header-list, header-item）

このように、HTMLのクラス名は、「どこの-何か」という風に記述することで、
わかりやすく要素を説明することができます。

よく使うクラス名の単語

それでは最後に、クラス名を記述する際によく使用する単語をまとめておきます。

「要素のかたまり」によく使用する単語

子要素でよく使う単語

子要素の構造に対してよく使用する単語

子要素のテキストに対してよく使用する単語

まとめ

ここまででZeroPlusの入学テストで特に復習してほしい箇所を説明してきました。
まずは、以下のポイントを復習してください。

• 適切なタグを使用できているか
• 画像のパスを正しく記述できているか
• 画像の表示方法の使い分けができているか
• Flexboxを正しく使用できているか
• フォントサイズが正しい値であるか
• 正しく余白が指定できているか
• クラス名の決め方について

上記の項目は、ZeroPlusの授業でも必要になる知識です。
今のうちからマスターして、より発展的な知識を吸収できる下地を作っておきましょう。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー