これは、CSSの記述ミスや重複などといったエラーから、
こうしたほうが良いのでは？といった情報まで見ることができます。

HTMLですと、Another HTML-lint gatewayが有名です。

こういったサイトを参考にしながらも、
やはり自力できれいなソースを書けるようになっていきたいですね。

HTMLを書く際、後から分かりやすいようにコメントを残しておくことがあります。
特に、div要素で、どの開始タグに対しての閉じタグかを追加することが多いです。

<div id="content">
   <div id="main">

      ↓こんな感じです。

   <!- #main- --></div>
<!-- #content --></div>

この閉じタグ手前のコメントタグを、自動入力してくれるDreamweaverの拡張機能があります。

・End_comment.mxp
コメントを生成して挿入するDreamweaver用の拡張機能を作成しました

これを追加すると…

↓

こんな感じで、さくっとコメントを追加できるようになります。
キーボードのショートカットを設定すれば、もっと楽に入力できるようになります。

IE7.js、IE8.js、IE9.jsというものがあります。
http://code.google.com/p/ie7-js/

これは名前の通り、IE7.jsなら、IE5.5・IE6をIE7と同じように
IE8.jsなら、IE5.5・IE6・IE7と同じようにするJavascriptです。

具体的に何ができるようになるかというと…
IE6では非対応だった、透過PNGの表示や、CSS（擬似クラスやmin-widthなど）が使えるようになります。

他にも、子どもセレクタ…Aグループ直下のBのみに指定する書き方 （ div.a > p {～} ） や、
隣接クラスタ…Aの直後にあるBのみに指定する書き方 （ div.a + p {～} ） も使えるようになり、大変便利です。

ただ、ページが重くなってしまったり、使用するCSSやスクリプトによっては不具合がでる場合もあるため、制作するものによって切り替えたほうがよさそうですね。

CSSのインデントをきれいにしてくれるサービスで、SASSIENCEというものがありました。
元ネタは某シャンプーだそうで、実用的ながらも面白いです。

SASSIENCE
http://sassience.com/

数年前にメモ帳書いた見辛いCSSを見つけたので、それを変換してみます。

　↓

こんな感じになりました。
「しっとり」と「軽やか」の２パターン選べます。

しばらく経った後に編集することも考えて、コメントを付けたりなどして
なるべく読みやすくきれいなソースを書くよう気をつけたいですね。

今日は、CSS3のプロパティを簡単に生成できるジェネレーターを１つ。

CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/
日本語です。

スマートフォン対応サイトなどでは、CSS3を上手く使い軽くはやく表示できるようにしているところがほとんどです。角丸やシャドウが手軽に使えるのが良いですよね。

まだブラウザによって対応状況が違うため使いどころが難しいなぁという印象ですが、
上手く取り入れていけたらと思います。

↑実際に作ってみたもの。
IEでは角丸などが効いていないかと思いますが…。

↑Firefoxやsafariではだいたいこんな感じに表示されます。

.test {
	background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgb(237, 255, 178)),color-stop(0.2, rgb(182, 232, 88)),color-stop(0.8, rgb(100, 181, 79)),color-stop(0.9, rgb(165, 212, 127)));
	background-image: -moz-linear-gradient(-90deg,rgb(237, 255, 178) 0%,rgb(182, 232, 88) 26%,rgb(100, 181, 79) 85%,rgb(165, 212, 127) 99%);
	background-image: linear-gradient(-90deg,rgb(237, 255, 178) 0%,rgb(182, 232, 88) 26%,rgb(100, 181, 79) 85%,rgb(165, 212, 127) 99%);
	-webkit-box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	-moz-box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	-ms-box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-size: 18px;
	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffedffb2, endcolorstr=#ffa5d47f, gradienttype=0)) progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=2);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffedffb2, endcolorstr=#ffa5d47f, gradienttype=0)) progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=2)";
	color: rgb(255, 255, 255);
	zoom: 1;
	border: 1px solid #fff;
	font-weight:bold;
	width: 200px;
	height: 45px;
	text-align: center;
	line-height: 45px;
}

テンプレート機能の中に、オプション領域という表示非表示をページごとに切り替えれるものがあります。

１つ１つテンプレートプロパティから切り替えないといけないのかなと思っていたのですが、
どうやらAがオンの時はBはオフといったスイッチのようにもできるらしく、トップとミドルの切り替えに使うといい感じでした。
できればテンプレートファイルは少なくしておきたいので、今後活用していけたらと思います。

オプション領域を作るときに連動したいものを同じ名前で作成

<!-- TemplateBeginIf cond="test" -->
１つめ
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="test" -->
２つめ
<!-- TemplateEndIf -->

片方の名前の先頭に!をつける

<!-- TemplateBeginIf cond="test" -->
１つめ
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="!test" -->
２つめ
<!-- TemplateEndIf -->

この場合、テンプレートプロパティのtestを
真にすると、１つめ表示　２つめ非表示
偽にすると、１つめ非表示　２つめ表示　になる。

せっかくプラグインも入れたことなので、今日はWordpressで使う
テンプレートタグの覚書をしてみようと思います。

ブログのトップページのURLを出力

<?php echo home_url(); ?>

例：
<a href="<?php echo home_url(); ?>">ブログトップへ戻る</a>

テンプレートのディレクトリのURLを出力

<?php bloginfo('template_directory'); ?>

例：
<img src="<?php bloginfo('template_directory')/img/img.jpg; ?>" />

独自パーツの読み込み

<?php include(TEMPLATEPATH.'/パーツ名.php'); ?>

数行だけだと寂しいですねぇ。
いつかずらっと書いてみたいものです。

先ほど、このブログにソースコード表示のプラグインを入れてみました。
リファレンスを載せているブログなどによくあるものです。

SyntaxHighlighter Evolved
http://wordpress.org/extend/plugins/syntaxhighlighter/

<p>こんな感じに表示されるようになりました。</p>

＜＞を全角にしたり、変換しなくて済むのと、コピーペーストがしやすくなりましたね。
言語によって色分けしてくれるのも魅力です。

IE各バージョンでのブラウザチェックができるソフト、
Microsoftからも出ていたということを最近知りました。

Expression Web SuperPreview　と言うそうです。
見た目はなんだかペイントソフトのようですが、これを使うとIEのバージョン毎に
Webサイトを左右に並べたり、重ねたりでき、ズレをチェックできます。

今までIETesterにお世話になっていたのですが、こっちも試してみたいと思います。

Microsoft Expression Web SuperPreview for Windows Internet Explorer
http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en

IETester
http://www.my-debugbar.com/wiki/IETester/HomePage

他のブラウザでテストしたら変なところがありませんが、IEでチェックしたら、ずれがでたり、画像が消えることもあります。しかもIE6、7、8の名バージョンのテスト結果もばらばらです。

IEは他のブラウザと比べて、CSSを受け取り方が違います。解決方のひとつはIEだけのCSSを作って、CSSのリンクところにこのタグを入れます。

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

もうひとつの方法はハッキングと呼ばれます。IEしかわからない単語を入れます。

名ブラウザー: body{ width:500px;}

IE6のみ：　body{ _width:600px;}

IE7のみ：　body{ *width:700px;}

ハッキングは一番簡単な方法なんですが、IEのバグに頼っているやり方なので、あまりお勧めできないのです。

他の方法もいっぱいあります。時間があれば、また他のいろんな方法をやってみたいと思います。

パチャラ

SEO対策クレアネットクリエイター

〒530-0047
大阪府大阪市北区西天満5-6-10　富田町パークビル3F
TEL 06-4792-8281 TEL 06-4792-8291