'HTML' Tag

Googleが推奨しているHTML/CSSコーディングガイドラインをまとめてみました。

main_catch

webサイトを作るにあたり、HTMLをどう記述するのがBESTなのか?CSSはどう記述するのがBESTなのか?悩むことが多々あるのではないかと思います。今回はGoogleが推奨しているHTML/CSSコーディングルールを抜粋してご紹介していこうと思います。既に数多のwebサイトで紹介されてしまっていますので個人的に「そうだったの!?」と思った項目に焦点を合わせようと思います。

ちなみに、Googleガイドラインこちらが本家です。

プロトコル

http/httpsのそれぞれのファイルを両方のプロトコル上で利用できない場合を除き、画像やその他のメディアファイル、スタイルシート、およびスクリプトを指しているURLからプロトコルを省略する事が推奨されています。

<!– 非推奨 –>
<script src=”http://www.google.com/js/gweb/analytics/autotrack.js”></script>

<!– 推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js”></script>
/* 非推奨 */
.example {
background: url(http://www.google.com/images/example);
}

/* 推奨 */
.example {
background: url(//www.google.com/images/example);
}

これは知りませんでした・・・。

インデント

半角スペース2つでインデントを下げなければいけない。タブを使用したり、インデントにタブとスペースを混在させてはいけない。

<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
.example {
color: blue;
}

「ファイルサイズが若干変わる位でさほど問題ないか!」という感じでスペースとタブ混在させてしまったりしそうですよね・・・。でもインデントを下げる時は必ず「半角スペース2回」!!めんどくさい時はDWの「ソースフォーマットの適用」を使うのが楽ですね!

HTML5を使用する。

XHTMLは使用しない。またHTML5を使用する際は「空要素の閉じ」を記述してはいけない。

<!– 非推奨 –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ~以下略~

<!– 推奨 –>
<!DOCTYPE html>


<!– 非推奨 –>
<br />

<!– 推奨 –>
<br>

これは知っていたので、HTML5でコーディングする際は必ず空要素の閉じを記述しないようにしていました。ただ、2~3年前に何処かの記事でHTML5はXHTMLの書き方(※ここで言う空要素の閉じ)をしても構わない。というのを見かけた記憶があるのですが恐らく、W3C的にはOKだけどGoogle的にはダメという事なんだと思います。

構造の分離

HTML(構造)とCSS(見た目)とScript(振る舞い)は独立させて、3つの相互関係はなるべく最小限にする。要素ごとにスタイルは記述しないでスタイルシートで記述すること。スタイルシートやスクリプトは可能な限り一つにまとめる事。

<!– 非推奨 –>
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel=”stylesheet” href=”base.css” media=”screen”>
<link rel=”stylesheet” href=”grid.css” media=”screen”>
<link rel=”stylesheet” href=”print.css” media=”print”>

<!– 推奨 –>
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel=”stylesheet” href=”default.css”>

この「構造の分離」は長いことWEB屋やっている人の方が対処に困りそうですね・・・。

タグを省略する

ファイルサイズや、可読性の為に、省略できるタグ(html,body,/p,/tdなど)を省略する。省略出来るタグはコチラを参考にされて下さい

<!– 非推奨 –>
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>

<!– 推奨 –>
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

この項目は「出来たらしてね」レベルみたいですが、省略しない書き方が当たり前な昨今、これの対応は厳しいですね・・・。僕がWEBの勉強し始めた時がHTML4.01が主流の時だったのですが、この省略は昔はOKだけど、今は絶対やっちゃダメ!!って習ったんですが、<b>タグなんかのようにHTML5になって非推奨から使用可能タグに戻ったのと同じような感覚なのでしょうか・・・?

Type属性

stylesheetとscriptのtype属性は省略する。HTML5ではデフォルトで解釈されるため必要ない。

<!– 非推奨 –>
<link rel=”stylesheet” href=”//www.google.com/css/maia.css” type=”text/css”>

<!– 推奨 –>
<link rel=”stylesheet” href=”//www.google.com/css/maia.css”>

<!– 非推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js” type=”text/javascript”></script>

<!– 推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js”></script>

有っても無くても、むしろHTML5じゃなくてもこの記述は無くてもキチンとブラウザがそれぞれ解釈を正しくしてくれていたので「要・不要」の判別がようやく出来た感じですね!

IDとClassのネーミング

理解しやすく、一般的なネーミングにする。

/* 非推奨: 意味が無い */
#yee-1901 {}

/* 非推奨: 見た目を表す */
.button-green {}
.clear {}

/* 推奨: 具体的 */
#gallery {}
#login {}
.video {}

/* 推奨: 一般的 */
.aux {}
.alt {}

一番上はまだ分かりますが、2つ目の「button-green」とかはじゃあどうしろと?という感じですね・・・。「submit-btn-green」とかにすれば良いのでしょうか・・・?

IDとクラス名のスタイル

IDやクラスは、できるだけ簡潔でありながら何を意味してるか分かる名前にしてください。

/* 非推奨 */
#navigation {}
.atr {}

/* 推奨 */
#nav {}
.author {}

いやいやいや(笑)さっきの項目の「submit-btn-green」ダメじゃないですか!!(笑)。なら「submit-button-green」ならいいのでしょうか?でも長いですよね・・・?

タイプセレクタ

タイプセレクタでIDとクラス名を修飾することは避ける。不要なタイプセレクタを省くことでCSSのパフォーマンスの向上にもつながるみたいです

/* 非推奨 */
ul#example {}
div.error {}

/* 推奨 */
#example {}
.error {}

これは結構やってしまってますね・・・

プロパティは一括して指定する

可能な限りプロパティは一括して指定します。プロパティを一括指定することはコードの効率性とわかりやすさのために有用です。

/* 非推奨 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推奨 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

一括記述があんまり好きじゃなくて、よくやってました・・・。

小数点数値0の省略

小数点の数値0は省略して記述します。

/* 非推奨 */
font-size: 0.8em;

/* 推奨 */
font-size: .8em;

そんな書き方ができる事自体知りませんでした(笑)。

IDとクラス名の区切り文字

ハイフン以外でセレクタ内の単語や略語を連結しないでください。

/* 非推奨: “demo”と”image”がそのまま連結されています。 */
.demoimage {}

/* 非推奨: アンダースコアーで連結してあります */
.error_status {}

/* 推奨 */
#video-id {}
.ads-sample {}

「ダブルクリックでソース上で選択できる」という理由でよく「_」で記述してしまっていました・・・。

CSSの宣言順番

宣言をアルファベット順に。ただし、特定のCSSプロパティの複数のベンダー固有の接頭辞(例えばの-moz接頭辞は、-webkitの前にくる)にソートに保つ必要があります。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

そこまで見ているなんて知りませんでした・・。

プロパティ名の終端

プロパティ名のコロンの後にスペースを使用します。

/* 非推奨 */
h3 {
font-weight:bold;
}
/* 推奨 */
h3 {
font-weight: bold;
}

これも知りませんでした・・・。

セレクタと宣言の分離

別々のセレクタと宣言は改行して記述していきます。

/* 非推奨 */
a:focus, a:active {
position: relative; top: 1px;
}

/* 推奨 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}

知らないことばかりです・・・(笑)

以上です、抜粋なので全文ではありませんが、他の項目も確認されたい場合はGoogleガイドラインを確認されて下さい。これを全部守ってHTML/CSSをコーディングしていくのはかなり至難の業ですし、会社勤めで他の人もソースを触る事があるような場合はさらにハードルが上がると思います。ですので僕の場合は、やれる所から規約に則ってコーディングしていこうと思います(笑)

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

クリッカブルマップを正確な座標点で作成する方法

main_catch

不動産系のサイトや、求人媒体系のサイトでよく見かける、地図画像上の県や地域毎にリンクを設定して、オンマウスで該当範囲が切り替わるアニメーションを今回は作成して行こうと思います。※今回の記事はアドビの画像編集ソフトをフル活用いたします。主にフォトショップ(イラストレーター・ファイヤーワークスでも可)を使用致しますので該当ソフトが無い方は申し訳ありません。

まずは下のサンプルを御覧ください、それぞれの県の上でオンマウス時に画像が切り替わっていると思います。


このサンプルの地図のように「四角」で区切られたリンク領域であればドリームウィーバーで完結出来てしまいますが、例えばディフォルメされていない正確な地図にクリッカブルマップを作成したい場合などに力を発揮することができます。それでは早速作成手順の紹介です!!

フォトショップ等で地図として使用したい画像の作成

画像は2枚必要になります。

img_sample
元画像
img_on_sample
オンマウス用画像

上記2点です。地図を作成する際、最終的にリンクにしようと思っている範囲は必ず「パス」でシェイプとして作成しておいて下さい。オンマウス時と通常時を別フォルダで作成しておくと良いかと思います。

Photoshopの拡張パネル「ClickableMapPanel」をダウンロード

吉本 集(よしもと つどい)さんが作成されたフォトショップの拡張パネル「ClickableMapPanel」をダウンロードしてご自身のPCのフォトショップに追加して下さい。追加方法、使用方法は吉本さんの記事を参考にされて下さい。(※CS6でしか確認できていないというお話みたいですが、CS5でも問題なく動作致しました)

ファイヤーワークスを使用する方はコチラ
イラストレーターを使用する方はコチラ

>

フォトショップから取得した座標点をhtmlに記述

このサンプル地図の場合、「shape=”poly”」よりも「shape=”rect”」の方が、確実に良いのですが「ClickableMapPanel」でパスから取得すると四角だろうが丸だろうが、「shape=”poly”」になります。

<img src=”img/kyusyu_map.png” usemap=”#shape1″>
<map name=”shape1″>
<area shape=”poly” coords=”143,40,264,40,264,114,143,114″ href=”#fukuoka”>
<area shape=”poly” coords=”107,40,139,40,139,135,107,135″ href=”#saga”>
<area shape=”poly” coords=”71,40,103,40,103,135,71,135″ href=”#nagasaki”>
<area shape=”poly” coords=”144,119,196,119,196,264,144,264″ href=”#kumamoto”>
<area shape=”poly” coords=”200,119,264,119,264,190,200,190″ href=”#oita”>
<area shape=”poly” coords=”200,194,264,194,264,264,200,264″ href=”#miyazaki”>
<area shape=”poly” coords=”143,268,264,268,264,343,143,343″ href=”#kagoshima”>
<area shape=”poly” coords=”48,264,94,264,94,339,48,339″ href=”#okinawa”>
</map>

クリッカブルマップ自体は上記で完成です。指定した範囲でリンクが貼られていると思います。ここから「jquery.imagemapster.js」を使用してオンマウス時に画像を切り替えて行きます。

「jquery.imagemapster.js」を使用して画像置換

クリッカブルマップの画像置換は<a>と違って少し面倒です、ですが「jquery.imagemapster.js」を使用することで、通常時とオンマウス時の2枚を用意するだけで良くなり非常に楽です。配布元からファイルをダウンロードされて下さい。ダウンロードが完了したら、<head>内に読み込みましょう。「jquery.imagemapster.js」はJQueryベースなので必ずJQuery本体と一緒かつJQuery本体より後に読み込みをして下さい。

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.imagemapster.js” type=”text/javascript”></script>

読み込みが完了したら下記のコードを外部JSファイルか、<script&gtタグで<head>内に記述されて下さい。

$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
render_highlight : { altImage : ‘img/kyusyu_map_on.png’ },//ここに置換対象の画像のファイルパスを記述
mapKey: ‘region’,
fillOpacity: 1 //塗りつぶし透明度
});
});

続けて、htmlの記述です。先程クリッカブルマップの設定をした該当ソース部分を下記の内容に改修します。

lt;img src=”img/kyusyu_map.png” usemap=”#shape1″ id=”shape1″>
<map name=”shape1″>
<area shape=”poly” region=”福岡” coords=”143,40,264,40,264,114,143,114″ href=”#fukuoka”>
<area shape=”poly” region=”佐賀” coords=”107,40,139,40,139,135,107,135″ href=”#saga”>
<area shape=”poly” region=”長崎” coords=”71,40,103,40,103,135,71,135″ href=”#nagasaki”>
<area shape=”poly” region=”熊本” coords=”144,119,196,119,196,264,144,264″ href=”#kumamoto”>
<area shape=”poly” region=”大分” coords=”200,119,264,119,264,190,200,190″ href=”#oita”>
<area shape=”poly” region=”宮崎” coords=”200,194,264,194,264,264,200,264″ href=”#miyazaki”>
<area shape=”poly” region=”鹿児島” coords=”143,268,264,268,264,343,143,343″ href=”#kagoshima”>
<area shape=”poly” region=”沖縄” coords=”48,264,94,264,94,339,48,339″ href=”#okinawa”>
</map>

これで完成となります。ただし、IE8以下はオンマウス時に画像が出てこず、IEお得意の黒のベタ塗りがされてしまいます。

IE8以下への対応

IE8以下を切り捨てるなら必要ないですが、実務レベルでそれは中々難しいと思われます。今回自分の知っている当該現象の解決方法を試してみたのですが、
■jquery.belatedpng.jsの使用
■AlphaImageLoaderの記述
共にダメでした・・・。苦肉の策としてIE8の時は画像置換をせず半透明のカラーを上乗せすることにしました。具体的な記述としては、

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

if (appVersion.indexOf(“msie 8.”) != -1) {//IE8の時
$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
mapKey: ‘region’,
fill: true, //塗りつぶし
fillColor: ’00b4ff’, //塗りつぶしカラー
fillOpacity: 0.5 //塗りつぶし透明度
});
});
} else {//それ以外のブラウザ
$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
render_highlight : { altImage : ‘img/kyusyu_map_on.png’ },//ここに置換対象の画像のファイルパスを記述
mapKey: ‘region’,
fillOpacity: 1 //塗りつぶし透明度
});
});
}<

上記でIE8でもふんわりとオンマウスの切替が可能となります。IE8以下に関しては、「msie 8」を「msie 7」「msie 6」に変更して条件分岐をorでつなぐか、elseifで分岐を増やして頂ければ可能なはずです。

IE8に対応させたサンプルはコチラです。是非IE8でご確認下さい!

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!