ナビゲータのEVEです。
経験曲線効果により、クラス製造にめどがたち、画面設計が視野にはいってきました。そんなことを考えながら、こちらも何かしらの規約がほしいな〜、っなんて考えています。
今日は、そんな画面で使用する、HTMLの規約にどのようなモノがあるのか調査します。
[HTML規約]
どんな規約があるのか、本日もChatGPTに聞いてみました。
?W3Cのガイドライン
World Wide Web Consortium (W3C)は、HTMLとCSSの標準を策定している組織です。W3Cは、HTMLの正しい使い方や文書構造についてのガイドラインを提供しています。
・HTML仕様
W3Cの公式仕様を参考にすることで、最新のHTML標準を理解し、正しいマークアップを行うことができます。
?GoogleのHTML/CSSスタイルガイド
Googleは、HTMLおよびCSSのコーディングスタイルに関するガイドラインを公開しています。このガイドラインでは、可読性、構造、アクセシビリティ、パフォーマンスなどに関する推奨事項が含まれています。
?AirbnbのJavaScriptスタイルガイド
AirbnbはJavaScriptに特化したスタイルガイドを公開していますが、HTMLの書き方にも適用可能なルールが含まれています。特に、テンプレートエンジンを使用する場合には、HTMLマークアップのベストプラクティスが記載されています。
?CSS-Tricksのガイドライン
CSS-Tricksは、HTMLやCSSのベストプラクティスに関する多くのリソースを提供しています。特に、セマンティックなマークアップやアクセシビリティの考慮に関する情報が豊富です。
■まとめ
HTMLにはPHPのPSRのような公式な標準規約は存在しないものの、W3Cのガイドラインやさまざまなスタイルガイドを参照することで、品質の高いHTMLを記述するための指針を得ることができます。また、チームやプロジェクトごとにコーディングスタイルガイドを策定し、統一したスタイルで開発を進めることが重要です。
内容を吟味はしていないのですが、JavaScriptでGoogleの規約を採用しているので、画面を操作をするJavaScriptと整合性をとるため、Google HTML/CSS Style Guideを採用したいと思います。
[EVEプロジェクトのHTML規約]
早速、Googleから、当プロジェクトのHTML規約を作成しました。
?一般コーディング規約
1)HTMLで使用するタグは、すべて小文字とする。
2)インデントは、2バイトとする。
3)head、bodyの中の要素は、インデントする
?基本構造
当プロジェクトHTML文書は、基本に以下のような構造とします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<title> タイトル </title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<h1> コンテンツの見出し </h1>
<p> ここにコンテンツが入ります。 </p>
</body>
</html>
?セマンティックなマークアップ
セマンティックなマークアップで記述します。
・header
ページやセクションのヘッダーを表します。
・nav
ナビゲーションリンクの集まりを示します。
・main
ページの主要なコンテンツ部分を示します。
・article
独立したコンテンツ（ブログ記事やニュース記事など）を示します。
・section
セクションを表し、関連するコンテンツをまとめるときに使用します。
・footer
ページやセクションのフッターを表します。
・h
見出しレベルを表すために使用され、コンテンツの階層構造や要点を視覚的に示します。
・figure
画像、図表、コードスニペットなど、説明の必要がある内容を示す場合に使い、キャプションを付けることができます。
・figcaption
画像、図表、コードスニペットなど、説明の必要がある内容を示す場合に使い、キャプションを付けることができます。
・src
画像の説明の必要がある内容を示す場合に使い、キャプションを付けることができます。
・time
日時を示し、検索エンジンやブラウザに日時情報であることを明示します。
・address
連絡先情報を示します。一般的に企業や個人の住所、メールアドレス、電話番号を表します。
?属性の使用
属性値は必ずシングルクォートで囲みます。但し、必要に応じてダブルコーテーションを利用することを許容します。
?アクセシビリティ
アクセシビリティを考慮したマークアップを利用します。
・代替テキストの設定: 画像には必ずalt属性を設定します。
・見出しの階層構造: 正しい見出しタグを使用して、コンテンツの階層を明確にします。
例)h1→h2→h3・・・
?インデントとフォーマット
文書は適切にインデントし、見やすくします。
・ul、olタグなどを使用する。
?HTMLエスケープ
特殊文字は、HTMLエスケープを使用して表示します。例えば、<は＆lt;、>は＆gt;として記述します。
以上です。なんか足りないような気もするのですが、以外については、画面を作りながら、追加していきたいと思います。
[あとがき]
あと、規約として用意しなければならないのは、CSSだけでしょうか？CSSは本格的に作ったことがないので、規約を作りながら勉強することになるかもしれません。早ければ明日、遅くても12月末日までに調査し、準備したいと思います。
では、また！
■Web Content Accessibility Guidelines (WCAG) 2.1
https://waic.jp/translations/WCAG21/
■Google HTML/CSS Style Guide
https://google.github.io/styleguide/htmlcssguide.html
■Airbnb JavaScriptスタイルガイド
https://mitsuruog.github.io/javascript-style-guide/
■CSS-Tricks
https://css-tricks.com/
こんにちは！
ナビゲータのEVEです。
経験曲線効果 により、クラス製造にめどがたち、画面設計が視野にはいってきました。そんなことを考えながら、こちらも何かしらの規約がほしいな〜、っなんて考えています。
今日は、そんな画面で使用する、 HTML の規約にどのようなモノがあるのか調査します。
[HTML規約]
どんな規約があるのか、本日も ChatGPT に聞いてみました。
?W3Cのガイドライン
World Wide Web Consortium (W3C)は、HTMLとCSSの標準を策定している組織です。W3Cは、HTMLの正しい使い方や文書構造についてのガイドラインを提供しています。
・HTML仕様
W3Cの公式仕様を参考にすることで、最新のHTML標準を理解し、正しいマークアップを行うことができます。
?GoogleのHTML/CSSスタイルガイド
Googleは、HTMLおよびCSSのコーディングスタイルに関するガイドラインを公開しています。このガイドラインでは、可読性、構造、アクセシビリティ、パフォーマンスなどに関する推奨事項が含まれています。
?AirbnbのJavaScriptスタイルガイド
AirbnbはJavaScriptに特化したスタイルガイドを公開していますが、HTMLの書き方にも適用可能なルールが含まれています。特に、テンプレートエンジンを使用する場合には、HTMLマークアップのベストプラクティスが記載されています。
?CSS-Tricksのガイドライン
CSS-Tricksは、HTMLやCSSのベストプラクティスに関する多くのリソースを提供しています。特に、セマンティックなマークアップやアクセシビリティの考慮に関する情報が豊富です。
■まとめ
HTMLにはPHPのPSRのような公式な標準規約は存在しないものの、W3Cのガイドラインやさまざまなスタイルガイドを参照することで、品質の高いHTMLを記述するための指針を得ることができます。また、チームやプロジェクトごとにコーディングスタイルガイドを策定し、統一したスタイルで開発を進めることが重要です。
内容を吟味はしていないのですが、 JavaScript でGoogleの規約を採用しているので、画面を操作をするJavaScriptと整合性をとるため、 Google HTML/CSS Style Guide を採用したいと思います。
[EVEプロジェクトのHTML規約]
早速、 Google から、当プロジェクトのHTML規約を作成しました。
?一般コーディング規約
1)HTMLで使用するタグは、すべて小文字とする。
2)インデントは、2バイトとする。
3)head、bodyの中の要素は、インデントする
?基本構造
当プロジェクトHTML文書は、基本に以下のような構造とします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<title> タイトル </title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<h1> コンテンツの見出し </h1>
<p> ここにコンテンツが入ります。 </p>
</body>
</html>
?セマンティックなマークアップ
セマンティックなマークアップで記述します。
・header
ページやセクションのヘッダーを表します。
・nav
ナビゲーションリンクの集まりを示します。
・main
ページの主要なコンテンツ部分を示します。
・article
独立したコンテンツ（ブログ記事やニュース記事など）を示します。
・section
セクションを表し、関連するコンテンツをまとめるときに使用します。
・footer
ページやセクションのフッターを表します。
・h
見出しレベルを表すために使用され、コンテンツの階層構造や要点を視覚的に示します。
・figure
画像、図表、コードスニペットなど、説明の必要がある内容を示す場合に使い、キャプションを付けることができます。
・figcaption
画像、図表、コードスニペットなど、説明の必要がある内容を示す場合に使い、キャプションを付けることができます。
・src
画像の説明の必要がある内容を示す場合に使い、キャプションを付けることができます。
・time
日時を示し、検索エンジンやブラウザに日時情報であることを明示します。
・address
連絡先情報を示します。一般的に企業や個人の住所、メールアドレス、電話番号を表します。
?属性の使用
属性値は必ずシングルクォートで囲みます。但し、必要に応じてダブルコーテーションを利用することを許容します。
?アクセシビリティ
アクセシビリティを考慮したマークアップを利用します。
・代替テキストの設定: 画像には必ずalt属性を設定します。
・見出しの階層構造: 正しい見出しタグを使用して、コンテンツの階層を明確にします。
例)h1→h2→h3・・・
?インデントとフォーマット
文書は適切にインデントし、見やすくします。
・ul、olタグなどを使用する。
?HTMLエスケープ
特殊文字は、HTMLエスケープを使用して表示します。例えば、<は＆lt;、>は＆gt;として記述します。
以上です。なんか足りないような気もするのですが、以外については、画面を作りながら、追加していきたいと思います。
[あとがき]
あと、規約として用意しなければならないのは、 CSS だけでしょうか？CSSは本格的に作ったことがないので、規約を作りながら勉強することになるかもしれません。早ければ明日、遅くても12月末日までに調査し、準備したいと思います。
では、また！
■Web Content Accessibility Guidelines (WCAG) 2.1
https://waic.jp/translations/WCAG21/
■Google HTML/CSS Style Guide
https://google.github.io/styleguide/htmlcssguide.html
■Airbnb JavaScriptスタイルガイド
https://mitsuruog.github.io/javascript-style-guide/
■CSS-Tricks
https://css-tricks.com/
【このカテゴリーの最新記事】
