グーグル様がおっしゃるこれからのhtmlとCSSコーディング

html5man

連休が終わって、「ん?連休中に何した?」という事が何年も続いています。目的を持って休日を過ごせない性格というかなんというか・・・。

連休が明けると例年忙しくなります。ありがたいことです。

昨日は東京ドームの近くで打ち合わせがあり、子供のころ行った「後楽園球場」の面影など当たり前に全く無い水道橋駅で、「ああ、俺も子供の頃は純粋だったな~」と、穢れた大人になってしまった事をほんのちょっとだけ反省しました。

どこが穢れたかというと(人様にはいえないところは別にして)、ウェブスクールの生徒さんでhtmlでなかなか表示されない・レイアウトが崩れる—などという事が頻繁にあったりすると
「取合えずソースがどうとかは置いといて、表示されればいいんですよ!」と言い切ってしまっているところでしょうか。取合えずその場しのぎの励ましは良くないですよね。
さらに、自分でコーディングしていて、わかっていても「この方が楽」と近道をしてしまったり・・・。

それが全て悪いことではないですけど、自分ルールコーディングだとどうしても「クセ」が出てしまいますね。

html5man
html5man

Google HTML/CSS Style Guide 

グーグルがhtml5を基本としたコーディングについての解釈・ガイドラインを明示しています。

Google HTML/CSS Style Guide

これまでにいろんな会社の方々やSOHOの人たちと共同でサイト制作をやらせていただいて、組織によってはコーディングのルール・習慣も違うんだな~と感じます。

例えばインデントを取るか取らないか。取るならどのくらいか。
全くインデントを入れないと見にくいと思うのですが、全く入れないで超有名サイトの制作している人もいますし、私が結構尊敬しているプログラマー・コーダーの方は「tab」をきっちり入れていきます。


<ul>
  <li>Fantastic
  <li>Great
</ul>

グーグル様推奨は「インデントを入れるなら半角スペース2個ね」
ということです。

このhttp:が取ってもいいというか、取れるというのは知りませんでした。

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

この下のCSSは打ったこと無いですけど、結構大手のサイトなどでも見かけます。


/* Not recommended */
ul#example {}
div.error {}

/* Recommended */
#example {}
.error {}


html5css3になって、コーディングもとても楽になってきました。様々なデザインがcssだけで実現されることも可能になり、それだけにcssが長くもなります。googleとしては「セマンテック」を推奨しているわけで、それは制作者やユーザーのためでもあるわけですよね。だから今後はもうちょっとだけ意識してコーディングをして行こうと思っています。

googleが言うことが全てではないですし絶対ではないですけど、自分ルール・社内ルールを再確認する際に参考にしてみてはいかがでしょうか。
下記サイトにまだまだ例がたくさんあります。
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください