KOJIKA17KOJIKA17HomeAboutRSSこのブログのコーディングガイドライン[旧]2012-04-30今まで5回ほどブログのデザインを変更し、その度にHTMLのソースなどに、簡単な解説を入れてきました。Guideが流行ってる(?)ので、それっぽくゆるく書いてみます。この記事についてこのコーディングガイドラインは、旧デザイン・ソースについてのものです。現在のコーディングルールとは異なります。旧デザインを参照したい方は、こちらをご覧下さい。インデントインデントはしません。URLURLが_(アンダースコア)の場合、リンクなどで下線が入るとアンダーバーが認識しにくくなるので、-(ハイフン)を使用しています。HTMLについてDOCTYPEHTML5で記述。IE9以下でも、ある程度スタイルを保てるように「html5.shiv」をCDNで挿入。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というプロジェクトが面白そうだったので、追加。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の最後に記述します。MicrodataScheme.orgのblogに準じますが、パンくずについては、Vocabulary.orgを使用。CSS詳細は以後記述。HTML上でstyle要素を使用する場合は、scoped属性を使用。パンくずパンくずはolのリストで表記。navigationのように、nav>pでもいいような気がしてきた。aタグページとリンクとの関係性を示したい場合は、relを使用。Class表記をキャメルケースにしています。見出し見出しはセクショニングをしつつも、h1-h6まで使用。使い分けページ全体で強調したい場合は、strong段落で強調したい場合は、em例外もあります。CSSSassconfigで基本設定を指定。_config.scss既存のCSSをSassにしただけなので、難しいことはしていないですが、GithubにPushしてるので、興味のある方はご確認下さい。基本的なブラウザの文字サイズが16pxで8で割り切れる。1960pxなど、8で割り切れる。10pxよりも8pxで余白をとると、個人的な感覚で収まりがいい。していつでもこのpxを取り出せるようにする。デフォルトCSSを参考にしたCSSリセットにnormalize.cssを肉付けしたものを使用。属性からstyleを掛けた方が効率のよい場合は、そちらを優先します。..}Sassのネストネスト(子孫)はどんなに長くても、4つ以内に収めています。}}marginmarginの相殺は大好物です。Sassの出力Sassでやってるので、吐き出し方は通常(extended)とminify(compress)と大差はありません。同じ吐き出し方なら、容量の小くなるminifyで出力。書いてみましたが、個人的なブログに関してなので、実務の時は違ったルールの書き方をします。記事自体は参考にはならないと思いますが、色々な手法が見えるのは面白いと思ったので書いてみました。ガイドラインから、その人の考えが見えてくるので、ガイドラインが増えてきたら面白いと思います。ガイドラインはGoogle以外にも公表しています。前の記事よく分からずにトーンカーブを使っている人に。