GoogleによるhtmlやCSSでの推奨の「書き方」指南が HTML/CSS Style Guide で、たくさんの方が既に翻訳されていますので私ごときがいまさらやる必要も無いのですが ←
個人的見解を含め FC2ブログユーザー 向け解説を交えていこうと思います。
(明らかに個人ユーザーに関係ないと思われる項目は省きます)
Google HTML/CSS Style Guide
This document defines formatting and style rules for HTML and CSS.
はじめに
この文書はHTML, CSSの書式設定を明確に定義するためのものです。その狙いは共同開発、コードの質、そして基本構造の向上改善です。この定義はHTMLやGSSを含むCSSが用いられたほとんどのファイルに適用されます。基本コードの品質が保たれている限り、難読化・簡素化・圧縮化などが自由に行なえます。
まず最初はこのガイドが何を目指しているかの説明です。
難読化やコンパイルなどテクニカルな処理をするにはまずコードの書き方の指針をしっかり決めておけ、ということですね。
一般スタイルルール
プロゥトコル
埋め込まれるリソースは可能な限りHTTPSを用います。
各ファイルがHTTPS通信に対応していない限り、画像やその他のファイル、スタイルシート、スクリプトなど、常にHTTPSプロゥトコルを利用してください。
<!-- 非推奨: プロゥトコル省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- 非推奨: HTTPプロゥトコル使用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
HTTP通信を使うこと自体が非推奨ということですよね。しかしFC2ブログではいまだにSSL設定を有効化していない人が多い です。もう提供されて随分経ちますから自主的にONにしてはいかがでしょうか。
設定ページ
SSL設定
混在コンテンツの修正作業、古いウィジェットの整理などの作業は発生するという点を理解した上自己責任で。
以前この項目は「プロゥトコルを省略するのが推奨」だったのですが、Googleによるhttps促進が始まってからは省略が非推奨になりました。httpページでスキームを省略してしまうとせっかくhttpsで取得できる画像などのファイルでも自動的にhttpになってしまうので、まぁ妥当かなと思います。
一般書式ルール
インデント
インデントは2つのスペースで行います。
インデントにタブを利用したり、タブとスペースを混ぜて使用してはいけません。
<ul> <li>Fantastic <li>Great </ul>
.example {
color: blue;
}
最近のコーディング事情でタブをインデントに利用することはまずありません。通例としては半角スペース2つか半角スペース4つで行います。Googleの推奨は「2つ」ということですね。
このページで出てくる「スペース」とは全て 半角スペース のことを指し、全角は含まれません。プログラミング言語に於いて日本語の「全角」を利用することはありませんので注意してください。全角スペース利用によるhtml構文エラーはFC2ブロガーさんに多く見受けられます(カスタマイズ自由度が高いため)
htmlの絶対的NGそれは「全角の利用」
やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。 htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...
大文字・小文字の別
小文字のみを利用してください。
全てのコードは小文字であるべきです。HTMLの要素名、属性、属性値(text/CDATAは除く)、そしてCSSのセレクタ、プロパティ、プロパティ値(文字列による例外あり)など、全てに適用されます。
<!-- 非推奨 --> <A HREF="/">Home</A>
<!-- 推奨 --> <img src="google.png" alt="Google">
<!-- 非推奨 --> color: #E5E5E5;
<!-- 推奨 --> color: #e5e5e5;
構文ルールとして絶対に使用してはいけない、ということではありませんが使わないにこしたことはありません。大文字の使用はGoogleにとって識別リソースの無駄使いです。FC2ブロガーさんの中でもどうしたことかアフィリエイターさんに多かったりします。恐らく慣習的に「テンプレートを変えたらこの内容を移植する」という感じでやっているのではないかと。その前に現在のhtmlの標準仕様などを確認されることをおすすめします。寧ろ一般ユーザーさんの方がたどたどしくとも最新情報を調べつつ… という感じで綺麗にしっかり小文字で書かれていることが多かったり。
末尾の空白
末尾の空白は削除してください。
末尾のスペースは不要ですし、差分を複雑にしてしまいます。
<!-- 非推奨 --> <p>What?_
<!-- 推奨 --> <p>Yes please.
一般メタルール
エンコーディング
UTF-8(BOMなし)を利用してください。
使用エディターの文字コードがBOMなしのUTF-8になっているか確認をしてください。
HTMLテンプレートやドキュメントには <meta charset="utf-8"> を明示してください。スタイルシートにその必要はありません。
FC2ブログテンプレートの文字コード指定は絶対ではありませんが独自変数を用いているものがほとんどです。自動的にUTF-8に指定されるようになっていますので特に問題ありません。
ただしスタイルシートの方なんですが、FC2ブログでは書いておいた方が良いように思います。テンプレートのhtmlと抱き合わせでの利用をしない場合、スタイルシートだけを保存する場合、CSSソース内でコメントアウトを多用している場合など、いろんなケースを考えると文字化け回避のために書いておいた方が良いと個人的に思います。
コメント
可能な場合には必要に応じてコードの説明を付けておきましょう。
コメントはコードの説明に使いましょう: 何を司り、何を目的としているのか、何故各々の策が使われることになったのかなど。
(この項目は任意です。文章による説明が必要とされないケースもあります。HTML, CSSのコード内容には個人差がありますしプロジェクトの複雑さにもよります)
FC2の個人ブロガーであればプロジェクト的なことは考えなくて大丈夫です。個人については自身がテンプレートデフォルトの内容に何かを追加したり変更した際など、作業の意味「何故それを行ったのか」などを記しておけば後々役に立つことがあります。といっても過剰なコメント追加はファイルサイズが大きくなりますので好ましくありません。
html, CSS, JS それぞれ コメントの付け方が違います ので、正しい書き方をするようにしてください。でないと思わぬレイアウト崩れを起こすことがあります。
コメントアウトを活用しよう
コメントアウト とは何か、から始まり、FC2ブログでの活用方法などを記しています。以前にも記事にしたことのある内容ですが改めて新規でUPします。...
HTML
HTMLスタイルルール
ドキュメントタイプ
HTML5を使用してください。
あらゆるHTML文書: <!DOCTYPE html> に於いてはHTML5(HTML構文)を利用します。
(HTMLの使用は text/html であることが最善です。HTMLやapplication/xhtml+xml としてのXHTMLは使わないでください。ブラウザ・インフラいずれもサポートが十分ではありませんし、HTMLと比較して容量の最適化としても劣っています。
HTMLで不正というわけではありませんが、空要素を閉じないでください。つまり <br /> ではなく <br> と書きます。
HTML5を推奨、言い換えるとHTML5以外(以下)のバージョンのHTML及びXHTMLなどは推奨しない、ということです。FC2ブログはたくさんのテンプレートを選べますよね。その大半は HTML4.01 または XHTML です。html5の正式勧告(web記述の水準制定)が2014年10月なので既に4年ほど経過していますが、FC2ブロガーの多くはいまだにhtml4テンプレートを使っているような状況です。その他大手ブログサービスのほとんどはhtml5に移行済みです。
FC2ブログは自由度が高く選択数も多いので仕方がありませんが、運営側では著作権の問題もあり古いテンプレートを整理することも難しいのではないかと思います。ですから各ユーザーが意識的にhtml5のテンプレートを選ぶようにすると良いですね。
最後の一文にあるとおり 空要素に末尾のスラッシュを付けるな と書いてあります。「閉じるな」という表現はつまりスラッシュの有無を意味しています。FC2ブログのエディターはhtml5にはなっていませんので、改行を行うと自動的に <br /> と入ってしまうんですね。XHTMLでは <br /> が正しく、<br> は構文エラーだからです。html5では <br /> は非推奨で使用を辞めてほしいけれども、エラーではありませんのでセーフ。運営としては様々なバージョンのhtml, xhtmlテンプレートを抱えている以上エディター内容を完全html5にするわけにはいかない、というところでしょう。こちらもユーザーが意識的に書く、旧投稿画面を利用するならば「改行の扱い, HTMLタグのみ」と設定して自身で改行タグを書く、という回避策を取ることにになりますね。
また、これもアフィリエイターさんのようなアクセス数を気にする方々に多いのですが、旧式の内容をそのまま移植することが多いようです。
拝見するとこんなのがてんこ盛りになっています。 ↓
<meta name="keywords" content="キーワードA,キーワードB,キーワードC" />
html5テンプレートなのに末尾スラッシュがおもっくそ付いてますし、そもそもmeta keywordsなどもうどこのクローラーもサポートしていません。
HTMLの正確性
可能な限り正しいHTMLを使用してください。
ファイルサイズ最適化など妥協しなければ達成不可能な目的があるのならともかく、原則として正しいHTMLコードを使うようにしてください。
W3C HTML validatorなどのツールを利用しましょう。
正確なHTMLを使うことは一定の品質を保ち、求められる技術に応えることにも繋がり、それこそがHTMLの本来あるべき姿です。
<!-- 非推奨 --> <title>Test</title> <article>This is only a test.
<!-- 推奨 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
FC2個人ブロガーがドキュメントタイプから書くことはまずありませんので例としてはちょっとピンと来ないかな、と思います。みなさんにできることがあるとすれば、テンプレートを利用する前に引用文中にもある「W3C validator」にかけてみるのも良いかもしれません。
W3C HTML validator
More Options をクリックすると Show Source と出てきますので、そこにチェックを入れてから検査します。エラーなどが有った場合、その原因がテンプレート内容にあるのかそれとも自身が書いたコードにあるのか、それともFC2の仕様によるものなのか等を判断することができます。
セマンティクス
目的に沿ったHTMLを使用してください。
なんのために作られた要素(しばしば間違った "タグ" という呼称が使われます)なのかを知り、目的が合致したものを使うようにしましょう。例えば見出し要素は見出しとして、p要素は段落としてa要素はアンカーとして、などです。
目的に応じたHTMLを使うことはアクセシビリティ・再利用性・効率性などに於いて大変重要です。
<!-- 非推奨 --> <div onclick="goToRecommendations();">All recommendations</div>
<!-- 推奨 --> <a href="recommendations/">All recommendations</a>
htmlは「意味」や「定義」であって「見た目」を操作するものではありません。FC2ブログでよく見かけるのが 引用を装飾として利用している パターンですね。引用文は一見して引用とわかるようにテンプレート製作者がスタイリングをしている場合が多いです。そのスタイリングを装飾として利用している方をみかけます。引用というのは他人の文章を借りていますという意味です。自身から発せられる文章に使うものではありませんし、クローラーにも「この文章はこのページ管理人が書いたものではない」と判断されてしまいます。それは貴方自身のサイトの評価を下げることに他なりません。正しい目的で使うように心がけましょう。
あとは「タグなんて呼び方は間違い」とサラっと指摘されています(笑)
「タグを作る」という表現は超おかしいという話し
これよくあるんですけどもね、 「ナビゲーションのタグを作成してみたのですが〜」 「YouTubeのタグを作ってもらえませんか〜」 などなど。 一般人にタグなんか作れるわけねーべや (´・ω・｀) というお話。...
マルチメディア向け代替
様々なメディアに対応できるようにしましょう。
画像・動画・canvasアニメーションなどのメディアは別の手段でのアクセスを確保します。画像であれば意味の通る代替テキスト(alt)を、動画や音声にはtranscriptとcaptionを。
メディア代替を用意することが重要な理由: alt属性が無ければ目の不自由な方へ情報を伝える手がかりがほとんど無くなってしまいます。また他の使用者たちは動画やオーディオの内容を理解する方法すらないかもしれません。
alt属性が冗長になりすぎたり、その目的自体が装飾でありCSSを必要としない場面などこれといった意味を持たない画像の場合には alt="" と無指定にできます。
<!-- 非推奨 --> <img src="spreadsheet.png">
<!-- 推奨 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
画像のalt属性については推奨だとか非推奨だとか言う前に 構文エラー です。alt属性の値を空 alt="" にしておくのはOKですが、alt属性無し(書かない)は認められていません。ところがFC2ブログでは変数を利用したサムネイル画像出力などはalt属性が付きませんので構文エラーとなってしまいます。長く望まれていますのでもういい加減修正してもらえると良いのですが。サーバーサイドの仕様となるとテンプレート製作者にも手出しができませんので、対象変数を使わざるを得ないページ種では私の制作テンプレートでもNOT validになっています(すみません)
構造の分離
構造からは見た目と振る舞いを切り離してください。
厳密に構造(マークアップ)と見た目(スタイリング)とふるまい(スクリプティング)は分離しなければいけません。三者間の相互依存関係は絶対的に最小限に留めるよう心がけます。
テンプレートやドキュメントに記されるのは構造目的のHTMLのみです。見た目に関する全てはスタイルシートに、ふるまいに関する全てはスクリプトに移すようにしてください。
上記に加え、リンクを要するスタイルシートやスクリプトは可能な限り少なくします。
構造と見た目とふるまいを分けることはメンテナンスの観点からも重要です。HTMLの修正は常にスタイルシートやスクリプトのそれと比べて高くつくからです。
<!-- 非推奨 --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css" media="screen"> <link rel="stylesheet" href="grid.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u> <center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center>
<!-- 推奨 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome!
これはもう 心当たりのある人がたくさん居るはず。非推奨コードを見ますと <center> という 廃止タグ がありますね。センタリングに用いるものですが、これこそまさしく「見た目を操作するためだけ」に存在しているhtmlタグです。html5では旧来の見た目を操作するタグは軒並み廃止されています。FC2ブロガーでcenterタグを利用している方はかなり多いと思われる。
あともうひとつ大事なのは、スタイルシートが小分けされて複数記載されています。これらは一つにまとめろよ、ってことです。これも該当者は多いと思います。
任意タグ
任意タグは省略しましょう(とはいえこの件も任意です)
ファイルサイズ削減や管理のしやすさを目的とするならば、任意タグの省略を考えてみましょう。HTML5 specification で省略可能な任意タグを定めています。
<!-- 非推奨 --> <!DOCTYPE html> <html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body> </html>
<!-- 推奨 --> <!DOCTYPE html> <title>Saving money, saving bytes</title> <p>Qed.
こちらについては おすすめしません。いえ、初心者には おすすめしません。上級者は何やったって良いです。テンプレート制作的にも省略は今後もしない方向です。何故なら一定条件の存在があるからです。「こういう場合はダメ」という条件ですね。みなさんがちょっとカスタマイズしただけでその条件に触れてしまうことが大いに考えられます。それからテンプレートカスタマイズ時の「手がかり」が減少してしまうんですね。例えば 「</body> の直前に記してください。」とかよくあるんですけども、そのbody終了タグが存在しなければ何を目印にしたら良いのか(笑)
省略できる任意タグはカスタマイズ指南の目印に使われることが多いんですよぅ。記事内容については自己責任ですからやっても良いと思います(初心者以外)
type属性
スタイルシートとスクリプトのtype属性は省略してください。
スタイルシート(中身がCSSでない場合を除く)のtype属性及びスクリプト(中身がJavaScriptでない場合を除く)のtype属性は共に書かないようにしてください。
HTML5では text/css と text/javascript は初期値ですから書く必要がありません。古いブラウザでも誤解釈の危険性はありません。
<!-- 非推奨 --> <link rel="stylesheet" href="https://www.google.com/css/maia.css" type="text/css">
<!-- 推奨 --> <link rel="stylesheet" href="https://www.google.com/css/maia.css">
FC2ブログ運営が挿入するスクリプトにはtype属性がくっついてます。こちらはどうにもできませんが、みなさんがhtml5テンプレートにスタイルシートやスクリプトを追加される際には省略するよう心がけましょう。
HTML書式ルール
一般書式
ブロック要素・リスト要素・テーブル要素毎に新しい行に更新し、全ての子要素にはインデントを適用してください。
こちらについてはほとんどのテンプレート製作者がそのように書いているはずです。みなさんの記事作成に関して言えば やらなくて良い と思います。何故なら旧投稿画面を利用している方の多くが「改行の扱い 自動」に設定しているからです。自動設定の場合にはhtml要素を横ひと繋ぎでかかないとhtmlとして認められませんし、インデントなんてもってのほか(笑)
上級者さんで「記事はhtml専用エディターで書いてFC2ディターにコピペしている」という方以外にはすすめません。ちなみに私はFC2エディターにベタ打ちしています。改行の扱いはhtmlのみにし、ソース間改行(推奨内容)はしていますがインデントは「どうにも見づれぇ… 」という場合のみ付けたり付けなかったり (o'ω')ﾉ
CSS
CSSスタイルルール
CSSの正確性
可能な限り正確なCSSを書くようにしてください。
ここはhtmlに続きごく当たり前のことなので飛ばします。CSSは結構飛ばす項目多いかもです。
タイプセレクタ
IDやclass名にタイプセレクタを付けた制限を行わないでください。
必要に迫られることが無い限り(例えば補助クラスなど)、要素名をIDやclass名と一緒に書かないでください。
不必要な先祖セレクタを避けることはパフォーマンス向上に繋がります。
<!-- 非推奨 --> ul#example {} div.error {}
<!-- 推奨 --> #example {} .error {}
非推奨の方はIDセレクタの #example の前にさらにタイプセレクタの ul がついています。CSSのセレクタマッチングは右から左へ向かって行われますので、まずページ内から要素名を問わず example のIDを持つ要素を探し、続いてさらに要素名が ul であるものを探します。IDというのはページ内に単一でしか存在してはいけないものですから、このIDだけで要素特定は可能。つまり先祖のulを記す必要はどこにもありません。マッチング作業が増えるだけでなんのメリットも無い。
こういった要素名付きでセレクタ指定せざるを得ない場合というのは例えば「サムネイル表示あり関連記事リスト」のように、ユーザーがhtmlを触れない場合には使う可能性があります(ただし関連記事リストについては設定変更でhtml操作は可能です)
ですが記事内やテンプレートなどはユーザーの好きにできるわけですから、要素名を書く必要はまず生じないはず。でも見ていると結構いらっしゃいますね。無駄にタイプセレクタを書いている人。IDやclassがスタイリング対象要素にダイレクトに記されているのであれば、そのIDまたはクラスをセレクタ指定すれば十分です。
致し方ないパターンを考えると以下のような感じでしょうか。
<div class="xxx">
<ul>
<li>One
<li>Two
</ul>
</div>
<section class="xxx">
<h3>見出し</h3>
<ul>
<li>Uno
<li>Dos
</ul>
</section>
div.xxx {
display: block;
}
section.xxx {
display: inline-block;
}
外部ウィジェットやdocument.writeのよるhtml書き出しなどを除けばほとんどのhtmlを操作できるはずですから、この場合は素直にdivとsectionに別のクラスを当てれば良いだけの話です。
ショートハンドプロパティ
可能な限りショートハンドプロパティを利用してください。
CSSでは様々なショートハンドプロパティ(fontなど)が用意されています。可能ならば常に使うようにします。例えセットする値が一つしかないとしてもです。
<!-- 非推奨 --> border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
<!-- 推奨 --> border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
例えセットする値が一つだけでも えー、そうなんですね？私やってないですね。反省 ^^;
ただこのショートハンド、指定に漏れたあった場合には問答無用で初期値が適用されます。なので使用する際には「何がかけるのか」をしっかり確認し、指定すべき内容に漏れが無いようにしなければいけません(もちろん初期値で構わないのならOKですが)
そういった意味ではやはり上級者向けかなぁ、と思います。
先頭のゼロ値
値の先頭の 0 は省略してください。
-1 から 1 間の数字では先頭に 0 を置きません。
<!-- 推奨 --> font-size: .8em;
CSS書式ルール
宣言の順序
アルファベット順に宣言してください。
統一性のあるコードを達成するためにはアルファベット順が適しています。簡単で覚えやすく継続しやすいからです。
これは賛否両論あると思います。MozillaはGoogleとは違い、「視覚整形モデル」に重点を置いていかに効率良く指定するか、という感じです。ここは好みの問題かなぁと思います。といってもほとんどのユーザーさんは既製テンプレートを利用するでしょうから製作者の意向次第ということになりますよね ^^;
まとめ
CSSの方は随分はしょりましたが、FC2の特徴なども絡めつつ説明してみました。一番は「古い書き方から脱する」ことではないかと思います。それにはまず「html5テンプレートを利用する」ことが先決ですよね。
ということで、Googleの推奨内容のご紹介でした。
There are no comments yet.