今回もNPtech.jpをネタに、というかこのテーマでは最後のエントリーにしようと思ってるんですけど、タイトルどおりいろんなツールをうまく使って、クオリティを引き上げましょうという話です。もちろん、ケースバイケースによってほかのツールを使えばいいし、もしくは使わなくてもよいものもあります。

ではさっそくみていきましょう。

アクセシビリティ

Fujitsu ColorSelector

背景色と文字色の色をスポイトで抽出して見やすさを判断してくれる。デザインのカラーリングを決めるときの参考に。

aDesigner

IBM産のアクセシビリティチェックツール。とにかく必須。

WebInspector

WebサイトのWebコンテンツJISへの適合度を確認してくれる。

WebコンテンツJIS

日本規格協会が2004年に制定した高齢者や障害者がWebサイトを利用するときにWebアクセシビリティを向上させるために制定された規格。たまに読み直したりして、頭をブラッシュアップしたりするとか。

Web Content Accessibility Guidelines 1.0

W3Cが1999年に策定したWebアクセシビリティに必要な必要な14のガイドラインを策定。こちらもたまに読み直す程度かな。

ユーザビリティ

ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン

手前味噌で恐縮だけど、ざっくりとしたチェックには一番使う。

ディグダグテキストテスト（Web標準の日の益子さんのスライド、PDFの34ページあたり）

テキストを大きくしたりしてレイアウトの状態を見る。あまり流行っていないっぽいけど、個人的には好きな手法（特に文字サイズを大きくする可能性が高いシニア向けのサイトを作るからかな）

デバッグ用CSS「Diagnostic Styling」

はい、またもや自分のブログからですね。これ、常時Stylishに入れておくと便利なんです。

あとは、

• 画像を非表示にしてみる
• CSSを切ってみたりする
• Validate忘れずに
• Google Webmaster Central、Google Analytics、Yahooサイトエクスプローラーあたりは入れておくとのちのち便利だよね
• FeedBurnerは対象ユーザによってかな。

あたりかなと。

かなりざっくりとしたチェックポイントですが、やらないよりかはやったほうがマシ。一度ご自身のサイトを見直してみるよいきっかけになると思います。

さて、今回で第10回ということでちょうど締めにはよいタイミングなので、パーソナルブログの作り方も終えたいと思います。次回は年が代わったあたりくらいにまた何か書ければいいですねー。

さて、今回はNPtech.jpでは使っていないのですが、ほかのWebサイト（特に僕が担当するのは中小規模）のHTMLやCSSを書く際によく使っているコードセットのようなものがありますので、公開しておきます。

まず、CSSはstyle.cssというファイルに全部集めています。コードの頭はこんな感じ。

@charset "utf-8";
 
@import url(reset-fonts.css);
@import url(base.css);
 
/* -----------------------------------------------
 
	===== TOC =====
 
	* common
	* header
	* contents
	* main
	* sub
	* footer
 
	===== COLORS =====
	Main Text:			#000000
	Link:				#FFAA00
	Link Visited:			#AAFF00
	Line:				#AAAAAA
 
	===== FONTS =====
	34px				262%
	26px				197%
	25px				189%
	24px				182%
	23px				174%
	22px				167%
	21px				161.6%
	20px				153.9%
	19px				146.5%
	18px				138.5%
	17px				131%
	16px				123.1%
	15px				116%
	14px				108%
	13.5px				104%
	13px				100%
	12px				93%
	11px				85%
	10px				77%
 
----------------------------------------------- */
 
/* -----------------------------------------------
 
	*common
 
----------------------------------------------- */
 
body {
	color: #000000;
}
 
a:link {
	color: #FFAA00;
}
 
a:visited {
	text-decoration: none;
	color: #AAFF00;
}
 
a:hover {
	color: #AAFF00;
}
 
/* -----------------------------------------------
 
	*header
 
----------------------------------------------- */
 
div.header {
	background: transparent url(img/header-bg.png) left top repeat-x;
}

あまり特別なことはやっていないんですけど、冒頭で目次を作っておいて、どんなことを書いているのか一覧化しておきます。あわせて、フォントサイズとカラーの基準値もメモ。フォントサイズは3行目あたりで読み込んでいるYUI Reset CSSとFonts CSSをベースにしています。

いわゆるリセットCSSはメリット・デメリットの議論もあると思うんですけど、いざYUIに慣れてしまうと離れられないものです。ほかのフレームワークもやっていることは大差ないんでしょうけど。

base.cssというのは自分がよく使いまわしているコードたちをあらかじめ定義しているものたち。内容はちょくちょく変えるんですけど、こんな感じ。

@charset "utf-8";
 
/* base
----------------------------------------------- */
 
.main .section blockquote,
.main .section ul,
.main .section ol,
.main .section dl {
	margin: 1em;
}
 
.main .section ol,
.main .section ul,
.main .section dl {
	margin-left: 2em;
}
 
.main .section ol li {
	list-style: decimal outside;
}
 
.main .section ul li {
	list-style: disc outside;
}
 
.main .section dl dd {
	margin-left: 1em;
}
 
.main .section th,
.main .section td {
	padding: 0.5em;
	vertical-align: top;
}
 
.main .section caption {
	margin-bottom: 0.5em;
	text-align: center;
}
 
.main .section p,
.main .section fieldset,
.main .section table {
	margin-bottom: 1em;
}
 
.main .section ul li p,
.main .section ol li p,
.main .section ul li ul li,
.main .section ol li ul li,
.main .section ul li table tr th,
.main .section ul li table tr td,
.main .section ol li table tr th,
.main .section ol li table tr td {
	font-size: 100% !important;
}
 
.main .section pre {
	overflow: scroll;
	width: 90%;
	margin: 0 0 1.5em 0;
	padding: 1em;
}
 
html&;gt;body pre {
	overflow: visible;
	/*\*/
	overflow: auto;
	/**/
}
 
.main .section strong {
	font-weight: bold;
}
 
.main .section del {
	text-decoration: line-through;
	color: #A80000;
}
 
.main .section ins {
	font-weight: bold;
	color: #000000;
}
 
/* component
----------------------------------------------- */
 
.clearfix:after {
    content :".";
    display: block;
    height : 0;
    clear: both;
    visibility: hidden;
}
 
.clearfix {
	zoom: 1;
	overflow: hidden;
}
 
.capitalize {
	text-transform: capitalize;
}
 
.lowercase {
	text-transform: lowercase;
}
 
.uppercase {
	text-transform: uppercase;
}
 
.aligncenter,
.imgaligncenter {
	display: block;
	margin: 0 auto;
	text-align: center;
}
 
.alignleft,
.imgalignleft {
	float: left;
	margin: 0 1em 1em 0;
}
 
.alignright,
.imgalignright {
	float: right;
	margin: 0 0 1em 1em;
}
 
.txtalignleft {
	text-align: left;
}
 
.txtalignright {
	text-align: right;
}

位置づけ的にはYUI Base CSSを再定義したような形。

本文である箇所は下手にpx単位でがっちがっちにデザイン作るよりも、em単位で緩やかなデザインを作った方がWebっぽいよね[謎]みたいな個人的な信条もあったりします。そんなわけで、HTMLは自然とこんな感じのやつをよく使います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" media="screen,projection,tv" href="style.css" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<title></title>
</head>
<body id="home">

<!-- page/ -->
<div class="page">

<!-- header/ -->
<div class="header">
<!-- /header --></div>

<!-- contents/ -->
<div class="contents">

<!-- main/ -->
<div class="main">
	<div class="section">
		<h1></h1>
		<h2></h2>
		<p></p>
	</div>
<!-- /main --></div>

<!-- sub/ -->
<div class="sub">
<!-- /sub --></div>

<!-- /contents --></div>

<!-- footer/ -->
<div class="footer">
<!-- /footer --></div>

<!-- /page --></div>

</body>
</html>

なんとなく雰囲気分かります？今まではCSSハック使ってたんですけど、条件分岐のほうが楽そうだなと思ってこのやり方になっています。あと、XML宣言などは今のところあまりメリットないよなってことでスルー。Strictを使うかどうかはクライアント次第ってところです。

僕もそんなに毎日のようにコーディングしているわけでもないので、あくまで参考事例としてどうぞ。

私が執筆に参加した書籍、「現場のプロから学ぶXHTML+CSS」が発売されました。

内容はXHTML+CSSの基礎から応用、マルチデバイスに対応する為のテクニック、そしてJavaScriptライブラリと盛りだくさんです。

私は8章『JavaScriptライブラリとCSS』と9章『CSSトラブルシューティング集』の一部、そしてミニコラムを何本か書かせてもらっています。

kennsuさんやよしぱんさんからも太鼓判いただいてますので、ぜひ興味があるかたは手に取ってみてください。

CSSの操作ではCSSの変更まで取り上げましたが、cssメソッドを利用すれば変更のみならずCSSの取得も可能です。

まずはサンプルをご覧ください。

左上の■をクリックするとそのbodyのbackground-colorをそのテキストの文字に変更するサンプルになります。

$(function(){
	$("li").click(function(){
		$("body").css("background",$(this).css("color"));
	})
});

CSSの取得

CSSの取得は以下のように記述します。

$("CSSセレクタ").css("プロパティ")

CSSの操作では第2引数で値を設定しているのに対して、取得では第2引数に値を設定しません。

$(this).css("color")

サンプルではクリックされた要素のcolorプロパティを取得して

$("body").css("background",$(this).css("color"));

body要素の背景色として設定しています。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

2008年11月1日に東京、2009年1月17日に大阪でCSS Nite ビギナーズというセミナーが行われます。

ここ最近、CSSのテクニックの情報が出尽した感じはありますが、まだCSSでの制作に移行できていない方やCSSを勉強中の方も少なくありません。

そういった、これから取り組みたい方や、改めてじっくり学びたい方の為のセミナーになります。

東京版は、開催1ヶ月前で、もうすぐ満席のようです。

大阪版は、2009年1月17日と少し先のお話になってしまいますが、10月17日までの申し込みは早期割引として1,000円安い4,000円で申し込めます。ギリギリで申し込もうとすると満席になっていることが考えれますので、興味がある方はお早めにご検討ください。

なお、CSS Niteビギナーズのセミナー連動書籍「現場のプロから学ぶXHTML+CSS」の執筆には、Re:Creator’s Kansai （リクリ）で「jQueryによるJavaScript入門」を連載中の私、to-Rの西畑も参加しております。

時間がかかりましたがjQueryの使い方について解説していきたいと思います。第1回はCSSの操作方法。

プログラム入門らしくHello World!から始めようかと思ったのですが、普段CSSを書いているデザイナーさんにはCSSの操作から始めるほうが理解がしやすいと思います。

単純にCSS操作

CSSを理解している方は、書式さえ覚えてしまえば簡単にjQueryでCSSを操作することが可能です。

まずはサンプルをご覧ください。

サンプル

$(function(){
	$("#container").css("width","200px");
	$("div").css("background-color","red");
	$(".sample").css("font-weight","bold");
	$("#container p").css("color","white");
})

解説

$(function(){
　
})

まず1行目の「$(function(){」と5行目の「})」ですが、詳しくはイベントハンドラの説明の際に行いますので、ひとまずはjQueryを利用する際のお約束と覚えておいてください。

基本的にjQueryの記述はこの中に書いていきます。

jQueryではCSSを操作する際に以下のように記述します。

$("CSSセレクタ").css("プロパティ","値");

つまり2行目の記述はCSSの以下の記述と同じ意味を持ちます。

#container{
	width:200px;
}

CSSの知識がある方は、書式さえ覚えてしまえば簡単にCSSを操作することが可能です。

CSSセレクタに関してはCSSの操作だけではなく、今後のjQueryの解説全般で利用しますので、ぜひ覚えておいてください。

サンプルでは最近のCSSの基本セレクタである、要素セレクタ、IDセレクタ、クラスセレクタ、子孫セレクタを利用しています。

jQueryで先取るCSS3

jQueryのすごいところはCSS3のセレクタも多くサポートしているところです。

現状のブラウザシェアを考えると、CSS3の記述を業務で利用できるのは2~3年後以上後になりそうですが、jQueryを利用すれば、今から業務でCSS3の強力なセレクタを利用したCSSが記述することが出来ます。

$("li:nth-child(odd)").css("background-color","green");
$("li:nth-child(even)").css("background-color","#D1EFD1");
$("li:first-child").css("background-color","red");

サンプル

jQueryを利用して、CSS3のnth-child擬似クラスやfirst-child擬似クラスでCSSを操作しています。

CSS3の記述用にjQueryを利用するというのも便利だと思いますよ。

一部のCSS3セレクタは書式などが違ったりしますので、ドキュメントなどを参考にしてください。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

BlueprintCSS をはじめ、スタイルシートの雛形が話題になっていたのですが、幾つかの制作会社に在籍していた経験から言うと、それぞれの会社には「フレームワーク」とまではいかなくても、それぞれのルールがあります。

まず個人的な言い方ですが、フォントサイズを絶対単位で固定しないといったコンセプトのことを「レギュレーション」と呼んでいます。それから、.css ファイルとして用意されている雛形のことを「フォーマット」と呼んでいます。

或る会社では有料会員サイトを運営していたのですが、Mac ユーザをターゲットから外していたので、当時は margin や padding のショートハンドが効かなかった Safari ではレイアウトがおかしくなるという、ヘンなフォーマットを使っていました。もともと会社の中で「これを使ってくれ」と言われて渡されたものではありますが、そのうち、フォーマットはそのままにしておいて、自分なりに margin-top: 20px; などと書いた値でオーバーライドするようになりました。

しかし、考えようによっては、自分なりに書いた「オーバーロード用のフォーマット」をいつもヘッド部で読み込んでいたので、これは業務の問題として解決しなければならないでしょう。デザイナーが単独でそのようなことをやると、レギュレーションの意味がありません。もちろん受託案件の場合は、クライアント側からフォーマットが提供されていることもあるので、なるべくフォーマットにしたがいつつ、問題のある箇所にだけ独自の値やプロパティを使っています。

それから違う会社では、いわゆる Web 標準のコーディングができるスタッフに不足していたので、テーブルレイアウト用のフォーマットを使っていました。業務としては、コーディングが僕だけ専任という案件では Web 標準に準拠していましたが、それ以外の案件では生産性などの要素を優先しなくてはなりません。もちろん会社でスキルを標準化するのも一つの手なのですが、それだけでは不十分と言えるのも事実です。例えば受託案件で、納品先の担当者に Web 標準のスキルを強要したりできない筈です。

次に、フォーマットの具体例をご紹介して、ひとまず自分なりにこだわっているところをご説明したいと思います。

…
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
…

このような記述を、div や p などボックス要素に対して適用しています。-top, -right といった記述の順番は、ショートハンドの記述順と同じです。「上・右・下・左」となっています。また、そもそも僕が個人的に使っているフォーマットでは、ショートハンドを使うとデバッグの際に原因を特定しにくくなるので、ショートハンドは使いません。

また、レイアウトに div 要素を使うことは多いと思うのですが、div マニアと呼ばれないていどに他のブロック要素と使い分けておき、基本的に div 要素には margin, padding を使わないというレギュレーションを立てています。スペーシングしたいときは子要素の margin, padding で行い、特にブラウザのモードによってボックス要素の解釈が異なるため、水平方向には padding を使わないというのもあります。もちろん、JavaScript 有効であることが前提で作られているようなサイトでは、UA およびバージョンを判定して使い分けたりもするでしょうし、特定のブラウザだけで無効となるバグを利用したりもするでしょうが、これらも基本的にやりません。そういう意味では、仕事ではともかくとして、個人的にはリセット用途のフォーマットは使わないという Snook さんに同意できる点があると考えています。

その他、フォーマットではフォントに対して font-style: normal; を適用しています。特に、address 要素にスラントがかかると読みづらいという単純な理由です。また、5年くらい前にスタイルシートを使い始めた頃は a 要素に text-decoration: none; を適用していたのですが、初心者や高齢者はありありとした「いかにもリンク」に見える箇所しかクリックしないものだという指摘をもらって、現在も検討しているところです。

あーと。簡単に自己紹介を・・・macca, kgm と同じ会社で、管理本部が所属の事務屋さんですー。また機会があれば、PHP のデザインパターンについていきなりお話しするかもしれません。でわでわ。