Click here to visit our sponsor

ECサイトのお勧め商品カタログ|映画好きのBS/CSガイド

Webアクセシビリティ: head

head(文書情報): 本論へ

head(文書情報) 本論

ブラウザに表示されるbody部分のみならず、head部分にも アクセシビリティへの配慮は必要です。

title(文書タイトル)

head部分に必ず一度、書く事になっています。


<title></title>

こう書くとブラウザの上部にはそのページのURIが表示されます。

「お気に入り」「ブックマーク」に登録すると自動的にこのtitle要素がページ名として使用され、検索サイトの結果表示にも使われています。

lang属性指定も可能です。

先に紹介した「ユニバーサルHTML/XHTML」ではtitle要素への配慮として、
<title>サイト : ページ</title>
このようにすると「お気に入り」「ブックマーク」に登録した際、肝心のページに対する情報が見えなくなる場合があるとして、
<title>ページ : サイト</title>
このように書くのが親切なのではないかと書かれています。

僕自身、これを読み、なるほどと思い実践しています。

このページのトップへ戻る

meta(メタ情報)

そのページ（文書）に関する情報を記述します。
いわばその文書のプロパティに値し、検索等で文書が何者であるかを指し示す役割をしますが、HTML4.01では特に「メタデータ」のプロパティは定義されていません。

書式

<meta http-equiv="HTTPヘッダ用プロパティ" content="プロパティの値">

<meta name="プロパティ名" content="プロパティの値">

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

コンテンツ・タイプを定義。
MIMEタイプ（ファイルの種類）text/htmlでcharset（文字コード）はShift_JIS
MIMEタイプはtext/htmlが固定値ですが、charset（文字コード）は日本語の場合、以下の３種が使われています。

何故、このように文字コードが多種になってしまい、文字化けという問題が発生するのかは、日本語と文字コード ここら辺から読み進めていくと理解できると思います。

＃UnicodeとISOの戦いも面白そうですが、、、、

コンテンツ・タイプはその関連を使用する前に定義します。
つまり、これらは文字コードが定義される前に文字コードの文字情報を利用しているので不可。


<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<head>
<meta name="keywords" content="キーワード">
<meta name="title" content="ページタイトル">
<meta name="description" content="ページ解説">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

デフォルトのスクリプト、スタイルのタイプ設定。
これを記述する事により、属性値にonLoad="" などのスクリプトやstyle=""を記述する事が可能となります。

デフォルトのスクリプト、スタイルのタイプはその関連を使用する前に定義します。
つまり、これらはデフォルトのスクリプト、スタイルのタイプが定義される前にスクリプト、スタイルのタイプを利用しているので不可。


<script type="text/javascript">スクリプト</script>
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/stylesheet">スタイル</style>
<meta http-equiv="Content-Style-Type" content="text/css">

この他のhttp-equiv属性のプロパティ名には以下のようなものがあります。

ただし、ブラウザでの実装はあまり行われておらず、このような設定はサーバー上の.htaccessというファイルで設定した方がいいでしょうね。

.htaccessに関してはミケネコの htaccess リファレンスを参照なさって下さい。

アクセシビリティの観点からもリロードなどはてんかんなどの障壁に悪影響あるので使用しない事となっています。

以上はロボット型検索エンジンに対する情報。

このページのトップへ戻る

base(基準URI)

文書ないのリンクをすべて相対的に指定した際、基準となる絶対URIをここで指定します。この要素を指定しない場合は文書そのものが基準URIとなります。

URIとはhttp://www.phoenix-c.or.jp/~takayan/などのよく見かけるアドレスの事で、 かつてはURIを細かく分類し、URLとして、呼ばれていました。けれどもその必要性がなくなったため、URIと呼ぶのが正しいとされています。

絶対URIはhttp://から始まるアドレス。相対URIは基準となる位置から見たアドレスという事になります。

http://www.phoenix-c.or.jp/~takayan/を基準とすると 相対URI html/ または ./html/ でhttp://www.phoenix-c.or.jp/~takayan/html/となります。

また、サイト内絶対URIというのもあり、/html/ と指定する事によりhttp://www.phoenix-c.or.jp/~takayan/html/が認識されますが、この場合、http://www.phoenix-c.or.jp/~takayan/がサイトのルートディレクトリであるという条件が付きます。http://www.phoenix-c.or.jp/がルートディレクトリならば/html/ と指定するとhttp://www.phoenix-c.or.jp/html/と認識されます。

base(基準URI)はサイト内絶対URIを理解していれば、実際的には利用度はあまりありません。試験的にそのページの絶対URIを指定して、リンクチェックするには有効かも知れませんね。

相対URI、絶対URI、サイト内絶対URIは把握しておいた方がいいでしょう。

このページのトップへ戻る

link(関連ファイルの指定)

その文書に関連する別の文書との関連を指定します。

その文書が他の文書とどのような位置関係にあるのか記述します。
LYNXなどのテキストブラウザでは上部にリンクとして表示されます。

rel="リンクタイプ"はリンク先（相手）文書から見た当文書の関係、
rev="リンクタイプ"は当文書から見たリンク先（相手）文書の関係を指定します。
revが実際に使われるのは
<link rev="made" href="mailto:作者のメールアドレス">
<link rev="made" href="作者のホームページアドレス">

<link rel="alternate" href="別バージョンの文書">
media属性が同時指定の場合、出力媒体別の同文書。
hreflang属性が同時指定の場合、別言語での同文書。

<link rel="start" href="最初の文書">
<link rel="next" href="次の文書">
<link rel="prev" href="前の文書">
<link rel="contents" href="目次の文書">
<link rel="index" href="索引の文書">
<link rel="glossary" href="用語集の文書">
<link rel="copyright" href="著作権に関して記述した文書">
<link rel="chapter" href="章">
<link rel="section" href="節">
<link rel="subsection" href="項">
<link rel="appendix" href="付録">
<link rel="help" href="ヘルプ">
<link rel="bookmark" href="キーとなる部分">

<link rel="stylesheet" href="外部スタイルシート">

media属性では以下が指定可能。

target属性(非推奨)は以下のようなものがあります。

このページのトップへ戻る

style(スタイルシート)

スタイルシートの使用方法

外部スタイルシート
<link rel="stylesheet" href="外部スタイルシート" type="text/css">
ヘッダで指定
<style></style>
要素内で属性指定
style="スタイル内容"

この３種があります。

いずれにしてもCSSを使う際は
<meta http-equiv="Content-Style-Type" content="text/css">
スタイルシート言語をまずは指定します。

この中で推奨されているものは外部スタイルシートであり、style属性はXHTML1.1で非推奨、style要素はXHTML Basicでそれぞれ非推奨になっています。

type属性は必須でtype="text/css"と指定します。
先に紹介したmedia属性も指定可能で、media="print"と指定するとプリント用のスタイルシートを組む事が可能です。

＃ただし、現状、未対応のブラウザが多いです。

補足として、Netscape Navigator4.*ではmedia属性を指定するとそのスタイルシート自体を無視します。

これを利用して、最新のブラウザとNetscape Navigator4.*用のスタイルシートを指定する事も可能です。

<link rel="stylesheet">は複数指定可能で、複数のtitle属性を指定すると レイアウトを複数作成する事が可能です。
複数のレイアウトが閲覧可能なのは、今のところ、Netscape 6.* Mozillaのみに なっています。

複数のレイアウト参考例としては 御本家 http://www.w3.org/Style/CSS/、参照下さい

ユーザースタイルシートのススメなんていうのもアクセシビリティ施されたページでは活用メリットが大きくなります。

Netscape Navigator4.78のスタイル実験

書式

セレクタ　{ プロパティ : 値; }

セレクタとはスタイルを適用させる対象です。
複数のプロパティは「プロパティ : 値;」で連結させます。複数のセレクタを指定する場合はカンマ(,)で連結させ指定します。大文字小文字の区別はしませんが、XHTMLでの使用を考えるならば、小文字での要素、属性指定をした方がいいです。id,classの名前は大文字小文字の区別をします。引用符を使用するとその部分は「文字列」として扱われますので注意して下さい。

CSS内部のコメントは/* 〜 */ で囲った範囲となります。
HTML4.01ではstyle要素はソースを表示させないため、<!-- 〜 --> で囲いますが、XHTMLでは囲った部分をコメントと解釈するため、<![CDATA[ 〜 ]]>と囲うとなっていますが古いブラウザでは逆に囲った部分をソース表示するため、囲うのをなくすのが無難です。

セレクタの種類

要素名

指定要素にのみスタイル適用。

h1 {...}
アスタリスク

すべての要素にスタイル適用。

* {...}
IDセレクタ(シャープ指定)

その要素の中で指定したid属性の名前(識別子)を持つものにスタイル適用。

p#myID {...}
#myID {...}ならばすべての要素の該当id属性に適用。
CLASSセレクタ(ドット指定)

その要素の中で指定したclass属性の値を持つものにスタイル適用。

p.myID {...}
.myID {...}ならばすべての要素の該当class属性に適用。
属性関連のセレクタ（主なもの）
要素名[属性名]

その要素内で指定の属性名が使われている場合にスタイル適用。この場合、属性値は無関係です。

p[title] {...}
要素名[属性名="属性値"]

その要素内で指定の属性に対し、指定の属性値が指定されている場合、スタイル適用。

p[title="hoge"] {...}
疑似クラス
要素名:link

a要素のうち、まだ観ていない(キャッシュされていない)要素に対し、 スタイル適用。

要素名:visited

a要素のうち、すでに観た(キャッシュされている)要素に対し、スタイル適用。

要素名:hover

ユーザーがカーソルをそのようその上に置いているけれど、まだアクティブではない状態の時にスタイル適用。
a要素指定時には「:link」「:visited」の後、「:active」の前に記述します。

要素名:active

その要素がユーザーによってアクティブにされた状態の時にスタイル適用。
a要素指定時には「:link」「:visited」「:hover」の後に記述します。

要素名:focus

その要素がユーザーによって選択された状態の時にスタイル適用。

要素名:lang(言語コード)

その要素の中で言語が指定された言語コードに設定されている要素に対してスタイル適用。

要素名:first-child

その要素がある要素内で最初に出現する子要素の場合にスタイル適用。

疑似要素
要素名:first-line

段落を示すブロックレベル要素の１行目として表示された部分にスタイル適用。

要素名:first-letter

ブロックレベル要素の先頭１文字に対し、スタイル適用。

要素名:before

contentプロパティと共に使用し、その要素の直前に追加される内容に対し、スタイル適用。

要素名:after

contentプロパティと共に使用し、その要素の直後に追加される内容に対し、スタイル適用。

セレクタの組み合わせ

セレクタ セレクタ

セレクタを半角スペースで繋ぐ事で、前の要素内に含まれる後の要素(子孫要素)にスタイル適用。

p em {...}
セレクタ > セレクタ

セレクタを「>」で繋ぐ事で、前の要素内に含まれる後の子要素にスタイル適用。

p > em {...}
セレクタ + セレクタ

セレクタを「+」で繋ぐ事で、共通の親要素を持つ前の要素内の直後の後の要素にスタイル適用。

h1 + h2 {...}

スタイルの継承

プロパティで設定した値がその要素の子要素に継承されるかどうかは各プロパティの定義によります。それぞれの定義を再度調べ、使用して下さい。

pageプロパティを除くすべてのプロパティは「inherit」という値を設定する事により、通常値を継承しない要素でも強制的に継承します。

スタイルの優先度

スタイルが競合する場合の優先度は以下のようになっています。

ブラウザのデフォルト・スタイルシート
↓優先
ユーザーのスタイルシート
↓優先(ただし「!important」を使えばユーザー側が優先)
制作者のスタイルシート

「!important」は制作者側も設定可能ですが、両方「!important」設定されている場合はユーザーのスタイルシートが適用されます。

要素内では要素指定、クラス指定、id指定の順でが優先されます。同じ指定の場合は後に書かれたものが優先されます。

@マークで始まる文

@charset 文字コード指定

@charset指定後、半角スペースあけ、文字コードを引用符で括り、指定します。外部スタイルシートの先頭に記述します。link要素のcharset属性でも指定可能です。

@media:出力先別のスタイルシート

@media指定後、半角スペースあけ、メディアを指定し、それぞれのスタイルを設定します。(メディアタイプはHTML定義と同じですがCSS2より「embossed」が追加されています)

@import 外部スタイルシートの取り込み

@import指定後、半角スペースあけ、スタイルシートのURIを指定、更に半角スペースあけ、メディアを指定します。一般のスタイル指定の以前に指定しなければ無視されます。

@import url("print.css") print;
@import url("tv.css") projection, tv;
@import "print.css" print;
@import "tv.css" projection, tv;

上記、どちらの書式でも使用出来ます。

@page ページ設定

印刷用のページ設定を指定します。@pageで名前を設定した場合、特定要素にpageプロパティでスタイル適用出来るようになります。

@page yoko { size:landscape; }
table { page:yoko }
@font-face フォントの選択に関する指定

指定フォントの細かな設定が可能になり、フォントのURIを指定する事により、ダウンロードも可能になりますが、内容が専門的になり、実装状況もほとんどされていないのが現状のようです。

ちなみにスタイルシートのフォントファミリーの種類は以下のものがあります。

このページのトップへ戻る

補足

> head部分を書かなければどうなるですか？

まず、ブラウザの上の方にアドレスが表示されますね。
そして、文字化けする確率が高くなります。
文字コードを指定してませんからね。
残りのページ情報もなし。
つまりは正体不明のページになりますね。

ただし、プライベート・ページならば、最低限のヘッダでもOKです。
ウェブアクセシビリティはあくまでも公的なページに対してきちんと情報が伝わるようにする指針である事が前提ですので。

最低限ヘッダとはJavaScript、CSSを使うならば以下のようになります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=文字コード">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<link rel="stylesheet" href="外部スタイルシート" type="text/css">
<script type="text/javascript" src="外部JavaScript"></script>
</head>
このページのトップへ戻る

以下はbodyの中にて解説いたします。

非推奨タグに関してはここでは解説を省かせていただきます。ご了承下さい。

このページのトップへ戻る
Welcome(0) | この文章のHTML版(h) | Tag(9) | head body frameset(b) | frameset(1)

検証サイト一覧

Valid XHTML 1.0! | Valid CSS! | Another HTML-lint | このサイトは、情報バリアフリーを推進しています

アフィリエイトでいきましょう

A8.net|ＴＧ−アフィリエイトプログラム|アクセストレード|LinkShare(リンクシェア)|バリューコマース|TrustClick
Click here to visit our sponsor|Click here to visit our sponsor|iPod nano|ウォークマンAシリーズ登場！|Dell|楽天|amazon.co.jp|OnGen（オンゲン）|各ショップお勧め品

ウイルス対策

ウイルスバスター ダウンロードストア|シマンテックダウンロードストア|マカフィー・ストア|SOURCENEXT

2003-10-29 著作
Copyright ©2003-2013 問い合わせ. All Rights Reserved
[all that's jazz][wag ひょうきん者]
Netscape 6.* Mozilla(ja) だと「表示」→「スタイルシートを使う」で画面表示を変更できます。
Netscape Communicator 4.* は簡易版のスタイルシートを適用しています。
このページのトップへ戻る