【コーディング未経験のデザイナー向け】知ってると役立つHTMLタグとCSSプロパティ

はじめに

本記事は、タイトル通りコーディング未経験のデザイナーに向けて書いています。

特にデザインとコーディングが分業制になっているところでは、コーディング未経験だったりHTMLやCSSについての知識があまりないデザイナーがいるかと思います。

コーディングの知識がなくても、デザインをすることは可能なのだと思います。
ですが、デザイナーにコーディング知識・経験があるかどうかで、デザイナー・エンジニア間のコミュニケーションのしやすさは結構変わります。
コーディング経験があるデザイナーが作るデザインは圧倒的に実装しやすいです。
これは、これまでの約4年間の私のエンジニア経験を通して感じたことです。

かといって、コーディングについてエンジニアなみの知識をつけろ！とまでは言いません。
本記事では、デザイナーがHTMLとCSSを知ることのメリット、ざっくりHTMLとCSSの説明、最低これくらい知っておけばデザイナーがエンジニアとのやりとりの上で役立ちそうだな〜と思うHTMLタグとCSSプロパティを、私の独断と偏見でご紹介します。

デザイナーがHTMLとCSSを知ることのメリット

デザイナーがHTMLとCSSを知ってると、どんなメリットがあるのでしょうか。
下記に思いつくものを挙げます。

• エンジニアとのコミュニケーションがスムーズになる
• 実装で簡単にできることと難しくなりそうなところの判断ができるようになる
• デザインデータが、実装のしやすさを考慮したつくりになる
  → エンジニアの実装工数がへる
  → エンジニアからデザイナーへの、実装に合わせたデザインデータ修正依頼が減る
  → デザイナーの工数も減る
  → お互いの生産性が高まり、よりしあわせに仕事できる

結構、メリット大きそうではないでしょうか？

ざっくりHTMLとCSSについて

HTMLとは

HTMLは、ブラウザーに「なに」を表示すべきかを伝えるマークアップ言語です。
ページの各構成要素に「タグ」と呼ばれる目印をつける（マークアップする）ことで、コンピューターにコンテンツの階層構造や意味を理解させます。
要素に合わせてタグを適切に使い分けないと、下記のような問題が生じます。

• コンピューターが何の情報なのか読み取れなくなります
• 結果、SEOやアクセシビリティの評価が下がる可能性があります

CSSとは

CSSは、HTMLで書いた「なに」の「表示方法」をブラウザーに指示するスタイルシート言語です。
HTMLで作った文章構造に、タイポグラフィや、色、位置、サイズなどを指定して、スタイルをつけます。
Webサイトの見た目に大きく関わる言語なので、CSSでのスタイリングの仕方やプロパティについては、デザイナーにもぜひ知って欲しいと個人的に思います。

知ってると役立つHTMLタグ

一般的なWebサイトでよく使用されるHTMLタグをご紹介します。私の経験上、どのサイトにもほぼ必ず存在するようなタグです。
各タグについて詳細を知りたい方は、それぞれにMDNサイトのリンクを貼ってますのでそちらご参照ください。
（MDNは、開発者向けのMozillaの公式ウェブサイトです）

Webページの枠組みを構成するタグ

header

• ヘッダーエリアに使用するタグ
• MDN

nav

• ナビゲーションエリアに使用するタグ（グロナビとか）
• MDN

main

• メインコンテンツに使用するタグ
• MDN

footer

• フッターエリアに使用するタグ
• MDN

Webページの枠組みを構成するタグ

  <header>
    <!-- サイトのタイトルやロゴ、メニューが入ります -->
  </header>

  <nav>
    <!-- サイトのナビゲーションメニューなどが入ります -->
  </nav>

  <main>
      <!-- サイトのメインコンテンツが入ります -->
  </main>

  <footer>
    <!-- サイトのコピーライトなどが入ります -->
  </footer>

見出し要素：hタグ（h1 ～ h6）

• ページの見出しに使用するタグ
• h1が最上位の見出しで、h6が最下位の見出し
• 適切に使用することで、コンテンツの階層構造を示すことができる
• MDN

見出し要素：hタグ（h1 ～ h6）

<h1>見出し１</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

その他のタグ

sectionタグ

• 文書の自立した一般的なセクション（区間）を表すタグ
• 基本的に、sectionタグは見出しタグ（h1〜h6）とセットで使用する
• MDN

pタグ

• テキストの段落を指定するタグ
• MDN

aタグ

• リンクを指定するタグ
• MDN

imgタグ

• 画像を表示するタグ
• SEOやアクセシビリティ対策として、適切なalt属性を設定することを推奨
• MDN

divタグとspanタグ

• 特に意味のないタグ
• 要素をグルーピングしたり、コンテンツの装飾やスタイリングのためなどにつかうことが多い
• divタグについて：MDN
• spanタグについて：MDN

その他のタグ 使用例

<section>
    <h2>セクション見出し</h2>
    <div>
        <p>ここからdivタグに囲まれてます。</p>
        <p>テキストです。<span>spanタグで囲まれたテキストです。</span></p>
        <p>下記はロゴ画像です。</p>
        <img src="logo.png" alt="ロゴ画像">
        <p>ここまでdivタグに囲まれてます。</p>
    </div>
    <a href="logo.png">ロゴ画像のリンクです</a>
</section>

おまけ：クラス属性

class属性はHTMLタグに設定できる属性の一つで、要素に対してクラス名を付けることができます。
CSSでスタイリングするときは、指定したクラス名を使って、そのクラス名がついている要素に対してプロパティを設定することが多いです。

pタグに text-red というクラス名をつける

<p class="text-red">赤色のテキストです。</p>

text-red というクラス名に対してCSSプロパティを指定

.text-red {
    color: red;
}

知ってると役立つCSSプロパティ

タイポグラフィ関連、サイズ、余白を指定するCSSにわけて、デザインに大きく関わりそうなものをピックアップして紹介します。
各プロパティについて詳細を知りたい方は、それぞれにMDNサイトのリンクを貼ってますのでそちらご参照ください。

タイポグラフィ関連のCSSプロパティ

font-family

• フォントを指定
• MDN

font-size

• フォントの大きさを指定
• サイズを指定する際の単位として、em、rem、px、% などがある
• フォントサイズをpxで定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、アクセシブルではなくなるので注意
• MDN

line-height

• 行ボックスの高さを指定。主にテキストの行間を設定するために使用する
• line-heightで指定する値は、数値のみの指定方法が一般的で好ましいとされる（MDNより）
  たとえば、フォントサイズが10pxの要素に対してline-heightで 2 を指定したときは、その要素のフォントサイズに対して2倍の値（20px）がline-heightの値として使用される
• MDN

letter-spacing

• テキストの文字間隔を指定
• MDN

font-weight

• フォントの太さを指定
• MDN

color

• テキストの色を指定
• MDN

タイポグラフィ関連のCSSプロパティ 使用例

p {
    font-family: "Gill Sans", sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: #333;
}

要素サイズを指定するCSSプロパティ

width

• 要素の幅を指定
• MDN

height

• 要素の高さを指定
• MDN

widthとheight 使用例

/* クラス名がboxの要素に指定 */
.box {
    width: 360px
    height: 120px
}

余白を指定するCSSプロパティ

margin（margin-top / margin-right / margin-bottom / margin-left）

• 要素に対して外側の余白
• margin-top：要素の上側の余白
• margin-right：要素の右側の余白
• margin-bottom：要素の下側の余白
• margin-left：要素の左側の余白
• margin で、上下左右の余白を一括で指定することも可能
• MDN

margin 使用例

/* 四辺すべてに適用 */
.box {
    margin: 10px;
}

/* 上下の余白が10px、左右の余白がauto */
.box2 {
    margin: 10px auto;
}

/* 上の余白が10px、左右の余白がauto、下の余白が20px */
.box3 {
    margin: 10px auto 20px;
}

/* 上の余白が10px、右の余白がauto、下の余白が20px、左の余白が15px */
.box4 {
    margin: 10px auto 20px 15px;
}

padding（padding-top / padding-right / padding-bottom / padding-left）

• 要素に対して外側の余白
• padding-top：要素の上側の余白
• padding-right：要素の右側の余白
• padding-bottom：要素の下側の余白
• padding-left：要素の左側の余白
• padding で、上下左右の余白を一括で指定することも可能
• MDN

padding 使用例

/* 四辺すべてに適用 */
.box {
    padding: 10px;
}

/* 上下の余白が10px、左右の余白がauto */
.box2 {
    padding: 10px auto;
}

/* 上の余白が10px、左右の余白がauto、下の余白が20px */
.box3 {
    padding: 10px auto 20px;
}

/* 上の余白が10px、右の余白がauto、下の余白が20px、左の余白が15px */
.box4 {
    padding: 10px auto 20px 15px;
}

おわりに

ここで紹介したHTMLタグとCSSプロパティは、全体のほんの一部ですが、頻出するものです。
すべてを覚える必要はなく、エンジニアとやりとりするときに今回紹介したHTMLタグやCSSプロパティのことを思い出して、調べたら情報を引き出せるくらいのレベルで大丈夫と思います。

ユーザーが最終的に見るWebコンテンツは、エンジニアが実装したコードをもとにブラウザに映し出されたものです。
コンテンツを構成する要素がどのようにブラウザに表示されるのか、デザイナーも仕組みを知っておいて損はないと思います。

どの業界にも言えることですが、仕事を円滑に進めるためにはコミュニケーションを取り続けることが大事ですよね。
そして、よりよいコミュニケーションをとるには、多少でも相手のことや相手がしていることを理解するのも大事と思います。
私自身、デザインについて無知なところがたくさんあると思うので、2024年はデザインについてもっと積極的に学びたいと考えております。

この記事が、ふだんエンジニアと仕事をしているデザイナーの方たちにとって、よりよいコミュニケーションの一助になればと思います。
最後まで読んでくださり、ありがとうございました。よい年末年始を！