むらさんWEBデザイン論Ⅱ
前回はこの記事を投稿して、自分的WEBデザイン論を適当に語っていました。
今回は、Googleさまが書いてる「Google HTML/CSS Style Guide」をもとに自分のHTML/CSSに対する知識をアップデートしてみたいと思います。
まあ、ただただこのドキュメントを和訳・要約して感想をつらつら書いていくだけなんですけど。
1. 背景
このガイドがコード品質を向上させることを目的にしてるよみたいなことが書かれています。
2. 全般事項
HTMLとCSSに共通する事項が書かれています。
2.1 全般的なスタイルルール
・ 2スペース分でインデントしてね。タブを使ったり、タブとスペースによるインデンテーションを混ぜないでね。
・ 文字列を除くすべてのコードで小文字だけを使ってね。これはHTMLの要素名、アトリビューション、値、CSSのプロパティ、値に適用されるよ。
・ 末尾の空白はいれないでね。不必要で差分を複雑化させるよ。
・ エンコードについて、UTF-8を使ってね。HTMLのテンプレートやドキュメントでは<meta charset="utf-8">を使ってエンコード設定を明示してね。
・ コードを必要な場合可能な場所で説明してね。何をカバーしているのか、何の目的で存在しているコードなのかなど。コメントの有用性はHTMLとCSSのコード、およびプロジェクトの複雑性によって激しく異なるよ。
・ やるべき事項にはTODOをマークしよう。@@などの一般的な書き方ではなくTODOを使おう。追記として、連絡先には TODO(名前、もしくはメーリス) 、具体的な作業内容は TODO: 作業内容 のようにしよう。
3. HTML
・ ドキュメントタイプはHTML5を使おう。シンタックスは<!DOCTYPE html>があればよい。XHTMLは使わないでね。void要素は閉じないでね。
よい例： <br>
悪い例： <br />・ W3C HTML 検証ツールでHTMLの有効性をチェックしよう。
・ HTMLをちゃんとその目的に沿ったように使ってあげてね。例えば、段落としてp要素、アンカーとしてa要素みたいに。目的あったHTMLを利用することはアクセシビリティ、再利用性、コードの有用な理由などの点から重要だよ。
悪い例： <div onclick="goToRecommendations();">SAMPLE</div>
良い例： <a href="recommendations">SAMPLE</a>・ マルチメディアには代わりのコンテンツを提供してね。できれば画像ではaltを使って代替文字、動画や音声には字幕などをつけようね。これはアクセシビリティの観点から重要だよ。
・ ストラクチャー(マークアップ)とプレゼンテーション(スタイル)とビヘイビアー(スクリプト)は完全に区別して、これらの3つのインタラクションは最小のものにとどめよう。これは、ドキュメントにはHTMLのみを含み、そのHTMLは構造的目的を提供していることを意味するよ。さらに、できる限りスタイルシートやスクリプトとのリンクは最小にとどめよう。これらは、メンテナンスの観点から重要だよ。
・ 文字参照は使わないでね。HTML内で特別な意味を持つ＜や&、空白文字を使うときは例外だよ。
・ オプションタグは省略しよう。ファイルサイズの最適化などの観点からオプションタグの省略を考慮しよう。HTML5 スペシフィケーションが省略可能なタグを定義しているよ。
・ スタイルシート(CSS以外は除く)とスクリプト(JavaScript以外は除く)にはtypeアトリビュートを使わないでね。HTML5 ではtext/cssとtext/javascriptをデフォルトで設定しているよ。
・ ブロック、リスト、テーブル要素ごとに新しい行を使って、子要素にはインデントを入れよう。
・ 長い行は分解しよう。可読性が向上する場合には長い行を折り返すことも考慮しよう。折り返すときには、元の行から最低4つ分のスペースを入れよう。
<md-progress-circular md-mode="indeterminate" class="md-accent"
ng-show="ctrl.loading" md-diameter="35">
</md-progress-circular>
<md-progress-circular
md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35">
</md-progress-circular>
<md-progress-circular md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35">
</md-progress-circular>・ アトリビュートの値を囲むときにはシングルクォーテーションではなくダブルクオーテーションを使おう。
思ったこと
まず、インデントを自分はtabでやっていたのでこれは直さないとなあと思いました。自分が使っているコーディングソフトが自動的にtab1つ分をインデントにしているので癖になっちゃっています。設定をいじっておきます。
コード内で大文字を使わないことも知りませんでした。カラーコードはいつも#FFFFFFみたいに大文字にしていたのでびっくりです。たしかに思えば、<a></a>とかは小文字で書いてたからどっちかで統一したほうがきれいだなあと思いました。
typeを省略できるのは初めて知りました。というか、あまり意識して書いたことがなかったです。いつもつけずに書いていた気がするので。HTML5すげえ。
次回
このドキュメントにはあとCSSルールがあるのでそれを次回読んでいきたいと思います。
超長文になりました。ありがとうございました。
参考
この記事が気に入ったらサポートをしてみませんか？