KOJIKA17

このブログのコーディングガイドライン[旧]

今まで5回ほどブログのデザインを変更し、その度にHTMLのソースなどに、簡単な解説を入れてきました。
最近、Google Style Guideが流行ってる(?)ので、それっぽくゆるく書いてみます。

この記事について

このコーディングガイドラインは、旧デザイン・ソースについてのものです。
現在のコーディングルールとは異なります。
旧デザインを参照したい方は、こちらをご覧下さい。

インデント

インデントはしません。

URL

URLが_(アンダースコア)の場合、リンクなどで下線が入るとアンダーバーが認識しにくくなるので、-(ハイフン)を使用しています。

HTMLについて

DOCTYPE

HTML5で記述。
IE9以下でも、ある程度スタイルを保てるように「html5.shiv」をCDNで挿入。

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Metaタグ

name="keyword"

使用しません。

name="description"

それぞれのページごとに違うものを設定。個別ページは文章の冒頭を最大200文字程度、抜き出し。
考えるのが面倒臭い場合は設定していません。

name="generator"

WordPressの場合は消しますが、MovableTypeの場合は、趣味で表示。

linkタグ

rel="author"

metaにも"author"は指定していますが、この"author"は、humans.txtというプロジェクトが面白そうだったので、追加。

私がTwitterで「humans.txtを入れた」とつぶやいたら、@ie6botさん - (´・ω・`) ie6bot - 腐った牛乳と呼ばれたブラウザ - も入れてくれました。

rel="icon"

SVGで指定。
ただしIEは読めないので、サーバー上にも同じfaviconをico形式で置きます。

rel="canonical"

INDEXページのみに、この設定をしています。リンク先は、Archivesを指定。
ページの性質上、似たような形式なので、一覧性の高いArchivesを優先しています。

JavaScript

基本となるJSは、gzipにして圧縮、及びhttpリクエストを減らしています。
gzip化するとSafariだとJSが効かなくなりますが、JSが使用できなくてもブログの利用上ほとんど問題ないようにしています。
SafariでもJSが使えるように、ApacheでRewriteすればいいだけですが、面倒臭くてやっていません。

また重いJS(ソーシャルボタンなど)はbodyの最後に記述します。

Microdata

Scheme.orgのblogに準じますが、パンくずについては、Vocabulary.orgを使用。

CSS

詳細は以後記述。

HTML上でstyle要素を使用する場合は、scoped属性を使用。

パンくず

パンくずはolのリストで表記。
最近はW3Cの4.13.2 Bread crumb navigationのように、nav>pでもいいような気がしてきた。

aタグ

ページとリンクとの関係性を示したい場合は、relを使用。

  • first
  • last
  • next
  • prev
  • alternate
  • bookmark
  • external

ID, Class

表記をキャメルケースにしています。

見出し

見出しはセクショニングをしつつも、h1-h6まで使用。

strong と em の使い分け

ページ全体で強調したい場合は、strong
段落で強調したい場合は、em
例外もあります。

CSS

Sass

configで基本設定を指定。

design-ver5.scss
┗ _rest.scss
┗ _config.scss

既存のCSSをSassにしただけなので、難しいことはしていないですが、GithubにPushしてるので、興味のある方はご確認下さい。

基準値

基準値は8px
理由として、

  • 基本的なブラウザの文字サイズが16pxで8で割り切れる。
  • モニターサイズの320px, 480px, 800px, 1024px, 1960pxなど、8で割り切れる。
  • 10pxよりも8pxで余白をとると、個人的な感覚で収まりがいい。

Sass では $bpx としていつでもこのpxを取り出せるようにする。

カラー

  • #fafafa;
  • #f06;
  • #aaa;
  • #888;
  • #444;
  • #333;

リセットCSS

ブラウザ デフォルトCSSを参考にしたCSSリセットにnormalize.cssを肉付けしたものを使用。

@charset "UTF-8";

// reset css
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html,body,article,aside,footer,header,nav,section,figure,figcaption {
	display: block;
	margin:0;
}
audio,canvas,video,svg {
	display:inline-block;
}
h1,h2,h3,h4,h5 {
	font-family:$sans;
}
h1 {
	margin:2em 0 1.5em;
	font-size:1.5em;
	line-height:1.2;
}
h2,h3,h4,h5 {
	margin:2em 0 1.5em;
	font-size:1.2em;
	line-height:1.4;
	color:$highlightColor;
}
table {
	margin:1.6em 0;
	border:1px solid $grayColor;
	border-collapse:collapse;
	border-spacing:0;
}
th ,td {
	border:1px solid $grayColor;
}
th
{	padding:$bpx/4 $bpx $bpx/4 $bpx/2;
	background-color:#eee;
	vertical-align:top;
	text-align:left;
	text-shadow:0 1px 0 $baseColor;
}
td {
	padding:$bpx/4 $bpx/2;
	> ul {margin:0;}
	li {padding:$bpx/4 0;}
}
em, dt, dfn, cite {
	font-weight:700;
	font-style:normal;
}
dt {
	border-bottom:1px solid $highlightColor;
}
dd {
	margin:.5em 0 1.5em .5em;
}
strong, em {
	color:$highlightColor;
	letter-spacing:.05em;
}
abbr[title],dfn[title] {
	cursor:pointer;
	text-decoration:underline;
}
img {
	border:none;
	vertical-align:middle;
	box-shadow:0 1px 4px $subColor;
}
iframe {
	vertical-align:middle;
}
small {
	font-size:80%;
	margin:0 .5em;
}
::selection {
	background:$keyColor;
	color:$baseColor;
}

ID, class, 属性

属性からstyleを掛けた方が効率のよい場合は、そちらを優先します。

CSS

[itemprop=datePublished] { ..}

[id^=title] { ..}
#titleAbout { ..}
#titleCompany { ..}

Sassのネスト

ネスト(子孫)はどんなに長くても、4つ以内に収めています。
例外もあります。

Sassのサンプル

#demo {
  list-style:disc;
  li {
	  border:1px solid #000;
	}
	a {
	  text-decoration:none;
		&:hover {
	    text-decoration:underline;
		}
	}
}

margin

marginの相殺は大好物です。

Sassの出力

Sassでやってるので、吐き出し方は通常(extended)とminify(compress)と大差はありません。
同じ吐き出し方なら、容量の小くなるminifyで出力。

ざっと書いてみましたが、個人的なブログに関してなので、実務の時は違ったルールの書き方をします。
記事自体は参考にはならないと思いますが、色々な手法が見えるのは面白いと思ったので書いてみました。
ガイドラインから、その人の考えが見えてくるので、ガイドラインが増えてきたら面白いと思います。

なお、ガイドラインはGoogle以外にも公表しています。
内容が古くなってる可能性もありますが、ご覧になってはいかがでしょうか?