TokyoHeadTerminal［東京ヘッドターミナル］ » XHTML+CSS

【XHTML＋CSS】10_最後に

大森 — Sat, 06 Dec 2008 03:43:08 +0000

アクセシビリティのチェックに便利なツール

富士通WebInspector
国内のアクセシビリティ基準であるJIS X 8341-3に対応したチェックが可能
富士通ColorSelector
文字色と背景色の見やすさを判定するツール
富士通ColorDoctor（Win版のみ）
色覚障害者の見え方をシミュレートするツール（Macは「システム環境設定 > ユニバーサルアクセス」など）
IBM aDesigner（Win版のみ）
統合デスクトップツール
Another HTML-lint
WCAG 1.0の準拠性がチェックできるオンラインツール

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ

【XHTML＋CSS】08_JavaScriptライブラリとCSS

大森 — Fri, 05 Dec 2008 18:09:18 +0000

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

代表的なJavaScriptライブラリ

prototype.js（プロトタイプ・ジェイエス）
script.aculo.us（スクリプタキュラス）
jQuery（ジェイ・クエリー）
Yahoo! User Interface library
Adobe Spry Framework for Ajax

複数のJavaScriptライブラリを同時に利用する際の注意点

jQueryとprototype.js

両方とも$というオブジェクトを利用しており、あとから読み込んだライブラリがオブジェクトを上書きしてしまうので、同時に利用できない。同時に利用する場合はJQueryにコンフリクト回避を行う。prototype.jsを読み込んだあとにjQueryを読み込み、その直後にコンフリクト回避の命令を記述する。

1
2
3



<script type="text/javascript">jQuery.noConflict(); //コンフリクト回避の命令

これにより、jQueryの$がjQueryに書き換えられるので、コンフリクト回避後は$(“tr:even”)ではなくjQuery(“tr:even”)と記述する。

onload記法の変更

あとから設定されているonloadイベントしか実行されないので、

1	window.onload = function() { 　load時に実行される命令 }

この指定を次のように書き換えることで、Javascriptライブラリのonloadイベントをバッティングせずに利用できる。

addEvent(window,"load",function() {load時に実行される命令})
var addEvent= function(elm,listener,fn) {
try {
elm.addEventListener(listener,fn,false);
}
catch(e) {
elm.attachEvent("on"+listener,fn);
}
}

yuga.js

ロールオーバーやスムーズスクロールなど、さまざまな機能が統合されたライブラリ。

01. ファイルセットのダウンロードと解凍

»配布元からダウンロード

02. yuga.jsに必要なCSSとJavascriptの読み込み

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js">script>
<script type="text/javascript" src="js/thickbox.js">script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8">script>

03. img要素のclass属性に「btn」を追加

ロールオーバーを適用したいimg要素にclass属性でbtnという値を追加する。ロールオーバー後の画像は、ファイルの末尾に「_on」を付けておくという決まりがある。

jQueryの基本的な使い方

jQuery1.2.6.min.jsのminは、ファイルの圧縮形式Minifiedをあらわしたもので、変数名を短くしたり、コメントや空白、改行を削除してファイルサイズを大幅に減少したもの。

jQueryでストライプテーブルを実現

stripe_table.js

1	$(function)) { 　$("tr:nth-child)odd)").css("background-color", "#cccccc"); })

奇数と偶数 oddは奇数、evenは偶数。テーブルの1行目はcaption要素としてカウントするため、テーブル一番上は偶数行目になる。

nth-child 10番目は10thのようにthをつけて表現し、nは数を表すので、nth-child()で()内の順番の子要素といった意味合いになる。

jQueryでタブパネルを実現

tab_panel.html

<div id="container">
　<ul class="tab">
　　<li>タブ1li>
　　<li>タブ2li>
　　<li>タブ3li>
　ul>
　<ul class="panel">
　　<li>タブ1の内容li>
　　<li>タブ2の内容li>
　　<li>タブ3の内容li>
　ul>
div>

tab_panel.css

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
div#container {
	margin: 10px auto;
	width: 500px;
}
ul.tab li {
	float: left;
	padding: 4px 10px;
	cursor: pointer;
	background: #ddd;
	border: 1px solid #999;
	margin-right: 1px;
	position: relative;
	top: 1px;
}
ul.tab li.selected {
	border-bottom: 1px solid #eee;
	background: #eee;
}
ul.panel li {
	clear: both;
	background: #eee;
	border: 1px solid #999;
	padding: 10px;
}

ひとつ目のul要素をタブとするためにclass属性でtabという値を、ふたつ目のul要素をパネルとするためにclass属性でpanelという値で指定する。

tab_panel.js

$(function() {
$(".tab li:first-child").addClass("selected");
$(".panel li:not(:first)").css("display","none");
$(".tab li").click(function() {
$(".tab li").removeClass("selected");
$(this).addClass("selected");
$(".panel li").css("display","none");
$(".panel li:eq("+$(".tab li").index(this)+")").css("display","block"); 　}); });

以下、ソースコードの解説

1	$(".tab li:first-child").addClass("selected");

addClassは、指定した要素にclass属性を追加する命令。CSSセレクタは、class属性にtabの値を持つ要素のなかの最初のli要素、つまりひとつ目のタブにselectedというclass属性を追加するという意味。selectedは、tab_panel.cssでタブの選択状態をあらわすクラスとしてスタイルを適用している。

1	$(".panel li:not(:first)").css("display","none");

cssは、指定した要素のcssプロパティを変更する命令。CSSセレクタは、class属性にpanelの値を持つ要素のなかの最初のli要素以外、つまりひとつ目のパネル以外のdisplayプロパティをnone（非表示）にしている。

ここまでのaddClassとcssの命令で、タブパネルの初期状態を設定している。

1	$(".tab li").click(function() {クリックされた時の命令});

clickは、指定した要素がクリックされたときの命令。

1	$(".tab li").removeClass("selected");

removeClassは、指定した要素からclass属性を削除する命令。クリックされたときにすべてのタブからselectedを削除し、未選択状態に変更している。

1	$(this).addClass("selected");

クリックされたときの命令を記述する際、$()の中にCSSセレクタではなくthisと指定した場合、クリックされた要素それ自体を意味する。クリックされた要素のclass属性にselectedという値を追加する意味になる。

以上で、タブをクリックしたときに、クリックされた要素を選択状態に変更することができる。

1	$(".panel li").css("display","none");

すべてのパネルを非表示にする指定

1	$(".tab li").index(this)

indexは、指定された要素の中での番号を取得する命令。ここではタブの中でクリックされた要素の番号を取得している。

1	$(".panel li:eq("+$(".tab li").index(this)+")").css("display","block");

eqフィルタを利用して、クリックされたタブと同じ番号のパネルを表示する。

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ

【XHTML＋CSS】07_多様なデバイスでのCSSデザイン

大森 — Fri, 05 Dec 2008 18:07:51 +0000

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

メディアタイプの指定方法

@mediaでメディアタイプを指定

1
2
3

@media screen {  　p {...}  }
@media print {  　p{...}  }
@media screen, print {  　p{...}  }

メディアごとにスタイルがそれほど変わらない場合や、1枚のCSSファイルですべてのスタイルを管理したい場合。

@importでメディアタイプを指定

1	@import url ("base.css") screen; @import url ("print.css") print; @import url ("proj-tv.css") projection, tv;

XHTMLのlink属性でメディアタイプを指定

1
2
3

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<link rel="stylesheet" type="text/css" media="projection, tv" href="css/proj-tv.css" />

プリンタの印刷可能領域について

A4サイズ1枚に対して、縦方向印刷では650px、横方向印刷では1,000px程度が印字対象となる。

改ページ位置について

たとえばh2要素の直前で常に改ページしたい場合には

1	h2 {page-break-before: always;}

h2要素要素の直後で改行したい場合は

1	h2 {page-break-after: always;}

特定の要素の途中で改ページが行われるのを防ぎたい場合は

1	table {page-break-inside: avoid;}

auto	改ページについて特に指示しない（ブラウザに任せる）
always	その要素の前後で常に改ページする
avoid	その要素の前後での改ページを避ける
left	改ページ後に見開きで左ページになる場合に、その要素の前後で改ページする
right	改ページ後に見開きで右ページになる場合に、その要素の前後で改ページする

その他覚えておくと便利なテクニック

印刷に不要な内容の非表示化

1	display: none;

で印刷されないようにする。

印刷時にはマルチカラムレイアウトにしない

印刷時のCSSサポートの問題や、印刷可能領域の制約といった理由から、印刷時にはシンプルなデザインにしておく。

印刷時にリンクURLを出力する

a要素のhref属性を印刷することができる

1	a:after {content: "("attr(href)")";}

相対パスで指定されているサイト内へのリンクの場合

1	a:after {content: "("attr(href)")";}

また、外部サイトへのリンクについては、a要素に.eternalといったクラスを指定しておく

1	a:eternal:after {content: "("attr(href)")";}

iPhone/iPod touchのホーム画面用アイコンを作成する

57×57pxのPNG画像（上下1pxは白くとぶ）を用意し、XHTMLファイルのhead要素に次のように指定する

1	="apple-touch-icon" href="icon.png" />

JavaScriptによるデバイス別ページ振り分け

PHPなどで振り分けるか、次のようなJavaScriptを用意し、ユーザエージェントの種類によって異なるページに振り分けることができる。

<script type="text/javascript">
//[CDATA[  //PSPのブラウザによるアクセスの場合
if (navigator,userAgent.indexOf('PSP') >= 0) {  　window.location.replace('psp.html');  }
//Nintendo DSのブラウザによるアクセスの場合
if (navigator,userAgent.indexOf('Nitro') >= 0) {  　window.location.replace('ds.html');  }  //]]>
</script>

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ

【XHTML＋CSS】06_CSSデザインのブラウザ調整

大森 — Thu, 04 Dec 2008 14:40:31 +0000

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

ブラウザでの表示確認と調整の流れ

Windowsマシンには複数のバージョンのIEをインストールすることはできないので、MultipleIEsなどのスタンドアローン版や、IETesterなどのシミュレーターなどの環境を整えておく。

IEのCSSサポートを強力にする「IE7.js」「IE8.js」

どちらもGoogle Codeで配布されているライブラリ。

IE7.js

IE6とIE5を、IE7並のWeb標準サポートにするライブラリ。head要素内にscript要素を指定し、Javascriptファイルを読み込む。

1
2
3

【XHTML＋CSS】05_CSSレイアウト

大森 — Thu, 04 Dec 2008 14:39:39 +0000

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

さまざまなレイアウトパターン

コンテンツの幅は大きく分けて、ソリッドレイアウト（固定幅）、リキッドレイアウト（変動幅）、エラスティックレイアウトがある。

代表的なレイアウト

1カラムレイアウト
2カラムレイアウト
3カラムレイアウト

エラスティックレイアウト

文字サイズに応じてボックスサイズが変化するレイアウト。通常のレイアウトは幅を固定することが前提となるため、文字サイズを大きくするとレイアウトが崩れたり、文字サイズとのアンバランス感が目立つことになる。こうした問題を避けるために生まれた手法。
ソリッド（固定）レイアウトと同じようにCSSを制作し、幅や高さ、パディング、ボーダー、マージンなど、ボックスモデルに関するプロパティの指定方法をちょっと工夫するだけで実現できる（width、height、margin、border、paddingプロパティの値の単位をemで指定するなど）。

フリーレイアウト

きっちりとしたグリッドベースのデザインではなく、キャンバスに自由に絵を描いたようなデザイン。
背景とコンテンツを三次元で考えることが必要。

positionプロパティ

positionプロパティの注意点として、absoluteとrelative（起点）は必ずセットで使用する。

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ