【HTML】初期開発コーディングテンプレートと CSS コーディング規約

概要

HTMLコーディング時に初期のたたき台とするフォーマットを探すことはよくありませんか？

最初のたたき台としてそのまま貼り付けてご利用ください。

コーディング規約のないプロジェクトや個人で開発する時におすすめるコーディング規約も記述しましたので、参考になればと思っています。また、「どういうスタイルの命名規則にすれば良いか？」と迷っている方も利用できると思います。

テンプレート

とりあえず、コピー、ペーストしたい方はこちらをご利用ください。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>タイトル | サイト名</title>
    <meta name="description" content="ディスクリプション" />
    
    <meta property="og:type" content="website" />
    <meta property="og:title" content="タイトル" />
    <meta property="og:image" content="/img/icon.png" />
    <meta property="og:url" content="http://example.net/" />
    <meta property="og:site_name" content="サイト名" />
    <meta property="og:description" content="ディスクリプション" />
    
    <meta name="robots" content="noarchive">
    
    <link rel="shortcut icon" href="/img/favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="/css/main.css">
  </head>
  <body>
  内容
  </body>
</html>

CSS

@charset "UTF-8";

@import url(/css/sanitize.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Noto Sans Japanese', serif;
  font-size: 1.2rem;
  width: 640px;
  margin: 0 auto;
  padding: 0;
  background-color: #EEEEEE;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
  color: #0000ff;
  text-decoration: none;
}

簡易解説

こちらを参考に必要に応じて修正してください。

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

モバイルでの表示方法を指定します。基本的に上記の指定で問題ありません。

<title>タイトル | サイト名</title>

検索エンジン、ブラウザのタイトルに表示されます。

<meta name="description" content="ディスクリプション" />

検索エンジンのディスクリプションを指定します。

<meta property="og:type" content="website" />
<meta property="og:title" content="タイトル" />
<meta property="og:image" content="/img/icon.png" />
<meta property="og:url" content="http://example.net/" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ディスクリプション" />

フェイス等のSNSでいいねを押された時に表示させたい内容を記述します。

<meta name="robots" content="noarchive">
<meta name="robots" content="noindex,nofollow">

検索園エンジンに対するインデックスの方法を指定します。
検索エンジンに自由にクロールさせたい場合は上記のタグを削除してください。

noindex
検索エンジンに表示させたくない場合していします。
nofollow
検索エンジンにこのページ以下のリンクをクロールさせない。
noarchive
検索エンジンにキャッシュさせない。内容が常に変化するサイトの場合は指定したほうが良い。

<link rel="shortcut icon" href="/img/favicon.ico">

サイトのアイコンファイルを指定する場合に記述。

CSS

@import url(/css/sanitize.css);

スタイルシートの中で sanitize.css を読み込み、リセットします。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

フォントを統一するためにGoogle の日本語対応の Web フォントを利用します。

.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 height: 0;
 visibility: hidden;
}

float を解除するように設定します。詳しくは下記参照。

clearfixでfloatを解除
http://blog.d-spica.com/entry/070307clearfix.html

html {
  font-size: 62.5%;
}

ページで一番基本となるフォントサイズを％で指定します。基本的に多くのブラウザは基本１６ｐｘなので、上記の場合は１０ｐｘとなります。全てのブラウザで基本とするフォントサイズを指定したい場合は、１０ｐｘと指定しても良いでしょう。

body {
  font-family: 'Noto Sans Japanese', serif;
  font-size: 1.2rem;
  width: 640px;
  margin: 0 auto;
  padding: 0;
  background-color: #EEEEEE;
}

font-family に関しては、Google の日本語に対応した Web フォントを指定しています。

*, *::before, *::after {
  box-sizing: border-box;
}

width を指定した場合 border のサイズを含めたほうが計算が楽なので含めるように指定しています。

a:link, a:visited, a:hover, a:active {
  color: #0000ff;
  text-decoration: none;
}

a タグのデフォルトは少々ダサいのでこちらで好みに合わせて設定しましょう。

リセット CSS

リセット CSS を読み込むことで各種ブラウザでの表示を統一できます。リセットせずにコーディングをするとブラウザによって表示が崩れますので各種ブラウザ対応のプロジェクトの場合からなず導入しましょう。

sanitize

reset.css、normalize.css に続くモダンな初期設定用のCSS。最新のブラウザ事情の問題解決が組み込まれています。

10up/sanitize.css
https://github.com/10up/sanitize.css

reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
http://coliss.com/articles/build-websites/operation/css/about-sanitize-css.html

normalize.css

各種ブラウザで設定されているデフォルトのスタイルを統一します。最近でもまだまだ多く採用されています。

Normalize.css: Make browsers render all elements more consistently.
http://necolas.github.io/normalize.css/

[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
http://coliss.com/articles/build-websites/operation/css/about-normalize-css.html

reset.css

メジャー３種類の reset.css があります。最近はほぼ利用されないのでリンクだけ貼っておきます。

Yahoo! CSS Reset(YUI 3)
http://yuilibrary.com/

Eric Meyer’s CSS Reset
http://meyerweb.com/eric/tools/css/reset/

HTML5 Reset Stylesheet
http://html5doctor.com/html-5-reset-stylesheet/

CSS コーディング規約

世の中に多くの規約がありますが、SEO 的に効果があるかはわかりませんが、Google のコーディング規約に沿って実装が好ましいののではないでしょうか。最近のクローラーは、css と JavaScript をクロールしてその結果を反映させていると言っているので、Google の規約に沿ってコーディングした方がクローラーに優しいのではないでしょうか？

Google HTML/CSS Style Guide

Google コーディング規約の英語版

Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.xml

Google HTML/CSS Style Guide　和訳

上記の規約を日本語に和訳してくださっているサイト。

「Google HTML/CSS Style Guide」を適当に和訳してみた
http://re-dzine.net/2012/05/google-htmlcss-style-guide/

BEM – meaning block, element, modifier

BEM とは meaning block, element, modifier の略で、後で記載した Google の Material Design Lite でも採用されています。個人的には、スタイル名がバッティングしにくいのと命名に悩むことが少なくなるのでおすすめです。

BEMという命名規則とSass 3.3の新しい記法
http://blog.ruedap.com/2013/10/29/block-element-modifier

CSS スタイル名の名付けに困ったら。

スタイル名を決める時に命名に困った時に参考にできるサイト。プログラムの変数、関数用ですが、スタイルでも参考にできます。JavaScript を利用する時にも便利に利用できます。

プログラマーのためのネーミング辞書 | codic

変数、メソッド名等を日本語で入力するとそれなりの変数名、メソッド名を教えてくれます。変数名に時間をロスする方はこちらを参考にしましょう。

https://codic.jp/

メソッド名をシンプルにするために、知っておくと便利な英語のprefixとsuffix

変数名をシンプルにしたい場合に接頭文字等にてシンプルにする方法を記述されています。綺麗な変数名に興味が出てきたら一読をオススメします。

http://blog.codic.jp/2014/12/22/shoud-know-prefix-suffix-for-naming/

開発を加速するテンプレート

デザインが苦手な方は下記を利用することでそれなりの UI を実装できます。また、レスポンシブ対応ですので多解像画面に簡単に適用できます。

Material Design Lite

Google が推進するデザイン Material Design を Web で簡単に利用できるようにしたデザインのライブラリ。こちらのスタイルを導入するとスタイルを指定するだけでマテリアルデザインを導入することが容易になります。デザイン設計が苦手な方、エンジニアの方は利用をオススメします。

http://www.getmdl.io/

Bootstrap

Twitter が公開している CSS フレームワーク、エンジニアでデザインが苦手な方に重宝されています。サービス開発を加速できるように基本的なテンプレートが用意されています。

http://getbootstrap.com/

モダンなコーディングを学べる本

HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

目次

概要

テンプレート

HTML

CSS

簡易解説

HTML

CSS

リセット CSS

sanitize

normalize.css

reset.css

CSS コーディング規約

Google HTML/CSS Style Guide

Google HTML/CSS Style Guide 和訳

BEM – meaning block, element, modifier

CSS スタイル名の名付けに困ったら。

プログラマーのためのネーミング辞書 | codic

メソッド名をシンプルにするために、知っておくと便利な英語のprefixとsuffix

開発を加速するテンプレート

Material Design Lite

Bootstrap

モダンなコーディングを学べる本

Google HTML/CSS Style Guide　和訳