私家版HTML Coding Style

Last Update


e-yuuki.orgを書くときに気をつけていることをまとめる。ベストプラクティスを集めたわけではない。W3Cの勧告やValidatorの更新によって都度変更される可能性がある。

HTML 5

W3C Recommendationに従って書く。最新のRecommendationはHTML 5.2HTML 5.3がWorking DraftからRecommendationになり次第アップデートする。

Validator

文書を書いてWebに公開するさいThe W3C Markup Validation Serviceを使ってHTMLコードを検査する。公開後はPageSpeed Insightsからページのスコアを確認し、速度が改善できそうな箇所を探す。

一行あたりの文字数とインデント

一行あたりの文字数制限は無い。余計な空白が挿入されることを防ぐため、むしろ一段落(pタグで囲う)は一行に収める。

ページサイズを抑えるためにインデントは必要ない。複雑なリストを書くときはインデントを使って見やすくしてもいいが、コミットするときはインデントをすべて削除する。

CSS

レイアウトを整える目的でbrタグやテーブルを使ってはならない。レイアウトに関するコードはすべてCSSとして書く。

CSSはHTMLコードに直接書いてしまう。別途用意して読み込むほうが効率的なほど長いCSSを書くわけではない。この方法だとCSSを更新したときHTMLファイルひとつひとつを更新しなければならないため手間だが、CSSコードを改行せず一行にすることでfind(1)sed(1)を組み合わせて簡単に更新ができる。置換前と置換後のテキストはバージョン管理システムから取得できる(git-diff(1)など)。

$ find . -name '*.html' -exec \
sed -i 's/変更前のテキスト/変更後のテキスト/' {} \;

Tips

引用の方法

引用の方法はそれが短いものか長いものかによって変わる。どの程度から長いと判断するかは曖昧だが、文を2~3以上引用したいのであれば長い引用の方法をとる。

短い引用であれば「」で囲んで文中に書き、出典元を()の中に明記する。たとえば「出版された情報をコンピュータを使って共有しようとする読者は、 法律上は著作権に違反しているのです」(Richard Stallman, 『自由か著作権か?』)

長い引用はblockquoteタグを使う。コードのフォーマットは以下の通り(読みやすさを考慮し整形した)。

<figure>
  <blockquote>
    <p>引用文</p>
  </blockquote>
  <footer>
    &mdash; <cite>著者名</cite>, <cite>本のタイトル</cite>
  </footer>
</figure>

これは以下のように描画される。

しかし、そこには1つの障害が立ちはだかっていました。著作権です。出版された情報をコンピュータを使って共有しようとする読者は、 法律上は著作権に違反しているのです。世界は変わり、かつては出版社にとっての産業上の規制であったものが、 本来奉仕すべき一般の人々に対しての規制となってしまいました。

Richard Stallman, 結城浩 訳, 自由か著作権か?