【XHTML＋CSS】10_最後に

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

• 富士通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

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" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict(); //コンフリクト回避の命令 </script>

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

onload記法の変更

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

1

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

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

1
2
3
4
5
6
7
8
9

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の読み込み

1
2
3
4

<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

1
2
3
4
5
6
7
8
9
10
11
12

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

tab_panel.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

* {
	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

1
2
3
4
5
6
7
8

$(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デザイン

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;}

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

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

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

<link rel="apple-touch-icon" href="icon.png" />

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

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

1
2
3
4
5
6

<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】05_CSSレイアウト

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公式サイト

【XHTML＋CSS】04_CSSデザインのための実用テクニック

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

一般的なID名・クラス名から命名ルールを学ぶ

複数の単語で構成するID名・クラス名は、キャメルケース（globalNav）、ハイフン区切り（global-nav）のどちらかを利用するのが一般的。アンダースコアはNetscape6など一部の古いブラウザで正しく解釈されない。

HTML5やmicroformatsで提唱されている名称を参考にする

クラスの便利な使い方

見出しと本文を組み合わせたまとまりがページ内に複数出現するような場合、それぞれを

1
2
3

<div class="section">
...
<div>

で囲んでおくと、CSSで簡単にスタイリングできる。あわせて、見出しレベルに応じてsection-lv2、section-lv3といったクラスをつけておくと、見出しの階層構造ことに異なるスタイルが指定できる。

1
2
3
4
5
6

<div class="section section-lv2">
　<div class="section section-lv3">
　</div>
　<div class="section section-lv3">
　</div>
</div>

クラスは半角スペース区切りで複数適用させることができる。

a要素title属性の使い方

たとえばメールアドレスへのリンクについて、「メールでお問い合わせ下さい」といったテキストにa要素を指定し、「info@example.comへメールする」というtitle属性をつける。

表の列グループと行グループの使いどころ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table summary="自動販売機の売上表">
　<caption>自動販売機の売上表</caption>
　<colgroup id="month"><colgroup>
　<colgroup id="tea"><colgroup>
　<colgroup id="cola"><colgroup>
　<colgroup id="coffee"><colgroup>
　<thead>
　　<tr>
　　　　<th scope="row">商品名</th>
　　　　<th scope="col">お茶</th>
　　　　<th scope="col">コーラ</th>
　　　　<th scope="col">コーヒー</th>
　　</tr>
</thead>
<tbody>
　<tr>
　　　<th scope="row">9月</th>
　　　<td>10,000円</td>
　　　<td>20,000円</td>
　　　<td>30,000円</td>
　</tr>
</tbody>
</table>

表では列グループだけでなく、行グループを示すこともできる。ブラウザでは

• ヘッダ行
• ボディ行
• フッタ行

の順に表示されるが、XHTML上は

• thead要素
• tfoot要素
• tbody要素

の順に記述する必要がある。

フォームパーツのマークアップ

fieldset要素でグループ化する部品の範囲を示し、legend要素でグループのタイトルを示す。

フォームパーツにラベルを設定する方法は少しややこしいので、順序だてて作業することが大切。

1. ラベルにするテキストを書く（たとえば「お名前」）
2. そのテキストをlabel要素でマークアップする（
   お名前
   ）
3. フォームパーツにID名をつける（<input id=”name”… />）
4. label要素にfor属性をつけ、パーツと同じID名を値として指定する（
   お名前
   ）

1
2

<input type="radio" name="sex" id="man" /><label for="man">男性</label>
<input type="radio" name="sex" id="woman" /><label for="man">女性</label>

CSS Sprites（シーエスエス・スプライツ）

リンクのロールオーバー前とロールオーバー後の画像、ばらばらに見えるナビゲーションアイコンの画像を、ひとまとめにしてbackground-positionプロパティを使って位置指定する方法を、CSS Sprites（シーエスエス・スプライツ）という。

テーブルのスタイリング

テーブルとセルの境界線を重なり合わせない場合は、border-collapseプロパティを指定し値をseparateとする。border-spacingプロパティはIE6/7では適用されないため、XHTMLのtable要素に

1

<table cellspacing="0">

と指定することで回避できる。

外部リンク

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

【XHTML＋CSS】03_CSSセッティング

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

CSSファイルの分割のメリットは「効率化」

初期セッティングがしやすい

リセットスタイルや定番のレイアウトスタイルを使い回すことができる。

カテゴリーごとやページごとで違ったデザインにしやすい

CSSはあとから読み込んだもので上書きすることができるので、まず共通のスタイルを読み込んだあとで、カテゴリーやページごとに用意した別のスタイルで上書きを行うことができる。

CSSの差し替えや削除が簡単

2カラムか3カラムか、サイドバーは右か左か、幅は固定か可変かなど、ある程度決まったレイアウトパターンごとのCSSファイルを作っておけば、必要に応じて差し替えるだけでレイアウト変更が可能になる。また、キャンペーンページなど一定期間が終われば丸ごと無くなるようなコンテンツの場合、そのページ固有のスタイルを別CSSファイルにまとめておくことで、CSSファイルごと削除すれば済む。

layout.css

• layout-2col.css
• layout-2col-liquid.css
• layout-3col.css
• layout-3col-liquid.css

複数のスタッフで作業しやすい

すべてのページに適用するスタイルは共通のCSSファイルとして先につくっておき、あとはカテゴリーごと、ページごと、機能ごとなどでそれぞれコーディングを行うことができる。

CSSファイルの分割のデメリットと対策

混乱を招くことがある

例えば「main.css」と「style.css」にはどちらに何が書かれているのか、スタイルをどのように区別し修正や追記をすればよいのかが分からないので、直感的にわかるファイル名にすること。

ファイル管理やバージョン管理が煩雑になる

ファイルの先祖返りや上書きミス、重複指定なども発生しがち。これを回避するために、更新履歴を書いておくだけでも効果がある。「誰がどのファイルのどの部分をいつ更新したのか」をはっきりさせるために、CSSファイルの上部に、ファイル名や概要、更新日、更新者、ファイル名の目次などのインフォメーションを書いておく。

ページの表示速度に影響することがある

CSSファイルやJavascript、画像などのファイルの数だけHTTPリクエストが実行される。対策としては、制作段階では細かく分割していても、公開時には数ファイルに統合するという方法がある。

CSSファイルの分割の具体例

• import.css
• reset.css
• layout.css
• header.css
• footer.css
• side.css
• main.css
• top.css
• hack.css
• print.css
• handheld.css

@import.cssでは、あとから読み込まれたスタイルが優先されるので、おおまかなスタイルから個別的なスタイルへ、という順序で読み込んでいく。

また、印刷用スタイルや携帯機器用スタイルを用意する場合は、XHTMLにlink要素を追加し、media属性で適用メディアを指定する。

1
2
3
4
5
6
7
8
9
10
11
12
13

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Untitled Document</title>
</head>
　
<head><link rel="stylesheet" type="text/css" href="css/import.css" media="screen, projection, tv" />
</head>
　
<head><link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
</head>
　
<head><link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld" />
</head>
</head>

CSSファイルの分割のポイント

• ファイルを細かく分けすぎない
• 直感的にわかるファイル名をつける
• @importにコメントをつける
• サイトに合わせてファイル設計を柔軟に変える
• 最低限の構成は常に統一しておく
• 最終更新日や総目次などのインフォメーションを記入する
• ファイル設計はデザイナーとコーダーで

リセットスタイル

リセットスタイルとは

ブラウザにはあらかじめデフォルトスタイルのCSSが用意してあり、それらは各ブラウザによってデフォルトスタイルが異なるため、それらをリセットスタイル（reset.css）で初期化しておくとブラウザ間での表示の統一が楽になる。

指定しておくと便利なリセットスタイル

スクロールの必要のない短いページについて、多くのブラウザは表示するのに対し、Firefox3は表示しないため、ページ推移の際にスクロールバーの幅の分だけコンテンツが左右にずれてしまう。この問題を解決するために、常にスクロールバーが表示されるようにしておく。

1
2
3
4
5

html {
　overflow: scroll;
　overflow: -moz-scrollbars-vertical;
　overflow-x: scroll;
}

表（テーブル）のボーダー表示方法の違いを解決

表のボーダーの表示方法には、各セルのボーダーを別々に引く方法（separate）と重ねて引く方法（collapse）のふたつがあり、border-collapseプロパティで指定できる。また、別々に引く場合にどのくらい離すのかをborder-spacingプロパティで指定できる。これはブラウザによって異なる場合があるので、統一しておく。

1
2
3
4

table {
　border-collapse: collapse;
　border-spacing: 0;
}

画像のリンクボーダーの非表示化

1
2
3

img {
　border: 0;
}

カテゴリやページごとに異なるスタイル

body要素にID・クラス名を指定し、それらを手がかりにスタイルを適用する

カテゴリやページごとに異なるスタイルを適用したい場合、どのカテゴリに含まれるどのページなのかをbody要素のid属性やclass属性で示しておくことをCSSシグネチャという。個別の要素にIDやクラスを追加したり、専用のCSSファイルを作ってlink要素で読み込む方法は効率的ではないので、CSSシグネチャを使う。

代表例は、ナビゲーションで現在のカテゴリやページを示すハイライト表示や、カテゴリごとのキーカラーやキービジュアルの変更のふたつがあり、クラスでカテゴリを、IDでページを示すことが多い。

1
2
3
4
5
6
7
8
9

<li>
<body id="shoplist" class="shops">
</li>
<li>
  <body id="shibuya" class="shops">
</li>
<li>
  <body id="aoyama" class="shops">
</li>

ナビゲーションで現在のカテゴリーやページを示すハイライト表示

対応するリンクそのものにid="here"やclass="now"と指定してスタイルを適用するよりは、すべてのページで同一のソースコードを利用したほうが効率的。ナビゲーションに含まれるリンクそれぞれにあらかじめIDを振っておき、body要素のクラスを手がかりにスタイルの適用対象を変えることで、自動的にカテゴリーやページに対応するリンクがハイライト表示されるという方法を利用する。

1
2
3
4
5
6
7
8

<body class="ideas">
<div id="gnav">
　<ul>
　　<li><a id="nav-home" href="/"> ホーム </a></li>
　　<li><a id="nav-ideas" href="/ideas/"> こだわり </a></li>
　　<li><a id="nav-shops" href="/shops/"> 店舗情報 </a></li>
　</ul>
</div>

子孫セレクタでbody要素のクラスとリンクのIDを対応させておけば、カテゴリーごとに異なる部分のハイライト表示が実現できる。

1
2
3
4
5
6

/* ナビゲーション ハイライト表示 */
body.home #gnav ul li a#nav-home,
body.ideas #gnav ul li a#nav-ideas,
body.shops #gnav ul li a#nav-shops {
　background: url(../img/gnav_here.jpg) repeat-x left center;
}

カテゴリーごとのキーカラーやキービジュアルの変更

カテゴリー「こだわり」に含まれるページでの指定

1
2
3
4

<body class="ideas">
<div id="main">
　<h1>こだわり</h1>
</div>

カテゴリー「店舗情報」に含まれるページでの指定

1
2
3
4

<body class="shops">
<div id="main">
　<h1>店舗情報</h1>
</div>

CSSシグネチャ

1
2
3
4
5
6
7
8

/* カテゴリー「こだわり」用スタイル */
body.ideas #main {
　background: url(../img/img_ideas.jpg) no-repeat left top;
}
/* カテゴリー「店舗情報」用スタイル */
body.shops #main {
　background: url(../img/img_shops.jpg) no-repeat left top;
}

外部リンク

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

【XHTML＋CSS】02_CSSのキホン

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

CSSの書き方

CSSのバージョン

ブラウザのサポート状況から、通常はCSS2.1を使用する。

セレクタ、プロパティ、値（value）

1

p（セレクタ） { color（プロパティ）: red（値[value]）; }

コメントの書き方

1

/* ○○ */

指定できる値

指定できる値、初期値、適用できる要素があらかじめ標準仕様で決められている。

利用できる単位

• pt（ポイント1/72インチ）
• pc（パイカ/12px）
• in（インチ/2.54cm）
• cm（センチメートル）
• mm（ミリメートル）
• px（ピクセル）
• em（フォントの大きさと1とする単位）
• ex（小文字xの大きさを1とする単位）
• %（パーセンテージ）

CSSの適用方法

XHTMLにCSSを適用する方法

ふわわしいのは上の2つ。

• link要素でCSSファイルを読み込む

  1	<link rel="stylesheet" type="text/css" href="css/style.css" />

• @importでCSSファイルを読み込む

  1 2 3

  <style type="text/css"> @import "css/style.css";<br /> </style>

• style要素でCSSソースを指定

  1 2 3

  <style type="text/css"> p { margin: 15px; } </style>

• style属性でCSSソースを指定

  1	<p style="margin: 15px;">テキスト</p>

CSS内での文字コードの指定

特に理由がなければ、XHTMLとCSSの文字コードを同じにしておく。

1

@charset "UTF-8";

CSSを適用するメディアの指定

1

<link rel="stylesheet" type="text/css" media="&lt;strong&gt;all&lt;/strong&gt;" href="css/import.css" title="Default Style" />

• all（全てのメディア）
• screen（一般的なパソコンのモニタ）
• projection（プロジェクター、映写機など）
• tv（テレビ、テレビゲーム機など）
• hand-held（ケータイ端末）
• tty（固定ピッチフォントで表示される端末）
• print（プリンタ）
• speech（音声読み上げ）
• braille（点字ピンディスプレイなど）
• embossed（点字プリンタなど）

セレクタ

セレクタの種類

• *（ユニバーサルセレクタ：全ての要素）
• E（タイプセレクタ：その要素E）
• EF（子孫セレクタ：親要素Eに含まれる子孫要素F）
• E>F（子セレクタ：親要素Eに含まれる直接の子要素F）
• E+F（隣接セレクタ：兄要素Eの直後の弟要素F）
• .classname（クラスセレクタ：class属性値がclassnameの要素）
• #idname（IDセレクタ：id属性値がidnameの要素）
• E[attr]（属性セレクタ：要素Eがその属性attrをもつ場合）
• E[attr="value"]（属性セレクタ：要素Eがその属性attrと値valueをもつ場合）
• E[attr=〜"value"]（属性セレクタ：要素Eがその属性を持ち、属性値が空白区切りで複数指定されており、その属性値valueが含まれている場合）
• E[attr|="value"]（属性セレクタ：要素Eがその属性を持ち、属性値がハイフン区切りで複数指定されており、その属性値valueが前方一致で含まれている場合）

疑似クラス、疑似要素の種類

• :link（未訪問リンクのとき）
• :visited（既訪問リンクのとき）
• :hovor（カーソルオンされたとき）
• :focus（フォーカスされたとき）
• :active（アクティブになったとき）
• :lang()（要素にその文字コードが指定されているとき）
• :first-child（要素の中の最初の子要素）
• :first-line（要素の1行目のみ）
• :first-letter（要素の最初の1文字目のみ）
• :before（要素の直前に内容を生成）
• :after（要素の直後に内容を生成）

セレクタの組み合わせ

IDやクラス名を元に、子孫セレクタでスタイルを適用。

1

#header h1 a {}

セレクタのグループ化

カンマ区切りでグループ化し、同じスタイルを同時に適用させる。

1
2
3

h1, h2, h3 {
  　color; #ff6600;
  }

プロパティ

ボックスモデルのプロパティ

widthから、paddingとborderを引いておくこと。

• content（要素に含まれるテキストや画像などの内容）
• padding（内容とボーダーとの余白）
• border（枠線）
• margin（ボーダーと他の要素との間隔）

ボックスモデルのプロパティ（margin、paddingプロパティ）

値の数によって上下左右のどこに適用されるかが変わる。

• 値が1つ（上下左右）
• 値が2つ（上下、左右）
• 値が3つ（上、左右、下）
• 値が4つ（上、下、左、右）

視覚整形モデルのプロパティ（positionプロパティ）

• relative（相対配置）
• absolute（絶対配置）
• fixed（固定配置）

relativeと指定した場合に、要素本来の位置が基準になる。 absoluteは親ボックスの位置が基準になる（親ボックスはrelativeなどの値が指定され、配置方法が決められていること。決められていない場合は、さらに先祖要素にさかのぼる。それでも存在しない場合には、最終的にbody要素が基準位置となる）。

視覚整形モデルのプロパティ（floatプロパティ）

• #main {
  float:left; /*左にフロート*/
  }
• #main {
  float:right; /*右にフロート*/
  }
• #main {
  clear:both; /*フロートのクリア*/
  }

視覚効果のプロパティ

visibilityプロパティ

• display:visible /*可視*/
• display:none /*非表示（ボックスは生成されない）*/
• display:hidden /*不可視（ボックスは生成される）*/

overflowプロパティ

ボックスからはみ出す場合の表示方法

• overflow:visible /*ボックスからはみ出す*/
• overflow:hidden /*はみ出た部分は表示しない*/
• overflow:scroll /*入りきらない部分はスクロールして見られる*/
• overflow:auto /*ブラウザにまかせる（一般的には、スクロールして見られる）*/

文字色・背景のプロパティ

• color（文字色）値：#rrggbbなど
• background-color（背景色）値：#rrggbb、tranceparentなど
• background-img（背景画像）値：url(…)、none
• background-repeat（背景画像の繰り返し方法）値：repeat、repeat-x、repeat-y、no-repeatなど
• background-attachment（背景画像の移動・固定）値：scroll、fixed
• background-position（背景画像の開始位置）値：left、right、center、top、bottom、%、長さ
• background（背景の一括指定）値：各プロパティの値をスペース区切りで

フォント・テキストのプロパティ

• font-family（フォントの種類）値：フォント名をカンマ区切りで複数指定
• font-style（フォントのスタイル）値：normal、italic、oblique
• font-weight（フォントの太さ）値：normal、boldなど
• font-size（フォントの大きさ）値：長さ、%、mediumなど
• font（フォントの一括指定）値：各プロパティの値をスペース区切りで
• text-indent（テキストの行頭の字下げ幅）値：長さ、%
• text-align（テキストの行揃え）値：left、right、center、justify
• text-decoration（テキストの装飾）値：underline、line-throught、noneなど
• text-transform（テキストの大文字・小文字の変換）値：capitalize、uppercase、lowcase、none
• letter-spacing（テキストの文字間隔）値：normal、長さ
• word-spacing（テキストの単語間隔）値：normal、長さ

表のプロパティ

• caption-side（表のキャプション位置）値：top、bottom
• table-layout（表のレイアウト方法）値：auto、fixed
• border-collapse（表ボーダーの表示方法）値：coolapse、separate
• border-spacing（表ボーダー同士の間隔）値：長さ
• empty-cells（空セルの表示方法）値：show、hide

スタイルの優先順位

スタイルの詳細度

ユニバーサルセレク（*） < タイプセレクタ < クラスセレクタ（.classname）、属性セレクタ（E[attr="value"]） < IDセレクタ（#idname）

スタイルの継承

ある要素に適用したスタイルは子孫要素に自動的に引き継がれるという特徴がある（継承）。

ユーザースタイルシート

制作者が作ったCSSのほか、ブラウザにあらかじめ用意されたスタイル、ユーザーが作ったスタイルがある。これらの優先順位は

ブラウザのデフォルトスタイル < ユーザスタイル < 制作者スタイル

プロパティに

1

!important

をつけてユーザースタイルを最優先で適用される仕組みがあるが、制作者の!importantよりもユーザーの!importantのほうが優先される。

外部リンク

• »XHTML/CSS リファレンス [WEB ARCHIVES RETURN AGAIN]
• »CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

【XHTML＋CSS】01_XHTMLのキホン

CSS Nite ビギナーズに行ってきました。ブラウザの事情も日々変わっているので、XHTML+CSSの知識をアップデートするという意味で参加してみましたが、新たな発見がありまくりですね。 その連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

XHTMLの書き方

マークアップのキホン

1

<a href="URL" target="_blank">テキスト</a>

の要素・属性・属性値（value）は、

1

a（要素） href（属性）="URL（属性値）" target="_blank">テキスト</a>

XHTMLの構造

XML宣言

XML宣言をすると、IE6が後方互換モードになってしまうので記述しない。

文書型宣言

HTML 1.0 Transition を選択するのが一般的。

1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html要素

xmlns属性、xml:lang属性、lang属性を指定しておく。

1

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

head要素

title要素、メタ情報（meta要素）、link要素など。

body要素

ブラウザで表示される部分。

基本情報を設定する要素

title要素

ページtitle。

meta要素

• http-equiv属性のものは、一般的にtitle要素よりも前に指定する。

  1 2	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" />

• name属性のものは、一般的にtitleの後に指定する。

  1 2	<meta name="keywords" content="キーワード1,キーワード2" /> <meta name="description" content="サイトの説明" />

  1	<meta name="auther" content="株式会社○○" />

  1	<meta name="copyright" content="Copyright &copy; ○○, Inc." />

文書間関係（link要素）

rel属性で関係、href属性でURL、type属性でMIMEタイプ、media属性でメディアタイプを指定。

• スタイルシートファイルの指定

  1	<link rel="stylesheet" type="text/css" href="css/import.css" media="screen, projection, tv" title="Default Style" />

• RSSファイルの指定

  1	<link rel="alternate" type="application/atom+xml" title="RSS 2.0" href="feed.rdf" />

• トップページやヘルプページの指定

  1 2	<link rel="contents" href="index.html" title="ホーム" /> <link rel="help" href="guide/index.html" title="ヘルプ" />

• 日本語以外の言語で制作したページの指定

  1	<link rel="alternate" type="text/html href="index-en.html" hreflang="en" />

script要素

1

<script type="text/javascript" src="js/common.js"></script>

本文を構成する要素

ブロックレベル要素

• 見出し（h1〜h4要素）
• 段落（p要素）
• リスト（ul,ol,dl要素）
• 表（table要素）
• フォーム（form要素）など

インライン要素

• アンカー（a要素）
• 画像（img要素）
• 強調（em,strong要素）など

空要素

• <hr />（水平線）
• <br />（改行）
• <img />（画像）
• <input />（フォームパーツ）

div要素とID・クラス

ワイヤーフレームやデザインカンプを元にdiv要素を定義する。

ブロックレベル要素

見出し（h1〜h4要素）

h1は大見出し、h2は中見出し、h3は小見出し、h4〜h4は必要に応じて利用する。

段落（p要素）

文章ばかりでなく、見出しやリストなどもp要素としてマークアップする。

引用文（blockquote要素）

引用文。中身をp要素などのブロックレベル要素でマークアップする。

順不同リスト（ul要素）

項目を順不同で並列的に列挙するタイプのリスト

1
2
3
4
5

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

順序リスト（ol要素）

項目を順序や順番として定義するタイプのリスト

1
2
3
4
5

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

定義リスト（dl要素）

用語と説明で構成するタイプのリスト

1
2
3
4
5
6

<dl>
  <td>用語</td>
  <dd>用語の説明</dd>
  <td>用語</td>
  <dd>用語の説明</dd>
</dl>

表（table要素）

1
2
3
4
5
6
7
8

<table>
  　<tr>
  　　<th></th>
  　</tr>
  　<tr>
  　　<th></th>
  　</tr>
</table>

フォーム（form）要素

input要素で埋め込み、テキスト入力欄（text）や送信ボタン（submit）、チェックボックス（checkbox）などのtype属性でパーツの種類を指定。

水平線（hr要素）

フッタと、それまでの内容を区別するためにhr要素を入れるなど。一般的にはあまり使われなくなってきている要素

汎用ブロックレベル（div要素）

div要素にIDやクラスを振って範囲を示す。IDやクラスを手がかりにCSSでスタイルを適用する。

インライン要素

アンカー（a要素）

リンク。

1

<a href="URL" target="_blank">○○</a>

画像（img要素）

画像。

1

<img src="URL" alt="" />

改行（br要素）

改行。

1

<br />

強調（em要素とstrong要素）

em要素は通常の強調、strong要素はより強い強調。

削除と追加（del要素とins要素）

削除はdel要素（取消線）、追加はins要素（下線）。

汎用インライン要素（span要素）

CSSを適用させるために利用するのが一般的。

オブジェクト（object要素）

Flashや動画コンテンツを埋め込むなど。

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
  AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100','height','100','src','img/top','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','/○○/' ); //end AC code
  </script>
 
  <noscript>
 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100" height="100">
  <param name="movie" value="○○.swf" />
  <param name="quality" value="high" />
  <embed src="○○.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="100"></embed>
  </object>
 
  </noscript>

コメントと文字参照

コメント

1

<!-- ○○ -->

文字参照/実体参照

• >（&gt;）大なり
• “（&quot;）二重引用符
• &（&amp;）アンド記号
•  （&nbsp;）改行禁止スペース
• ©（&copy;）著作権マーク
• ®（&reg;）登録商標
• ™（&trade;）商標

外部リンク

• »XHTML/CSS リファレンス [WEB ARCHIVES RETURN AGAIN]
• »CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト