ガイドライン

コーディングには様々な方法があります。
各々のやり方でコーディングしては品質のバラつきや複数人で作業する際に連携が難しくなるため、
以下のガイドラインに則ったコーディングを行ってください。

7つの方針

  • 文書構造的に正しいマークアップを行なってください。
  • タグ(divやspanなど)を過剰に使用したコードを書かないでください。
  • CSSハックを安易に使用しないでください。
  • コンテンツの増減で崩れない構造にしてください。
  • 同一サイトでダブルスタンダードなことをしないでください。
  • 同一デザインのスタイルを2つ以上作成しないでください。
  • 自分でコーディングしたものの品質に責任を持ってください。

解説

HTMLコーディングはクオリティが表面に現れにくい作業です。
どんなに無駄なコードが多くても見た目や動きがデザインと合っていれば、ユーザーが使うものとしては問題ないと言えます。

しかし、Webサイトは作って終わりではないく、その後には必ず更新があります。
それがコーディングを担当した人ではないことは多々ありますし、半年後、1年後ということもあります。

そのため、更新性を考えずにデザインをただ再現しただけの冗長なコードや、その場限りのコードを書いてしまうと、更新する人はコードの把握に時間がかかります。また、問題も起こりやすくなりますし、更には問題が起きたときにも原因の特定が難しくなります。

以上の理由から、HTMLコーディングは単にデザインを再現するだけではなく、後のことやを考え更新性のあるコードにする必要があり、そのための方針です。

マークアップ

マークアップはコーディングにおいてとても重要な作業です。
HTMLの本質は文書の構造化であり、マークアップはそのための手段です。

正しいマークアップを行なうためにはHTMLタグ一つひとつの意味を理解し適切に判断して使用しなければいけません。
そのためのガイドラインを以下に示します。

意味・用途 HTMLタグ 解説
見出し h1~6

見出しに使用してください。

dt要素との使い分けに迷うことがありますので以下の基準で判断してください。

  • そのテキストがページの目次として適しているか
  • そのテキストに対するコンテンツがあるか

HTML5のsectionタグで文書の階層構造を表している場合に、見出しレベルの数字は1~6のどれを使っても仕様上の問題はありませんが、コードを読んだ際に階層レベルがわかりにくいため、sectionタグを使っていたとしても階層レベルに合わせて数字を増やしてください。

※h1のマークアップについては「SEOについて」の項目参照

段落 p

段落(複数の文から構成される文章)に使用してください。

Webならではの表現である「もっと見る」などのテキストに使うかどうかで判断に迷うことがありますが、ナビゲーション用のテキストの場合はaタグでリンクという意味をつけているため、それに対して更に段落という意味を付ける意味はないと考えます。

その他にも段落とは言えず、どのようなタグも適していないテキストがでてくることがあります。
そういったときにはdivタグかspanタグを使用してください。

リスト ul > li

順序に意味がないリスト(箇条書き)に使用してください。

間違えがちなケースとして、デザイン上で箇条書きのような装飾がされている文章に使ってしまうことや、順序に意味がある箇条書きに使ってしまうことが挙げられます。

これらの間違いは、文章の先頭に中黒(・)やその他記号、番号が付いているかどうかだけで判断してしまった際に起きます。
文章を確認し、箇条書きといえる内容(端的で長文を含まない)かどうか、順序に意味があるかどうかを判断してマークアップしてください。

順序リスト ol > li

順序に意味があるリスト(箇条書き)に使用してください。

ulタグによるマークアップの考え方に加えて順序に意味があるかどうかで使い分けます。

間違えがちなケースとして、他に適切なものがあるのにもかかわらず、頭文字に番号が入っているからといって使ってしまうことがあります。
番号が付いている=olタグではないため、まずは箇条書きとして適切かどうかを判断した後に順序に意味があるかどうかを判断し使ってください。

定義リスト dl > dt + dd

用語とその説明から構成される文章に使用してください。

用語以外にも、新着情報の年月日(dtタグ)と内容(ddタグ)や対話型の文章の中で話者(dtタグ)とその内容(ddタグ)にも使用します。

汎用性が高く、用途も広いため便利なタグですが、よく考えずに使ってしまうと見出しとその文章をdlタグでマークアップしてしまうなど誤った使い方をしてしまうことがあります。
それを防ぐために、他に適切なタグがないかを考えてから使ってください。

table > thead > tr > th + td
table > tfoot > tr > th + td
table > tbody > tr > th + td
table > caption

表に使用してください。

他のタグとは違い対象となるテキストが明確なため、誤った使い方をすることは稀ですが、以下に注意してください。

  • 表の項目名となる内容にはthタグを使う
  • 表のヘッダーはtheadを使う
  • 表のフッターはtfootを使う
  • 表の本文にはtbodyを使う
  • 表の説明文にはcaptionを使う
注釈・細目 smallHTML5

免責・警告・法的規制・著作権・ライセンス要件などを注釈・細目に使用してください。

一般的なWebサイトでよくあるものとしては、コピーライトが挙げられます。


HTML4(XHTML1.0)では意味を持たず、フォントを小さくするための装飾用のタグでしたが、HTML5になり意味が付与されました。
そのためHTML4とは用途が異なりますので、間違って使うことがないよう注意してください。

お問い合わせ・連絡先 address

そのページに関するお問い合わせ先・連絡先に使用してください。

間違えがちなケースとして、あらゆる住所・連絡先に使ってしまうことが挙げられます。
住所=addressタグではなく、冒頭でも述べた通り「そのページ」に関するお問い合わせ先・連絡先が対象になります。


HTML4ではコピーライトのマークアップにも使われますが、HTML5ではその役割をsmallが担っているため使用しないでください。

記事 articleHTML5

このタグでマークアップされた内容が独立したコンテンツとして成り立つものに使用してください。

ブログ記事・ニュース記事・新着情報などが対象になります。 独立しているかどうか判断に困ることがありますので、以下を判断基準としてください。

  • RSSフィードで配信するコンテンツか
  • そのコンテンツだけを抜き取ってWordに貼り付けたとき、何のコト・モノについて言及したコンテンツなのか理解できるか

それでも困った場合には使用しないでください。

セクション sectionHTML5

見出しとその内容からなる構造の文書に使用してください。

間違えがちなケースとしては、bodyタグ直下に入れるべきh1タグをsectionタグで囲ってしまうことが挙げられます。
この場合のh1タグはbodyの下に作られたサブセクションの見出しとなり、body自体の見出しが無いことになります。

sectionタグ以外にも、セクショニング・コンテンツに属する以下のタグがセクションを作ります。他に適切なタグがある場合はsectionタグではなく、そちらを使うようにしてください。

セクショニング・コンテンツ
  • section
  • article
  • aside
  • nav

以下のセクショニング・ルートに属するタグは独立したセクション構造を作ります。セクショニング・ルートの内部のセクション階層は、外側のセクション階層には含まれないことに注意してください。

セクショニング・ルート
  • body
  • blockquote
  • details
  • fieldset
  • figure
  • td
ヘッダー headerHTML5

セクショニング・コンテンツかbody(文書全体)のヘッダーに使用してください。

従来のdiv#headerとしていた部分をheader#headerと置き換えられます。
IDを付けないと複数箇所でheaderタグを使用した際に区別してスタイルを付け辛くなってしまいますので、注意してください。

フッター footerHTML5

セクショニング・コンテンツかbody(文書全体)のフッターに使用してください。

従来のdiv#footerとしていた部分をfooter#footerと置き換えられます。
IDを付けないと複数箇所でfooterタグを使用した際に区別してスタイルを付け辛くなってしまいますので、注意してください。

余談・補足情報 asideHTML5

文章の本筋ではないが、余談・補足程度で軽く触れている文章や関連する広告・商品に使用してください。

文章の意図や書き手の考えを汲み取らなければ正しく使用できないため、使用が難しいタグの一つです。
以下の基準で判断し、それでも使用に迷った場合は使わないでください。

  • このタグでマークアップされた文章が削除された場合にコンテンツが破綻しないか
本文から参照
される図版
figureHTML5

本文から参照される図版(挿絵・動画・図表・写真・コードなど)に使用してください。

このタグも使用が難しいタグの一つです。
以下の基準で判断し、それでも使用に迷った場合は使わないでください。

  • 挿絵・動画・図表・写真・コードか
  • 自己完結しているか
  • 本文から切り離された場所にあるか
キャプション figcaptionHTML5

figureタグでマークアップされた内容のキャプションに使用してください。

稀にfigureタグの中で図版の前後にキャプションのような文章が存在する場合があります。
figureタグの中で使えるfigcaptionタグは1つと決まっていますので、そういった場合にはキャプションとして一番最適なものにfigcaptionタグを使用し、それ以外は普通のマークアップをしてください。

フォームの項目名 label

inputタグやselectタグなど入力要素に対する項目名に使用してください。

このタグでマークアップされた内容をクリックしたときに、フォーカスが対象の要素に移るようにfor属性を指定してください。

マークアップのコツ

マークアップをするうえで最大の問題となるものがデザインです。
デザインの表現は、ときに文書構造を無視し見た目を優先します。
そういったデザインを見たままマークアップしてしまうと誤った文書構造になっていまいます。

そうならないために、マークアップの際にはデザインを無視し、目次は何か、見出しとそれに対応する文章は何か、文章は段落なのか箇条書きなのかを考えながら1サイトを1冊の本にするイメージで行なうことで正しい文書構造を考えながらマークアップすることができます。

スタイルシート

スタイルシートは複雑化しやすいため、統一されたルールに則った構造設計や記述を行ってください。

CSSファイルの分け方

CSSファイルはそのサイト共通で使用するスタイルを記述するものと、ページごとに使用するものとで分けてください。
なお、CSSシグネチャを使用する場合はページごとにはなりません。

理由

全てのスタイルを一つのCSSファイルにまとめてしまうと目的のスタイルへのアクセスが遅くなるため、メンテナンス性の低下に繋がります。
また、複数人で同時作業する場合には共通スタイルと個別スタイルを分担して作業できるメリットがあります。

ID・Classの使い分け

極端なことを言ってしまうとClassだけでもコーディングは可能ですが、特定のルールに則って使い分けることでソースを把握しやすくなりますので必ず使い分けをしてください。

ID
  • ヘッダー・フッター・メインコンテンツ・サイドバーなど大枠のレイアウトワイヤースタイル
  • 恒久的にページで唯一となるコンテンツのスタイル
  • ページ内で章にあたるコンテンツの最上位階層の要素(ページタイトルがh1とするならh2レベルのコンテンツ)
  • ページ内アンカーの対象となる要素
Class
  • サイト共通のスタイル
  • IDに当てはまらない全てのスタイル

理由

HTMLのIDはページごとユニークであればいくつ使っても仕様上の問題はありませんが、かと言って細い所までIDを使ってしまうとメンテナンス性が低下します。

例えばコンテンツごとにリード文がある場合、それら全てに#leadというIDをつけることはできませんので、プレフィックスとしてコンテンツ名を付けて#contactLeadや#serviceLeadといったID名になります。

これではID名が冗長になってしまいますし、共通のスタイルがある場合は同じ内容を2つのセレクタに記述するかグループ化しなければいけません。

リード文をIDではなくClassにした場合はどうでしょうか。

名前は.leadで統一されプレフィックスもつかず簡単シンプルです。
リード文が同じデザインであれば.leadとしてどこでも使えるモジュール型のスタイルとしてcommon.cssに記述して使うこともできますし、特定のコンテンツだけ余白が違うといったイレギュラーなものも、セクションごとにIDが振られていれば子孫セレクタで対応できます。
セレクタも#contact .leadとなるため、どこで使われているスタイルかわかりやすくなります。

ID・Class名の付け方

ID・Classはその名前からページ上のどこに使われているのか推測出来るものにしてください。

例えば#headerというID名の場合、ページ上のヘッダー部分に使われているだろうということが推測できます。
なお、コンテンツ特有のIDが必要な場合はコンテンツ名を英語に翻訳したIDになります。このとき、文字数が多すぎるとコードが読みにくくなるため、特徴的な単語を抜き出しても構いません。

理由

コーディングの中で名前を考える機会は幾度となくあります。その中でもID・Class名には多くの時間が割かれます。
また、ID・Class名から何のためのスタイルかを判別できるとメンテナンス性は大幅に向上します。

セレクタの書き方

  • 共通スタイルはどこでも使えるようにIDを含めない。
  • 共通スタイル以外は必ずIDから始める。
  • 要素セレクタは必要性がなければ安易に使わない。
  • 全称セレクタは使わない。
  • グループ化したセレクタは見難くならないよう適度に改行する。
  • HTMLに出てくるコンテンツの順番とセレクタの順番を同じにする。

解説

セレクタは書き方によってその後のコーディングやメンテナンスに大きく影響を及ぼすため、よく考えて作成しなければいけません。

例えば.titleというよく使いそうなクラスを.title { background-color: #ffc; }というセレクタで作成してしまうと他のコンテンツで使用するときに別名のクラスを付けるか#コンテンツ .title { background-color: transparent; }というセレクタにしてCSSプロパティを上書きしなければいけなくなります。
これでは別名を考える時間やCSSプロパティを上書きする手間など無駄が発生しますし、スタイルシートが複雑になってしまいます。

また、そのときは問題なくても後々コンテンツを追加したときにそのセレクタが影響を及ぼし、コーディングが面倒…ということもよくあります。

この問題は後先を考えずに目の前のデザインをコーディングするためだけにセレクタを作成している人や、全てのデザインが揃わない段階でコーディングに入らなければいけない状況のときなどに起こりがちです。

ルールの1~5番はこの問題が人・状況を問わず起こらないようにするためのものです。
6~7番はコードの読みやすさに関するものなため必須ではありませんが、1~4番は厳守してください。

ショートハンドの使い方

  • 親要素のスタイルが継承されるプロパティでは使用しない。
  • 共通スタイルの上書きなどで同じ値が指定されるときは使用しない。
  • 指定する値が一つのときは使用しない。
  • fontのショートハンドはbodyなどルート要素だけに使用する。

解説

ショートハンドはコードを短くできるため素早くスタイルを記述できて便利な記述方法です。 しかし、便利だからと言って考えもせずに使ってしまうと、同じ値を2重で指定してしまったり、省略したプロパティの初期値でスタイルが上書きされて値の継承をしたいところでされなかったりと問題や無駄を発生させます。

例えば、「共通スタイルのmarginを特定のコンテンツで変えたい。」というときにショートハンドを使ってしまうと、変更しないプロパティには同じ値を指定しなければいけなくなります。 これでは、共通スタイルのmarginを変更しても全てのスタイルに変更されなくなってしまいます。

推奨されないショートハンドの使い方
.style {
	margin: 30px 10px 10px;
}

#content .style {
	margin: 40px 10px 10px;
}
推奨されるショートハンドの使い方
.style {
	margin: 30px 10px 10px;
}

#content .style {
	margin-top: 10px;
}

なお、継承の問題はinheritを使うことで解決できますが、Internet Explorer 6~7が対応していません。
また、コードが冗長になり複雑化するため、継承をしたいのであれば無理にショートハンドを使わない方が柔軟なスタイルシートになります。

プロパティの順序

スタイルプロパティは次の順番になるようにしてください。

  1. box-sizing
  2. margin、padding
  3. width、min-width、max-width
  4. height、min-height、max-height
  5. background、background-color、background-image、background-repoeat、background-position、background-size
  6. border、border-width、border-style、border-color、border-radius
  7. outline、outline-width、outline-style、outline-color
  8. table-layout、border-collapse、border-spacing、empty-cells、caption-side
  9. box-shadow
  10. list-style、list-style-type、list-style-image、list-style-position
  11. overflow
  12. opacity、visibility
  13. display、box-flex
  14. float、clear
  15. position、top、right、bottom、left、z-index
  16. color
  17. font-size、font-weight、font-style、line-height、letter-spacing
  18. text-align、text-decoration、text-shadow
  19. vertical-align
  20. content
  21. zoom
  22. その他

ベンダープレフィックスの順序

  1. -webkit-
  2. -moz-
  3. -ms-
  4. -o-
  5. ベンダープレフィックスなしのプロパティ

※そのサイトでサポートするブラウザに合わせて1~4は削除してください。

サンプル
.style {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.style {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -o-box;
	display: box;
}

解説

ベンダープレフィックスの順序には見た目以上の理由はありませんが、ベンダープレフィックスなしのプロパティは必ず最後に指定してください。

理由としてはベンダープレフィックス付きのプロパティはブラウザが独自に拡張したものや、勧告候補前のものを先行実装しているものに対し、ベンダープレフィックスなしのプロパティは正式にサポートされたものですので、正式にサポートされた際にはそちらが適用されるようにした方がよいからです。

CSSハック使用時の心得

  • 使わずに対応できないか熟考すること。
  • HTMLのタグを多少増やすことで対応できる場合は使わないこと。
  • Internet Explorer6~7だけのCSSハックで済まないか熟考すること。
  • 条件付きコメントで対応できないか熟考すること。
  • ブラウザごとのテキストベースラインや行間の微妙なズレまでCSSハックで調整しないこと。

解説

CSSハックはクロスブラウザ対応をするためには便利ですが、原理としてはブラウザ実装のスキを突いて利用するものです。
そのため、そのときは問題を起こしていなかったとしても、バージョンアップしたブラウザではそのCSSハックが原因で問題を起こしてしまう危険性があります。

今は条件付きコメントを使い、htmlタグにInternet Explorerのバージョンをクラスで付ける手法もありますので特定バージョンのInternet Explorerにスタイルを適用させたいのであればその方法を推奨します。

<!--[if IE 6]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" class="ie6 lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" class="ie7 lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" class="ie8 lt-ie9"><![endif]-->
<!--[if IE 9]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><!--<![endif]-->

調整用のClassについて

調整用のClassとは例えば、.mb0 { margin-bottom: 0 !important; }.taCenter { text-align: center !important; }といったClassのことです。こういったClassは多用しないようにしてください。

よくあるのがコンテンツの最後でpタグの下マージンを消すために.mb0と指定している場合です。
この場合はコンテンツの最後なので.lastChildというクラスを付けた方が適切ですし、Classさえついていれば複数のプロパティを指定できるため汎用性があります。

ではどういったときに使用するのかというと、表の中でセル別にテキスト位置を指定したいときや、フォーム要素の幅を指定したいときが望ましいです。

理想を言ってしまえばこういった部分にもClassを付けた方が適切なのかもしれませんが、個数が多くなりがちでそれぞれに適切な名前を考えることに時間がかかってしまううえに、Classを指定しても単一のプロパティしか指定しないことが多く、これでは微調整用クラスを付けている状態と変わりませんので許容範囲とします。

フォント周りの単位指定について

font-size(PCサイトの場合)
emを使用し相対値で指定してください。このとき、指定したいpxをemに変換した数値を求めたいときにはPXtoEM.comを使用してください。
font-size(スマートフォンサイトの場合)
remで指定してください。
line-height
単位なしで指定してください。
解説

PCサイトでフォントサイズをemを使い相対値で指定する理由は、Internet Explorer 6で絶対値で指定されてる場合に、ブラウザの設定で文字を拡大しても拡大されないという問題が起き、ユーザビリティ・アクセシビリティの低下に繋がることがあるためです。
Internet Explorer 6は今となっては対応することが少なくなってきているブラウザですが、今後同じ問題を発生させるブラウザがでないとは限りませんので、問題が少ない相対値での指定としています。

スマートフォンサイトも同じような理由から相対値で指定しますが、%ではなくremを使用する理由は、相対値での指定は計算が必要になり時間がかかるというデメリットがあるためです。
しかし、remはrootであるHTMLのフォントサイズを基準とした相対値指定となるため、HTMLを10pxとしておけば14pxのときは1.4rem、26pxのときは2.6remといった形で計算せずに指定したいpxを相対値で指定できるため簡単に扱うことが出来ます。

最後に行間であるline-heightの指定ですが、単位に関する解説をする前に、行間がどのようにして設定されるのかを解説します。

line-heightによる行間の指定は行と行の間の余白を指定しているわけではなく、はfont-sizeとline-heightが掛け合わされた値が一行の高さとして指定されます。
例えば、p { font-size: 14px; line-height: 1em; }といったスタイルの場合には一行の高さが14pxとなります。
つまり、line-heightによる行間の指定は、直接的には一行の高さを計算するための指定であり、それが間接的に行間の指定となっているわけです。
以上のことを踏まえたうえで、本題の単位を指定しない理由の解説に入ります。

単位を指定した場合には親要素の一行の高さを子孫要素に継承し、指定しない場合にはline-heightの値を子孫要素に継承します。
例えば一行の高さが14pxで継承されてしまうと、子孫要素のfont-sizeが26pxだった場合に一行の高さが文字の大きさがより小さくなり、テキストが重なってしまいます。
対してline-heightの値を継承した場合には、子孫要素のfont-sizeとline-heightが掛け合わされて一行の高さを算出するため、font-sizeに適した値になります。

下図は単位を指定した場合(上)と単位を指定しない場合(下)のサンプルです。
一行の高さが継承されることによって行間がおかしくなっていることがわかります。

JavaScript

  • HTMLやCSSで出来ないかを考えてから使用してください。
  • 何をしているものかコメントを付けてください。
  • 動作チェックの他に、見ただけでは分からないようなエラーがでていないか各ブラウザのデベロッパーツールのコンソールで確認してください。
  • 外部JavaScriptファイルの読み込みは、動作に問題がない限りは</body>の直前で行い、問題がある場合には<head>...</head>内で読み込んでください。
  • 複数のページで使うことが想定されるものはcommon.jsにまとめてください。
  • jQueryプラグインやその他ライブラリは軽量化(ミニファイ)されたものを使用してください。

解説

JavaScriptは便利ですが、HTMLやCSSで出来ることまでJavaScriptを使ってしまうとパフォーマンスは落ちてしまいますので安易に使うべきではありません。
また、JavaScriptのチェックも必要ととなるうえに、使用している言語が増えることでコードの理解にも時間がかかります。
そのため、JavaScriptを使用する必要があるかよく考え、使用する場合には何のためのJavaScriptかコメントを記述してください。

なお、外部JavaScriptファイルの読み込みですが、<head>...</head>内に記述してしまうと、そのファイルの読み込みが完了するまで他のファイルの読み込みをブロックするブラウザがあるため</body>の直前としてしますが、HTMLや画像の読み込みが終わる前に実行しておかなければいけないものや、そうしなければ画面のカクつきやユーザーに見えなくてもいいものが見える場合にはこの限りではありません。

画像スライス

JPEG・PNG・GIFの使い分け

JPEG
カメラで撮ったようなフルカラーの画像やグラデーションがかかっている色数が多い画像に使用してください。
圧縮率はFireworksでは90%、Photoshopでは80%で書き出してください。
PNG-32(24)
2色以上の透過色がある画像に使用してください。
ただし、透過PNGはInternet Explorer6で未実装だったり7~8でもバグがあったりと、使用に注意が必要な形式です。
また、ファイルサイズも大きくなりますので、極力使わずに済むようにスライスを工夫してください。
PNG-8
256色に収まるイラスト・ボタン・アイコンなどに使用してください。
GIF
GIFアニメーションにのみ使用してください。

解説

JPEGはフルカラーに対応でき、更に画質を調整することでファイルサイズを抑えることができるため、透過色がなく色数が多い写真やグラデーションに向いています。
それに対しPNG-32(24)はフルカラーには対応していますが、画質の調整ができないためJPEGよりファイルサイズが大きくなります。しかし、複数の透過色を設定できるため、背景を透かして見せるような画像に向いています。

PNG-8とGIFは同じような特徴を持っていますが、PNG-8はPNGGauntletによるファイル削減が容易なことと、画像のアニメーションはクロスブラウザの観点からGIFが最適なことを踏まえて、ウェブサイト上でよく使われるイラスト・ボタン・アイコンはPNG-8で、アニメーションはGIFとした方が拡張子から画像の役割を推測しやすくなります。

Fireworks・Photoshop(Illustrator)での書き出し設定

Fireworks

JPEGの設定

PNGの設定

GIFの設定

Photoshop(Illustrator)

JPEGの設定

PNGの設定

GIFの設定

スマートフォン対応

Viewportの設定

リキッドデザイン(ユーザーによる表示倍率の操作不可)

リキッドデザインのときは回転しても表示倍率や文字サイズが変更されないよう以下の設定をしてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
body {
  -webkit-text-size-adjust: 100%;
}

User-scalableを0にしないと回転したときに表示倍率が変わってしまいますが、ユーザーが拡大・縮小操作をできないといったデメリットもあるため仕様を確認して下さい。

フィットデザイン(ユーザーによる表示倍率の操作不可)

端末の幅に合わせてコンテンツを拡大・縮小してフィットさせたいというときには以下の設定をしてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
/* common.js */
;(function($){
	var portraitWidth, landscapeWidth;
	$(window).on('resize', function(){
		if(Math.abs(window.orientation) === 0){
			if(/Android/.test(window.navigator.userAgent)){
				if(!portraitWidth)portraitWidth=$(window).width();
			}else{
				portraitWidth=$(window).width();
			}
			$("html").css("zoom" , portraitWidth/320 );
		}else{
			if(/Android/.test(window.navigator.userAgent)){
				if(!landscapeWidth)landscapeWidth=$(window).width();
			}else{
				landscapeWidth=$(window).width();
			}
			$("html").css("zoom" , landscapeWidth/320 );
		}
	}).trigger("resize");
})(jQuery);
フィットデザイン(ユーザーによる表示倍率の操作可)

リキッドデザインかつユーザーがピンチイン・アウトで表示倍率を変えたいというときには上記のJavaScriptはそのままにviewportを以下の設定にしてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Ratina(高解像度)ディスプレイへの対応方法

デザインデータが640pxのサイズで作られている場合は、高解像度ディスプレイ向けのデザインになっていますので以下のルールでスライスと配置をしてください。

  • 画像サイズは余白を含めてよいので偶数にすること。
  • imgタグで配置するときはwidthとheightを画像サイズの2分の1の値で指定すること。
  • 背景に指定するときはbackgrond-sizeで2分の1の値を指定すること。
解説

320pxの画像を高解像度ディスプレイで表示すると、2倍に引き伸ばされたようなぼやけた表示になります。
詳しい説明はガイドラインの意義から逸れるため省略しますが、この問題を解決するためには640pxで画像を用意して320pxで配置します(32pxのアイコンなら64pxにします)。

そのため、画像サイズは偶数にしなければ2分の1にしたときに小数点が付いてしまいます。
Px単位で小数点を使うと四捨五入(TODO:要検証)されますので、widthが偶数でheightが奇数だった場合に縦横比が変わってしまうなど問題が起こります。

レスポンシブ・ウェブ・デザイン対応

コーディングする順番

レスポンシブ・ウェブ・デザインでは、モバイルファーストで考えることが重要です。

解説

例えば、PCのデザインで左右に写真があるデザインがあった際、PCはどちらを先にマークアップしたとしても、CSSで調整が可能です。(基本的には左が先ですが)
しかしスマートフォンでは、その写真が上下に並ぶデザインになる可能性があります。その場合、マークアップは必ず上から順に並べてマークアップする必要があります。PCを基準にしたがゆえの問題を防ぐために、スマートフォンを基準に考えます。

ブレイクポイントの基準・書き方

ブレイクポイントは下記を基準に設定します。
ただし、あくまで基準のためデザインや対応デバイスによっては変更します。

スマートフォン
0~736px
タブレット
737px~1000px
PC
1001px以上
/* ここにスマートフォン用のCSS */

@media only screen and (min-width: 736px and max-width: 1000px) {
	/* ここにタブレット用のCSS */
}

@media only screen and (min-width: 1001px) {
	/* ここにPC用のCSS */
}

メディアクエリを記述する箇所

スマートフォン用のCSSを記述し終えた下に、タブレット用のCSS、PC用のCSSを記述してください。
デフォルトでスマートフォン用のスタイルを定義し、タブレット/PC用のスタイルをMedia Queriesを使って上書きしていくモバイルファースト的な方法です。

解説

要素ごとに調整を行うよりも、スマートフォンの調整やタブレットの調整といったデバイスごとの調整を行うことの方が多いため、デバイスごとにまとめて記述するようにします。

要素の表示・非表示の仕方

「.hidePC」、「.hideTab」、「.hideSP」などのクラスを付け、display:block;display:none;で要素の表示・非表示を切り替えます。

.hideTab, .hidePC {
	display: block;
}
.hideSP {
	display: none;
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
	.hideSP, .hidePC {
		display: block;
	}
	.hideTab {
		display: none;
	}
}

@media only screen and (min-width: 1001px) {
	.hideSP, .hideTab {
		display: block;
	}
	.hidePC {
		display: none;
	}
}

画像の切り替え方

Media Queryによる切り替え
「.hidePC」、「.hideTab」、「.hideSP」などで出し分ける
JavaScriptによる切り替え
img.switch.jsを使用します。
切り替えたい画像に対してswitchというクラスを付けて使用します。
その場合PC用の画像には_pc、SP用の画像には_spを付け、同じフォルダに格納する必要があります。
/* js */
$(function(){
	$('img.switch').imgSwitch({
		replaceWidth: 600 /* 600pxを境に画像を切り替える */
	});
})

/* html */
<img src="img/img_pc.png" width="300" height="502" alt="" class="switch" >

フルードイメージの作り方

フルードイメージは画像のサイズをブラウザのウィンドウサイズに合わせて表示する方法です。
通常、imgタグにはwidthとheightを指定するのが必須ですが、フルードイメージにする場合にはwidthとheightの指定は行いません。

/* html */
<img src="img/sample.png" alt="">

/* css */
img {
	max-width: 100%;
	height: auto;
}

表の作り方

displayプロパティの値を変更する
dlで作成した定義リストをdisplayプロパティ値をテーブル関連の値にすることで、テーブルの表示にします。
※Internet Explorer 8以下はdisplay:table-cell等をサポートしてないので、定義リストのまま表示されることになります。
詳しくはdemoページを参考

メディアクエリを使えないブラウザへの対応方法

Internet Explorer 6~8でメディアクエリを使用可能にするために、respond.jsを読み込みます。
なお、Internet Explorer 8以下でのみ使用するため条件式で囲います。

<!--[if gt IE 9]><!--><script src="js/respond.min.js"></script><!--<![endif]-->

フォーム

Name値の設定

  • 項目名を端的に表すName値にしてください。
  • ユニークではない項目は連番を付けてください。
  • ○○の住所、××の住所といった項目名の場合はName値にプレフィックスを付けてください。
  • スネークケースで書いてください。

解説

Name値はバックエンド側でPostされた内容を受け取り出力するときに使用する値になります。
そのため、Name値から項目名が推測できるとフォームプログラムを組み込む作業が非常にやりやすくなります。

またHTMLを見たときにID・Class名と見間違えないようキャメルケースではなくスネークケースで差別化します。

Labelタグの使い方

  • 項目名に使用し、対象となるフォーム要素のIDをfor属性で指定すること。
  • チェックボックスやラジオボタンの場合は、項目名ではなくそれぞれのラベルテキストに使用すること。
  • Internet Explorer 7 以上が対象の場合は、フォーム要素とラベルテキストを一緒に囲う方法を利用してもよい。
  • for属性を指定したlabelタグにはonclick=""を指定すること。

解説

Labelタグはユーザビリティの向上に大きく貢献します。チェックボックスやラジオボタンが特に顕著ですが、これら2つは標準では10px程度の大きさしかなく、クリックするときにストレスを与えます。
しかし、labelタグでfor属性を使用することでマークアップされたテキストをクリックしても選択することができるようになり、ストレスを緩和できます。

なお、空のonlick属性を付ける理由は、iOSではlabel要素をタップできるものとして認識させなければ、for属性で指定したフォーム要素が選択状態にならないからです。(TODO:iOSのバージョン調査)

送信ボタンの作り方

  • inputタグを使用しないこと。
  • buttonタグを使用し、type属性をsubmitとすること。

解説

inputタグを使用するとbefore/after擬似要素が使用できないため、アイコンなどの装飾を付けにくいという問題があります。
それに対してbuttonタグは閉じタグがあるため、before/after擬似要素が使用できます。
また、type・name・value属性も使用できますのでフォームの機能としてinputタグで行っていたものはbuttonタグで代替可能です。

フォーム要素に入力されたテキストのフォントサイズと余白について

デザインでの指定がない場合は以下のルールで体裁を整えてください。

  • フォントサイズは統一すること。
  • 入力されたテキストと入力フィールドの枠が密接しないように数px(2~5px)の余白を空けること

※常識的な内容ではありますが、デザインで表現されないことが多く見逃しがちなためガイドライン化します。

レイアウトの組み方

1.項目と入力フォームが同じ段にあるレイアウトの場合
スタイルシートのdisplay:table,table-row,table-cellでレイアウトを組むこと。
ただし、Internet Explorer 6~7への対応が必要な場合はtableタグでレイアウトを組むこと。
2.項目と入力フォームが段違いであるレイアウトの場合
tableタグ以外でレイアウトを組むこと。
3.レスポンシブ・ウェブ・デザインの場合
tableタグ以外でレイアウトを組むこと。

解説

Internet Explorer 6~7を標準対応しなければいけなかった時代には、1番の「項目と入力フォームが同じ段にあるレイアウトの場合」は、デザインがTableレイアウトを前提で装飾していることが多いため、Tableレイアウトが適していました。
しかし、本来tableタグはレイアウトを組むものではないため、Internet Explorer 6~7が標準対応から外れている現状ではスタイルシートのdisplay:table,table-row,table-cellを使用した方が柔軟なコーディングが可能です。

特にレスポンシブ・ウェブ・デザインが増えている昨今では、PCは従来の表のようなレイアウトとし、スマートフォンでは表ではなく1カラムのシンプルなレイアウトとすることが多くあります。

それを実現するためにはdisplay:table,table-row,table-cellを使用しなければいけないため、対応が減ってきているInternet Explorer 6~7用のTableレイアウトを標準とするよりは、display:table,table-row,table-cellを使用したレイアウト組みを標準とします。

HTML5で追加されたtype属性値の使い分け

  • HTML5のときのみ使用すること。
  • PCサイトが含まれる場合は、email / search / telephone / numberをだけを使用する。
  • スマートフォン向けのサイトの場合は、項目に合わせて適切なものを使用する。

解説

type属性値の中にはPCブラウザの場合に、インターフェイスが大きく変わるものがあります。
例えばdateが指定されていると、Google Chrome(2014年5月7日 時点)だけ今までにないインターフェイスに変わります。
これではユーザーに戸惑いを与えてしまいますし、プレースホルダーが使えなくなるといった問題もあるため、指示がない限りは使用しないでください。

Internet Explorer 6~7を対象ブラウザに含むコーディング

指針

  • 細かく(1パーツ毎)クロスブラウザチェックを行う。
  • CSSハックや条件付きコメントを安易に使わない。
  • 理想より現実的な手法を選ぶ。

ドキュメントタイプ宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

解説

Internet Explorer 6ではDOCTYPE宣言の前に何かしらの文字列が含まれていると後方互換モードになるバグがあり、XML宣言もその対象になります。
XML宣言を省略することで全てのブラウザが標準準拠モードに表示になるため、クロスブラウザ対応が簡単になりコード量も減らせます。

XHTMLの仕様上ではXML宣言を省略できるのは文字コードがUTF8/16のときだけですので、Shift_JISやEUC-JPのときにXML宣言を省略することはできませんが、この仕様に準拠しない方が素早いコーディングが行え、コード量や複雑なコードの削減によるシンプル化で保守性の向上、レイアウト崩れが発生する可能性を大きく下げられるため、制作者側にもユーザー側にもメリットがあります。 それに対し仕様に準拠した場合のメリットは「準拠した」ということだけですので、ここでは理想より現実を選び、Shift_JISやEUC-JPを使う場合でもXML宣言は省略します。

CSSハックか条件付きコメントか

CSSハックを使用してください。
ただし、使用するCSSハックは以下の2つに限定します。

/* IE6向け */
* html .style { property: value; }

/* IE7向け */
*+html .style { property: value; }
解説

Internet Explorer 6が標準準拠モードになっている場合、他ブラウザとの差異は最小限になります。
それに伴いブラウザ別にスタイルを分けることが少なくなるため、スタイルシートだけで完結するCSSハックを使用した方がシンプルに済みます。

CSSハックはブラウザのバグを利用したものであるため、何種類も使用してしまうと新しいバージョンのブラウザでどんな動作をするか予想ができません。そのため、1つのバージョンに限定しCSS Validation Service に通るVaildなCSSハックに限定しています。

clearfix

以下のコードを使用してください。

* html .clearfix {
	zoom: 1;
}

*+html .clearfix {
	zoom: 1;
}

.clearfix:after {
	height: 0;
	display: block;
	clear: both;
	content: "";
}
解説

Internet Explorer 6~7ではCSSハックでzoomを使い、hasLayoutを有効にして親要素にレイアウトを持たせることで高さが確定され、floatも綺麗に解除されます。
しかし、zoomはInternet Explorerの独自規格であるため、使用しない方が無難です。そのためafter擬似要素をサポートしているブラウザではafter擬似要素を使用し、floatを解除します。

Internet Explorer 6~7を対象ブラウザに含まないコーディング

指針

  • Internet Explorer 8になって実装されたスタイルシートを使い効率的なコードにする。
  • CSSハックや条件付きコメントを極力使わない。

ドキュメントタイプ宣言

UTF-8/16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
SHIFT_JIS/EUC-JP
<?xml version="1.0" encoding="Shift_JIS/EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
解説

Internet Explorer 6に対応する必要がないため、文字コードがSHIFT_JIS/EUC-JPのときはXML宣言をしっかりと行います。

CSSハックか条件付きコメントか

CSSハックを使用してください。
ただし、使用するCSSハックは以下の2つに限定します。
また、divなどの要素を増やして対応できる場合には無理にCSSハックを使用しないでください。

/* IE8向け */
.style { property: value\9; }

/* IE9向け */
.style:not(:target) { color:#fff¥9; }
解説

Internet Explorerはバージョンが上がるにつれバグが減り、レンダリングもFirefoxやChromeに近いものになっているため、CSSハックや条件付きコメントを使うことはなくなっています。

それでも場合によってはブラウザ別にスタイルを分ける必要がでてきますが、少量の場合が多いためスタイルシートだけで完結するCSSハックを使用した方がシンプルに済ませられます。

また、CSSハックはブラウザのバグを利用したものであるため、何種類も使用してしまうと新しいバージョンのブラウザでどんな動作をするか予想できません。そのため、1つのバージョンに限定しCSS Validation Serviceに通るVaildなCSSハックに限定しています。

clearfix

以下のコードを使用してください。

.clearfix:after {
	height: 0;
	display: block;
	clear: both;
	content: "";
}
解説

レガシーブラウザへの対応が不要のため、zoomを使用せずafter擬似要素だけのコードになります。

Internet Explorerのレンダリングモード

headタグの開始直後に以下のコードを記述し、互換表示なしの最新モードでレンダリングされるようにしてください。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

解説

最近のInternet Explorerでは表示を古いバージョンのものにする互換表示機能があります。 この機能をユーザー側で意図せず有効にしてしまい、表示が崩れることがあるため、互換表示機能をOFFにするために上記のコードを使用します。

これにより互換表示ができなくなりますが、昔とは違いこれから制作されるページはWeb標準に準拠したものになります。またInternet Explorerの表示もWeb標準に準拠してきていますので不要と考えます。

PHPインクルードを利用したコーディング

外部ファイル化する箇所

ヘッダー・フッター・サイドバーなど大量のページで同じデザインを使う部位は外部ファイル化してください。

外部ファイルの読み込み方

$_SERVER['DOCUMENT_ROOT']を使用して絶対パスでrequire_onceで読み込んでください。

<?php require_once($_SERVER['DOCUMENT_ROOT'].'/include_files/header.php'); ?>

外部ファイルを置くディレクトリ

サイト全体で使用するもの
/include_files/
特定ディレクトリ以下で使用するもの
/include_files/ディレクトリ名/

CSS Sprite

画像のまとめ方

画像はCSS Sprite Generatorを使用してまとめてください。
このとき「スプライト画像設定」の項目にある水平オフセット/垂直オフセットを5pxに変更して使用してください。

画像を配置するフォルダ

CSS Spriteは複数のページで使われるもののため、/img/common/sprite/に配置してください。

WordPress

WordPress本体のバージョンおよび各プラグインのバージョン

特に指定がない場合、WordPress本体および各プラグインは最新の安定版を使用します。

インストールディレクトリ

特に指定がない場合、ドキュメントルート直下に「wp」というフォルダを作成し、そこにインストールを行ってください。

登録メールアドレス

特に指定がない場合、デバッグ用のメールアドレスを管理者用アドレスとして登録してください。
自分の個人用アドレスで登録したり、実在しないでたらめなアドレスで登録はしないでください。

複数ユーザを作成しなければいけない場合、同一のアドレスを複数のユーザで使うことはできないため、
「example01@example.com」「example02@example.com」…というように「example.com」ドメインのアドレスを入力してください。

※「example.com」ドメインはマニュアル等で例示するために予約されているドメインであり、実際に登録したり使用することはできません。
そのため、でたらめなアドレスを入力するよりもセキュリティリスクを抑えることができます。
参考:http://ja.wikipedia.org/wiki/Example.com

※でたらめなアドレスを入力した場合、仮にそのアドレスを悪意ある第三者が取得してしまうと情報が流出してしまう恐れがあります。
そのため、存在しないと思われるアドレスを安易に入力してはいけません。

IDとパスワード

ID

管理者アカウントの場合、「html-coding」「chronodrive」のようにドメインや案件名で使用している単語を使用してください。
「admin」というアカウントは容易に連想されるアカウント名であるため、セキュリティリスクが高まります。

編集者アカウントなどは「chronodrive-editor」のように「-editor」という接尾辞をつける、
ユーザの個人名を使用するなど重複しないように設定してください。

パスワード
パスワード生成用のアドオンやWebサービスを使用し、10文字以上のパスワードを設定してください。
このとき、必ず記号(#、&など)を含めるようにしてください。

wp-config.phpの必須設定

認証用ユニークキー
認証用ユニークキーは、Cookieに格納される情報のセキュリティを強化するために設定する秘密鍵です。
設定は必須なので、以下アドレスにアクセスしてランダム生成されたユニークキーを設定してください。
https://api.wordpress.org/secret-key/1.1/salt/
データベーステーブルの接頭辞
デフォルトでは「wp_」となっていますが、このままだと同じ接頭辞の設定で別のWPをインストールした場合、DBが上書きされてしまう可能性があります。
そのため、上記のIDの箇所で設定したように案件名やドメイン名で使用している単語を使用し、ユニークなものを設定してください。

テーマの命名規則

テーマフォルダ名はデフォルトでは「theme_name」という名前になっているので、
IDと同様、案件名やドメインに紐付いた単語を使用してください。

トップページの扱いについて

トップページの扱いについては、2パターンの対応方法があります。

既存のトップページをそのまま使用する場合
サイトルート直下にある「index.html」もしくは「index.php」に、WordPressフォルダ内にある「wp-blog-header.php」をインクルードして表示する方法です。
既にコーディングが行われているサイトにWordPressを構築する場合や、WordPressの固定ページ機能と静的なHTMLデータを混在させてサイトを構築する場合はこちらの方法で対応します。
テーマ内に組み込み、front-page.phpを使用して表示する場合
サイトルート直下にある「index.html」もしくは「index.php」を、WordPressフォルダ直下にある「index.php」と差し替え、元々のトップページのデータをテーマフォルダ内の「front-page.php」に組み込んでトップページを表示する方法です。
全てのページをWordPressの固定ページで管理し、他に静的なHTMLデータが存在しない場合は、こちらの方法で対応します。

インストール必須のプラグイン

WP Multibyte Patch
日本語を使用する場合は必須です。必ず有効化してください。
WP-DBManager
DBをバックアップするプラグインです。定期的にDBのダンプファイルを出力し、サーバ上に保存したり指定のメールアドレスに送ります。
サーバの設定上使用できない場合を除いて必ず有効化してください。

インストール推奨のプラグイン

必ず使用するものではありませんが、要件に応じて使用することが推奨されるプラグインです。
使用しないものはサーバ上から削除してください。

Admin Menu Editor
管理画面上のメニューの項目名を変更したり、権限に応じて表示・非表示を切り替えることができるプラグインです。
そういった必要がある場合に有効化してください。
Category Order and Taxonomy Terms Order
カテゴリやタクソノミーを並べ替えるためのプラグインです。デフォルトではカテゴリやタクソノミーの順を自由に変更できないため、このプラグインを使用します。
カテゴリやタクソノミーの機能を使用する場合は有効化してください。
Custom Post Type Permalinks
パーマリンクの設定を拡張し、カスタム投稿のパーマリンクを自由に設定するためのプラグインです。デフォルトではカスタム投稿のパーマリンクはは自動で設定されてしまうため、このプラグインを使用します。
カスタム投稿の機能を使用する場合は有効化してください。
PS Disable Auto Formatting
エディタの自動整形を無効化するためのプラグインです。デフォルトのエディタはタグの自動補完や自動整形を行うため、固定ページの作成の際などに意図しないタグが挿入されることがあります。それを防止するためのプラグインです。
エディタの機能を使用する場合は有効化してください。
WP No Category Base
デフォルトではカテゴリーページのパーマリンクに「http://www.example.com/category/news/」というように「/category」という文字列を挟んでしまうため、このプラグインを使用してその部分を除去します。
カテゴリの機能を使用する場合は有効化してください。

投稿データの取得について

投稿データを取得する場合は、query_posts()関数を使用してループを設定します。
また、query_posts()の投稿取得条件は文字列ではなく、配列によって指定します。

<?php
	$args = array(
		'post_type' => 'post',
		'showposts' => -1,
		'post_status' => 'publish'
	);
	query_posts($args);
	if(have_posts()): while(have_posts()): the_post();
?>
~ ループの内容 ~
<?php endwhile; endif; ?>

.htaccessについて

.htaccessのパーミッションについて

WordPressではパーマリンクの設定を変更したときなど、一定のタイミングで.htaccessが書き換わりますが、その場合、

# BEGIN WordPress
	~.htaccessの内容~
# END WordPress

上記のように「# BEGIN WordPress」から「# END WordPress」までの中身が初期化されてしまいます。
例えばリダイレクトの設定など、後から追記した部分が書き換えられてしまう可能性があるため、パーマリンクの設定が完了した後は.htaccessのパーミッションを「444(読み込みのみ可能)」に変更します。

ディレクトリのパーミッションについて

ファイルのアップロードフォルダ
標準ではファイルのアップロードフォルダは「/wp/wp-content/uploads/」になりますが、ファイルをアップロードするためにはパーミッションの変更が必要なため、このフォルダのパーミッションを「777(読み込み・書き込み・実行可能)」に設定します。

表示速度の改善

表示速度の改善を求められた場合には、まず次のことを行ってください。

ファイルデータサイズの削減

画像
JPEG・GIF
compressor.ioを使用してください。
圧縮方法をLossyとLosslessから選択できますが、Lossyを選択してください。
PNG
PNGGauntletを使用してください。
設定を変更する必要はありません。
GIFアニメーション
GIF animation online optimizationを使用してください。
圧縮方法はLossy GIF level 30 (slight)を標準とし内容に合わせて変更してください。
理由

JPEGの圧縮に関してはいくつかのWebサービスとソフトウェアがありますが、Webサービスでは有料かつ圧縮率もcompressor.ioに及ばないものが多く、ソフトウェアも圧縮率の面でWebサービスと同様なため、圧縮率・ユーザビリティなどを考慮し現時点ではcompressor.ioが最適と判断しています。

PNGもcompressor.ioで圧縮できますが、複数のファイルを同時に圧縮できることと圧縮率の差がさほどないためPNGGauntletを使用することとしています。

GIFアニメーションもcompressor.ioで圧縮できますが、圧縮率が高い分画質の劣化が激しく一目でわかるレベルのため、圧縮率をいくつかの段階で設定できるGIF animation online optimizationを使用することとしています。

JavaScript

JavaScriptはClosure Compilerを使用して軽量化(ミニファイ)を行います。
方法がWhitespace Only・Simple・Advancedと3つありますが、Simpleを選択してください。

軽量化(ミニファイ)したコードは不可逆圧縮のため、ファイル名に「min」を付けて新規保存(例:slider.min.js)し、動作チェックを必ず行ってください。

解説

Closure CompilerではAdvancedは最大の成果が見込めますが、呼び出されていない関数を削除するなど、コードを大きく改変してしまいます。
そのコードでは呼び出されていないかもしれませんが、他のコードから呼び出されている場合に、動作エラーが起るケースが想定されます。
そのため、Advancedを使用するためにはいくつかのコーディングルールを守る必要があります。

Webアプリなど大量のJavaScriptコードがある場合には考慮してもいいものではありますが、一般的なWebサイトではそこまでして最適化しても得られる効果は薄く、必要工数が上がるうえにバグが起きる可能性も高まるといったデメリットの方が高いためSimpleでの最適化を標準とします。

レンダリング速度の改善

  • CSSファイルを優先して読み込んでください。
  • JavaScriptファイルは</body>の直前に読み込むか、非同期で読み込んでください。
  • imgタグにはwidthとheightを指定してください。
  • CSS SpriteやCSS・JavaScriptファイルの結合を行い、HTTPリクエストを削減してください。
  • 別ドメインへのHTTPリクエスト(DNSルックアップ)を削減してください。

メールアドレスのリンク設定

SPAM対策のために、下記のサイトのような暗号化メールアドレスの簡単生成サービスを使用して暗号化してください。
ただし、リンクテキストの内容により対応が変わってくるので確認のうえ対応してください。

リンクテキスト内容ごとの対応の変更

リンクテキストごとに対応可能な方法と不可能なものがあります。
下記を参考に対応してください。

1.リンクテキストが画像、もしくはメールアドレスでないテキスト
メールアドレスが画像、もしくは「お問い合わせはこちら」のような内容のリンクテキストの場合は、
http://mailrobo.7jp.net/mrobo4.htmlhttp://www.luft.co.jp/cgi/coding.phpの「安全性:」のようにJavaScriptを使用し対応してください。
2.リンクテキストがメールアドレスの場合
メールアドレスがリンクテキストの場合は、
http://www.luft.co.jp/cgi/coding.phpの「安全性:」を使用して下さい。
3.JavaScriptで対応が難しい場合
Wordpressに組み込みで対応が難しい場合などは、
http://www.luft.co.jp/cgi/coding.phpの「安全性:」などを使用しエンティティ化で対応してください。

http://mailrobo.7jp.net/mrobo4.htmlの使用方法

以下に手順を記載します。

  1. http://mailrobo.7jp.net/mrobo4.html
    を開きます。
  2. 入力欄に入力していきます。
    全部で4つの入力欄がありますが、下記のように設定してください。
    • メールアドレス
      リンクに設定するメールアドレスを入力
    • 自分の宛名 / 題名初期値 / 表示
      必要であれば入力、不要であれば入力されているものを削除してください。
  3. 出力文字コードの選択します。
    こちらはメールアドレスを記載するHTMLファイルに合わせて選択して下さい。

    例)
    test.htmlのファイル文字コードが「UTF-8」であれば「UTF-8」を選択してください。
    test.htmlのファイル文字コードが「Shift-JIS」であれば「Shift-JIS」を選択してください。

  4. 入力したものに間違いがないか確認し、「生成開始」ボタンを押します。
  5. 生成されたJavaScriptコードをHTMLファイルにコピーします。
  6. リンクが設定されているか確認を行います。
    設定したテキストリンクをクリックし、メーラーが立ち上がるのか、送信先が設定したメールアドレスになっているか確認を行います。

解説

メールアドレスをそのまま記載してしまうと、プログラムによって収集できてしまうため、SPAMなどの対象になってしまいますので暗号化して記載します。

SEO

h1のマークアップについて

h1は「ページの大見出し」という意味合いになるため、基本的にはページ名に当たる文言をh1としてマークアップします。
昔はサイト名(ロゴ)をh1でマークアップしたり、ロゴ上部にSEO目的でキーワードを含めた文言を設置しh1でマークアップする手法が流行りましたが、現在では、SEOのためにh1にキーワードを詰め込むより、本来のタグの意味をにしたがって、ページの大見出しである文言をマークアップすることが効果的です。

リダイレクト

ここではリダイレクトを行うにあたって、SEOの観点でダイレクトの種類と特性を説明し、それぞれの使いどきを示します。

301リダイレクト(恒久的な移転の際に使用)

301リダイレクトは、単にユーザーを誘導するだけではなく、リダイレクト元のリンク評価をリダイレクト先へ引き継ぎます。
(完全に引き継ぐのではなく80%ほど引き継がれると言われています。)
また、リダイレクト元のページは検索エンジンにインデックスされなくなります。
URL変更の際やページ統合の際などに利用します。

302リダイレクト(一次的な移転の際に使用)

ユーザーへの挙動は301リダイレクトと変わりありませんが、検索エンジンに対する挙動は異なります。
一時的な移転を意味するため、ページの評価は受け継ぎません。
なお、リダイレクト元のページはインデックスされ続けます。
サイトメンテンナス時にメンテナンスページを表示させておく際などに利用します。

URLの正規化

同一、もしくはほとんど同じ内容のコンテンツが複数存在すると、検索エンジンはいずれか1つを優先し検索結果に表示させます。
意図しないページが優先されることを防ぐため、先するURLを検索エンジンに示す「正規化」を行う必要があります。

wwwの有り無し、index.htmlの有り無し
  • http://www.example.com/
  • http://example.com/
  • http://www.example.com/index.html
  • http://example.com/index.html

上記4つのアドレスは、すべて同じページが表示されますが、検索エンジンには、内容が同一の4つのページとして捉えられます。
これらは.htaccessをで1つのアドレスにリダイレクトをさせることで対策します。

canonicalタグ

どうしても内容がほとんど同じ内容のページが存在してしまう場合は下記のcanonicalタグを使用して正規化します。

<link rel="canonical" href="優先させる(正規化する)URL" />
例として下記のような場合が想定されます。

  • ECサイトにて、色違いの商品ページで画像だけが違うページが複数存在する場合
  • ABテストで一部のボタンや文言のみが違うページが存在する場合
ページネーションの指定(rel="prev",rel=next)

一連したコンテンツを複数ページにまたがって掲載している場合(ページャーを設置しているページなど)、下記のタグで検索エンジンに「前のページ」「次のページ」を示すことができます。

<link rel="prev" href="前のページのURL" />
<link rel="next" href="次のページのURL" />

ただし、全件表示するページが存在する場合はrel="prev",rel=nextの指定は行わず、各ページにcanonicalタグを設置し、全件表示ページを指定します。
これには、ユーザーはページ遷移を嫌い、全件表示されたページを好むためページ分割されたページよりも、全件表示されたページを優先させるという意図があります。
※rel="prev",rel=nextを使用すると、個別のページが表示される可能性があるため、使用せずにcanonicalタグのみ使用します。
参考:http://googlewebmastercentral-ja.blogspot.jp/2011/12/relnext-relprev.html

リッチスニペット

リッチスニペットに対応したマークアップを行うことで、直接的に検索順位に影響することはありませんが、検索結果ページでもクリック率の増加が期待できます。
Googleではパンくずリストやレビュー、商品データといったリッチスニペットに対応しています。

HTML5の場合

microdataフォーマットを使用します

XHTMLの場合

RDFaフォーマットを使用します

解説

Googleではmicrodataを推奨しているので特に指定がない場合はmicrodataを使用します。
しかし、microdataはHTML5のフォーマットなので、XHTMLの場合はRDFaを使用します。

XHTMLの場合にmicroformatsではなくRDFaを利用する理由は、microformatsはclassでのマークアップを行うため、スタイルのために付与したclassと重複し意図しない箇所へスタイルが適用されることを防ぐためです。

リッチスニペットのチェック

リッチスニペットのマークアップ後は下記ツールでチェックを行います。
▼構造化データテストツール
http://www.google.com/webmasters/tools/richsnippets

表示速度の高速化

ページの表示速度が検索順位を決定する要因の一つであることをGoogleは2012年に公表しています。
ページ速度による要因は、体感できるほどの遅さでない限り、それほど大きなものではありませんが、SEOに限らずユーザー目線で考えた際にも対策が必要な点ですのでパフォーマンス向上のために ファイルデータサイズの削減や読み込み速度の改善などを行います。

詳しくは「パフォーマンス向上(表示速度・実行速度)について」の項目を参照

Sass/Compass

特に指定のない限り、Sass/Compassを使用してコーディングを行います。
Sass/Compassのファイル一式はテンプレートに含まれますので、そちらを使用してください。

Sassファイルを置くディレクトリ

使用するcssフォルダと同階層にsassフォルダを作成し、その中にファイルを配置してください。

ルート
 ├ [httpdocs] … コーディングのファイル一式を格納する
 │ ├ [css] … コンパイルされたcssファイルが格納される
 │ │ ├ common.css … common.scssをコンパイルしたcssファイル
 │ │ └ index.css … index.scssをコンパイルしたcssファイル
 │ ├ [sass] … サイトで使われるsassファイルを格納する
 │ │ ├ _functions.scss … mixin, extendで使用する関数を定義したファイル。コンパイル時にcssファイルが生成されない
 │ │ ├ _utilities.scss … 汎用性のあるcssを記述したファイル。コンパイル時にcssファイルが生成されない
 │ │ ├ _vars.scss … 変数を定義したファイル。コンパイル時にcssファイルが生成されない
 │ │ ├ _reset.scss … デフォルトのスタイルを調整するためのcssを記述したファイル。コンパイル時にcssファイルが生成されない
 │ │ ├ _layout.scss … テンプレートのレイアウトを調整するためのcssを記述するファイル。コンパイル時にcssファイルが生成されない
 │ │ ├ common.scss … サイト共通で使用するcssを記述するファイル。アンダーバーから始まるscssファイルをimportして使用する
 │ │ └ index.scss … indexページで使用するcssを記述するファイル
 │ ├ [img] … サイトで使われる画像を全て格納する
 │ ├ [js] … サイトで使われるJavaScriptを全て格納する
 │ └ index.html
 └ config.rb … sassの設定ファイル

書き出し設定

config.rbを編集して書き出しの設定を行ってください。
なお、設定するディレクトリは案件に合わせて変更を行う必要があります。

設定例
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "httpdocs/"
css_dir = "httpdocs/css"
sass_dir = "httpdocs/sass"
images_dir = "httpdocs/img"
javascripts_dir = "httpdocs/js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

使用するSassの機能

下記に記述するSassの機能を使用してコーディングを行ってください。
なお下記はSassの機能の一例です。その他の機能については適宜使用してください。

  • CSSのネスト(入れ子)
  • 変数
  • 関数
CSSのネスト(入れ子)

CSSの記述を減らし、可読性とメンテナンス性の向上を図ります。

index.scss
ul {
	margin: 0;
	padding: 0;
	li {
		margin-right: 10px;
		display: inline-block;
		a {
			display: block;
		}
	}
}
index.scssをコンパイルして生成されたindex.css
ul {
	margin: 0;
	padding: 0;
}

ul li {
	margin-right: 10px;
	display: inline-block;
}

ul li a {
	display: block;
}
変数

変数を利用して同じ色や数値などを使いまわし、効率化を測ります。

index.scss
$main: 980px;
$attention: #f00;

#main {
	width: $main;
	p {
		&.alert {
			color: $attention;
		}
	}
}
index.scssをコンパイルして生成されたindex.css
#main {
	width: 980px;
}

#main p.alert {
	color: #f00;
}
関数

よく使用するスタイルを引数を使用して、簡潔に記述することが出来ます。
関数を使用して記述の省略と、計算の簡略化を測ります。

index.scss
@mixin cf{
	&:after {
		display: block;
		clear: both;
		content: "";
	}
}

#main {
	@include cf;
}
index.scssをコンパイルして生成されたindex.css
#main:after {
	display: block;
	clear: both;
	content: "";
}

Sublime Text

Dreamweaverでのみ使用できる、「DWテンプレート」、「DWライブラリ」の指定がない限り、エディタはSublime Textを使用してください。

フォントの設定

SublimeTextで使用するフォントは、「Source Code Pro」のフォントを使用してください。
フォントの設定は Preferences -> Settings - User から行うことができます。
なお、このフォントは標準でインストールされていないため、配布元よりインストールしなければ使用できません。

Source Code Pro
{
	"font_face": "Source Code Pro"
}

Sftp-config.jsonの設定

Sftp-config.jsonを案件に合わせて編集し、設定を行ってください。

設定例
{
    // The tab key will cycle through the settings when first created
    // Visit http://wbond.net/sublime_packages/sftp/settings for help

    // sftp, ftp or ftps
    "type": "ftp",

    "save_before_upload": true,
    "upload_on_save": false,
    "sync_down_on_open": false,
    "sync_skip_deletes": false,
    "sync_same_age": true,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_newer": false,

    "host": "hoge",
    "user": "hoge",
    "password": "hoge",
    //"port": "22",

    "remote_path": "/",
    "ignore_regexes": [
        "\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json",
        "sftp-settings\\.json", "/venv/", "\\.svn", "\\.hg", "\\.git",
        "\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini",
        ".htaccess", ".htpasswd", "config.rb", "scss", ".sass-cache", "Gruntfile.js", ".ftppass"
    ],
    //"file_permissions": "664",
    //"dir_permissions": "775",

    //"extra_list_connections": 0,

    "connect_timeout": 30,
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],

    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
}

Sftp-config.jsonを置くディレクトリ

データを納品する際にconfigファイルを格納したまま納品しないように、httpdocsの中には格納しないようにしてください。

ルート
 └ [www]
   ├ [httpdocs]
   │ ├ [css]
   │ ├ [img]
   │ └ index.html
   └ sftp-config.json

その他の設定

AutoFileName の補完する width と height の順番を入れ替える
{
	"afn_insert_width_first": true
}

インストール必須のプラグイン

HTML5
HTML5の自動補完 HTML5 のスニペット集と自動補完とハイライト
CSS Snippets
CSSの自動補完
Sass
Sassの自動補完
SCSS
SCSSの自動補完
Compass
Compassの自動補完
jQuery
jQueryの自動補完
Emmet
HTML,CSSの記述を高速化するEmmetを使用可能にする
Hayaku
CSSの記述を高速化するHayakuを使用可能にする
Bracket Highlighter
開始、終了タグを強調表示する
Tag
閉じタグの自動補完
AutoFileName
imgタグのファイル名を補完
ConvertToUTF8
Shift-JSのファイルの文字化けを防ぐ
Inc-Dec-Value
数字やカラーコードをキー操作で増減できる
SFTP
SFTP/FTP(FTPS)を使用可能にする
PAGE TOP