マークアップガイド

最終更新: 2022年01月14日

概要

マークアップの定義は明確に決まっていませんが、主にHTMLとCSS(Sass)を使ってWebサイトのコーディングを行う領域を指します。カルーセルやタブ切り替えなどWebサイトの表現に付随する軽微なJavaScriptの実装やパフォーマンス最適化、付随する開発環境の構築もマークアップの領域に含まれると言えますが、ここではHTMLとCSSを使ったWebサイトのコーディングに絞って解説を行います。

高品質なマークアップを行うためのポイントは以下です。

  • 正しい情報源を知る
  • タグを正しく使い分ける
  • Emmet、ショートカット を使う
  • ピクセルパーフェクトを理解する
  • アクセシビリティに配慮する
  • アンチパターンを避ける

正しい情報源を知る

HTML、CSSはそれぞれ以下の団体が仕様策定と勧告(リリース)をおこなっています。

言語使用策定勧告
HTMLWHATWGW3C
CSSW3CW3C

これらは日々アップデートされており、新しい書き方が登場したり、非推奨とされる書き方が生まれたりと新陳代謝が繰り返されています。そのため、今現在の時点で正しい書き方を知るには公的なドキュメントを参照する必要があります。

前述した団体のサイトはなぜか一貫して古めかしく閲覧性が低いため、Firefoxというブラウザの開発会社であるMozillaが提供するMDNと呼ばれるサイトが実質的な公式ドキュメントとして長く使われています。

マークアップは参入障壁が低いため多くの駆け出しエンジニアがQiitaや個人ブログで知見を発信していますが、古い情報や新しすぎてブラウザが対応できておらず実用的でない情報も多く存在するためマークアップの知識は基本的にMDNを参照する習慣をつけてください。

HTMLやCSSの最新機能は古いバージョンのブラウザに対応していないケースもあります。MDNのガイドには対象ブラウザの蘭が付属していますが、Can I useを使うことでより直感的に対象ブラウザを調べることができます。常に最新の機能を使うことが正解とも限らないので対応ブラウザは常に意識しておきましょう。

タグを使い分ける

MDNにはすべてのHTMLタグ一覧と、それぞれいつ使うべきかが記載されいます。基本的にこれに従うようにしてください。

とりあえずすべてdivで組むような実装はNGです。

Emmet、ショートカット を使う

最近のエディターにははじめからEmmetやマルチカーソルが含まれています。p.font-boldとタイプしてタブキーをタイプすると自動的に以下のマークアップが生成されます。

<p class="font-bold">|</p>

Emmetやショートカット を覚えると開発速度アップに加え、閉じタグエラーやタイプミスのリスクも回避できます。

ピクセルパーフェクト

マークアップの元となるデザインが自分以外のデザイナーによって用意されている場合、ピクセルパーフェクトで実装するのが基本です。

ピクセルパーフェクトとはデザインを1px単位で忠実に再現することを指します。初学者が陥りがちな罠はデザインを大雑把に実装してしまうことです。デザイナーの多くはしかるべき理由があって余白や文字サイズを調整しています。それを無視して雑なマークアップをすると本来のデザインを棄損してしまい、デザインを台無しにしてしまいます。

とはいえフォントや行間都合で全ブラウザでデザインと完全に一致することが難しいケースはありますし、そもそもデザイナーが無茶苦茶な文字サイズやバラバラな余白でデザインを上げてくることもあります。そういうシーンにおいては

「この見出しはすべて同じデザインなので、見出し下の余白は一律20pxで良いか」

などの確認を入れる等、効率的な実装に必要な提案を積極的に行いましょう。ひどいデザインを忠実に再現するのは悪手です。(無駄な実装コストもかかります)

昨今はSketchやAdobe XD、Figmaなどデザインスペック(pxや色などのデータ)が抜きやすい形式でデザインが共有されるので、デザイン上で文字サイズが20pxになっていたら実装でfont-size: 20pxにするという実装を行うよう徹底しましょう。

視覚的に完全に一致する必要はない

一部ではWebサイトの上にデザインを透かす拡張機能を使って寸分の狂いなく実装することを推奨しているサイトもありますがあれは現実的に不可能に近いのでそこまでの対応は必要ありません。そもそもブラウザやOSごとにわずかに表現が異なるためブラウザやOSごとにわずかな差異が生じるのは仕方ないことなのです。

ピクセルパーフェクトはあくまでスペック(数値)的な観点で同値であれば良いため

デザインファイルの見出しが24pxになっていたら実装時の見出し文字サイズも24pxに設定する。

という対応でOKです。

アンチパターン

IDにスタイルを当てない

IDはアンカーリンク(ページ内リンク)やJSから取得される際のキーとして使われるため、それ自体にスタイルを当てるべきではありません。たとえばJS実装者の都合でID名が変更になった場合など、スタイルが効かなくなります。

Don't

// idはスタイル以外の役割が多いので使うべきでない <div id="main"></div> #main { color: red; }

!importantを使わない

!importantは他の影響を無視して強制的に指定のスタイルを適用するという意味です。本来必要な他の見た目を上書きしてしまうリスクがあるので避けましょう。

Don't

.user { color: red!important // 他のスタイルを無視するので迷惑 }

要素自体にスタイルをあてない

前述したとおり、pタグなどの要素は使わざるを得ないタグなので、それ自体に余計なクラスを指定すると必要ない箇所で必要ないスタイルが影響して扱い辛くなります。

Don't

// すべてのpタグが赤になってしまい、迷惑 p { color: red; }

マルチクラスを避ける

Tailwind CSS などユーティリティベースのライブラリを使う場合この限りではありません。また、BEMを使う場合装飾クラスはマルチクラスとして許容されます。

disabled など装飾的なクラスは併記しても良いですが、異なるブロックの併記は混乱を招くので併記しないようにしましょう。

Don't

<!-- これは非推奨。user と review-boxが併記されている --> <div class="user review-box"> <p class="user__name">Taro Yamada</p> </div>

上記の場合、userとreview-boxのスタイルがまず競合しますし、メンテナンスする際もどちらのスタイルを編集すればいいのか分かりません。

Do

<!-- これならOK。userとreview-boxが明確に分かれている --> <div class="review-box"> <div class="user"> <p class="user__name">Taro Yamada</p> </div> </div>

上記の場合、明確に要素が分かれているのでそれぞれの影響範囲が明確になり、メンテナンス性が上がります。

子孫結合子を使わない

CSSには詳細度という概念があり、親子構造における子要素のスタイルは他のスタイルより優先されます。子孫結合子を多用すると常にスタイルの力関係を意識することになるので、基本的に子孫結合子は避けるべきです。

Don't

.button { font-size: 14px; } .user { .button { font-size: 24px; } }

たとえば上記の場合、.buttonは本来14pxの文字サイズとして設計されています。実装者はそれを期待して各所で使い回すわけですが、.userクラスの中に配置したらなぜか文字サイズが24pxになります。これは実装者を非常に混乱させます。また、button本来の文字サイズを変更しても.user内のボタンは詳細度が高いため優先的に反映され、.button本来の変更を無視し続けます。

上記の対応を行いたい場合、userのelementとしてオリジナルのボタンを作るか、巨大ボタンの登場シーンが他にもあるならbuttonのmodifierとします。

Do

.button { font-size: 14px; &--large { font-size: 24px; } } // あるいは .user { &__button { font-size: 24px; } }

&__記法の場合最終的にフラットな定義に変換されるので詳細度を心配する必要はありません。

css
.user {} .user__button { font-size: 24px; } /* CSSとしての親子関係はない */

固定幅を指定しない

RWDにおいて固定幅を使うことはほとんどありません。基本的には割合や最大幅ベースで定義していきます。そうしないと画面の幅を狭めた時に要素が画面の外にはみ出します。また、ブロック要素にwidth: 100%を指定する人もいますがブロック要素はそもそもwidth: 100%なので指定する必要はありません。

Don't

.card { width: 600px; }

Do

.card { max-width: 600px; }

スキルアップの方法

マークアップを上達させる鍵はとにかく引き出しを増やすことです。Chrome Dev Toolsでいろいろな気になったサイトのマークアップを調べ、自分の引き出しに加えましょう。デザインを見たときにパッとマークアップが浮かぶことが重要です。

また、自分が書いたコードを The W3C Markup Validation Service に貼り付けてみましょう。間違ったマークアップがあれば指摘してくれます。