第10回ホームページ作成講習会

準備

注意事項

お約束

CSSのパスは各自の環境に合わせ調整すること。

文脈セレクタ

今まで色々な種類のセレクタを習って来ましたが、他にも重要なセレクタがあります。

「文脈セレクタ」は、要素間の構造に基づいて特定の要素を指定することができます。

文脈セレクタ

子孫セレクタ

上の例は子孫セレクタと呼ばれ、p要素内のb要素にマッチします。
このように、「セレクタ+半角スペース+セレクタ+...」と記述することによってある要素内のある要素を指定することができます。
この指定方法は階層がどんなに深くなっても同じです。(例:「div p b i」的な)

文脈セレクタ

子孫セレクタ

こんな風にクラスセレクタ、一意セレクタ、擬似要素セレクタとか擬似クラスセレクタと組み合わせて利用できます。

文脈セレクタ

子孫セレクタ

前々スライドの例だとp要素の子要素、孫要素、曾孫要素...に関わらずp要素内のb要素全てがマッチします。

pとbの間にユニバーサルセレクタを咬ませました。こうするとp要素直下の子要素bにはマッチせず、p要素直下でない孫要素以降のbにはマッチします。

文脈セレクタ

子セレクタ

これは前スライドとは逆、p要素直下の子要素bにのみマッチします。

このように、「セレクタ+半角スペース+>+半角スペース+セレクタ+...」でセレクタ直下の要素のみを指定できます。

ただしIE6以下は子セレクタには非対応なので使用には注意が必要。まあIE6はシェア的にはもう無視できるレベルに来てますが。

文脈セレクタ

隣接セレクタ

隣接セレクタは「セレクタB+半角スペース+++半角スペース+セレクタA」の形式で用い、セレクタBと同じ階層にある(親要素が同じである)セレクタAにマッチします。(例の場合はh1要素とdiv以下のh2要素にはマッチしません。注意。)

ただしIE6以下h

文脈セレクタ

文脈セレクタを一切使わずともクラスセレクタや一意セレクタを乱発すれば同じ事はできますが、文脈セレクタを使ったほうがコンパクトなソースになり結果として作成者の労力が減りますし、多くのウェブ制作者がこの文脈セレクタを用いています。

なお、CSS3では大量のセレクタが追加されましたが、これこそ非対応ブラウザ多すぎなので我々CSS にわか が使うには現実的ではありません。

属性セレクタ

文脈セレクタに比べたら使用頻度はガクッと落ちますが、属性セレクタというのもあります。まあ参考程度に。

説明しなくても分かるわよねー、「「要素名[属性名]」で指定した要素の中で特定の属性名を持つ要素にのみマッチします。属性値じゃないわよ。

属性セレクタ

説明しなくても分かるわよねー2、「要素名[属性名="属性値"]」で要素型セレクタの中で指定した属性を持つ要素のみにマッチします。

属性セレクタ

属性値は半角スペースで区切ると複数指定できるんでしたね。この指定方法では「要素名[属性名~="属性値"]」の形式で、複数の属性値が半角スペースで区切られて列挙されているものの中の一つを指定します。

属性セレクタ

他にも属性セレクタはあるらしい(要素名[属性名|="属性値"]とか)ですが、まず使わんので知らなくておkです。

これでCSSで使うセレクタは全て出揃いました。やっと終わったー。

カスケーディング

継承

CSSはCascading Style Sheetsの略であり、Cascadingとは「滝のような」という意味を持ちます。これはCSSの特性を表す言葉です。

上のCSSではbody要素内のデフォルトフォントサイズが16×0.625=10px、p要素内で文字色が赤色、span要素内で背景色が黒色になります。

上の例では「大江麻理子」が10pxの赤色で背景色黒になります。このように親要素のスタイルが子要素に継承されます。

カスケーディングのルール

デフォルトスタイルとユーザスタイル

一般的なブラウザでは何もしなくともb要素は太字で表示されます。これはブラウザの内部で以下の処理が行われていると考えると理解しやすいです。

これを「デフォルトスタイル」(標準スタイル)と言います。

一方で「ユーザ定義スタイル」というものがあります。これはユーザの好みに応じてスタイルシートを設定できます。これを使えばb要素で括られているコンテントを赤字で表示することも可能です。(各々のブラウザでの設定方法はググって下さい)

また、これまで習ってきたように作成者達がスタイルを設定することができます。これを「作者スタイル」とか言います。

これら3つのスタイルは「作者スタイル > ユーザスタイル > ブラウザスタイル」の優先度で適用され、従って作者が「h1 { font-size: 10px }」と設定すればh1要素でも小さく表示される。

カスケーディングのルール

セレクタの種類

上は何色になるでしょうか。

答えは#ffff00、すなわち黄色になります。
CSSでは、style属性 > p#xyz > #xyz > p.abc > .abc > p > *の優先度でスタイルが適用されます。

カスケーディングのルール

記述順序

上は何色になるでしょうか。

答えは#000000、すなわち黒になります。
CSSでは、後に記述したプロパティが優先される特性があります。これはブロックレベルだろうがなんだろうが同じことです。従って以下も黒になります。

カスケーディングのルール

読み込み順序

読み込み順も関係します。

上の例ではcss/index.css、style要素、css/style.cssの優先順で適用されます。

カスケーディングのルール

!important

今まで習ってきた全ての優先度に関するルールは!importantを付けることによって逆転します。すなわち最優先事項よになります。

@ルール

CSSには@で始まる特殊な書式がいくつかあります。これらはCSS全体を制御するのに役立ちます。@charsetなんかやりましたよね

@charsetCSSの文字コードを指定する。必ず先頭に記述する。詳細はこちら
@import他のCSSファイルを読み込む。@charsetの下(なければ先頭)に記述する。指定にはurl関数を用いる。
(HTMLの外部CSS読み込みで使用した)link要素を複数使って複数の外部ファイルを読み込むことでも(結果として)同じ効果を得られますが、コチラのほうが規約的には正しい使用方法になります。
@mediaメディアタイプを指定する。後述。

メディアタイプ

CSSには閲覧する環境によって出力するCSSを振り分ける仕様があります。

取れる値はscreen(一般的な画面)、print(印刷)、projection(プロジェクタ)、tv(テレビ)、handheld(携帯デバイス)、braille(点字デバイス)、speech(音声デバイス)、など色々ありますが、実際使われるのは対応状況との兼ね合いもありscreenとprintぐらいです。
もしスマートフォン向けのCSSを作る時はhandheldは使わずMedia Queriesを併用するのが一般的です。詳しくはググってみて下さい。

非推奨要素・非推奨属性について

非推奨要素のまとめ

今まで非推奨がどうたらとか散々言って来ましたが、この非推奨要素や非推奨属性をCSSによって代替できます。以下では、非推奨要素とその代替案を纏めてみました。

まあ物理要素と論理要素の説明は重要ですが、それ以外はテキトーに読み飛ばして下さい。

非推奨要素・非推奨属性について

font要素

フォントの大きさや色、書体を指定する要素で、その属性に size、color、face などがあります。
かつて非常に多用されましたが、もはや過去の遺物です。

代替案の要素は定義されていないのでCSSで代替します。

非推奨要素・非推奨属性について

s要素・strike要素

抹消線付きテキストを表示する要素です。特にs要素は記述が短くて便利なので結構使われてますが、ホントはよろしくないです。

代替案としてdel要素がありますが、見栄えのためだけに利用するのは(文法的に)ダメです。

CSSで代用するとこのようになります。

非推奨要素・非推奨属性について

物理要素と論理要素

b要素は「太字で表示する」という情報を持っています。
このように、単純に見た目の変更だけを目的とした要素を物理要素と言います。

物理要素にはb要素の他にもs要素(取り消し)、i要素(イタリック)、u要素(下線)、small要素(習ってませんが文字を現状よりも少し小さくする要素)、font要素などがあります。これらは全てCSSで代替できます。

b要素から順にfont-weight: bold;、text-decoration: line-through; 、font-style: italic;、text-decoration: underline;、font-size: smaller;、color:やfont-size:です。

非推奨要素・非推奨属性について

物理要素と論理要素

b要素は文字を太字にするものでした。strong要素も(表面的には)文字を太字にする要素ですが、その性格はb要素を大きく異なります。

strong文字を強調する。

strong要素は「強調する」という意味的な情報を持っています。従ってstrong要素を受け取ったブラウザはそれを独自の方法で解釈して表現します。
多くのブラウザは「太字にする」というb要素と同じ手法によって「強調」を表現しますが、ブラウザによっては背景色を蛍光色にして目立ちやすくするかもしれませんし、文字サイズを大きくするかもしれません。
このように、意味的な情報を持つ要素を論理要素と言います。

strong要素は多くのブラウザでb要素と同じ表示になりますが、持つ意味は大きく異なります。用途としては、サイト内容に関連した重要キーワードを括るような使い方をします。(このスライドなら「ホームページ」とか)

非推奨要素・非推奨属性について

center要素

要素で括ったすべてのコンテントを中央表示(センタリング)します。元々IEだか何だかの独自拡張要素でしたが、記述が楽なので好んで使われました。でも使っちゃダメです。

代替案の要素は定義されていないのでCSSで代替します。本講習会では中央揃えはalign="center"を教えましたが、これもalign属性が非推奨なのであまりよろしくありません。

を用います。

非推奨要素・非推奨属性について

applet要素

以下補足なので読み飛ばしておk。

Javaアプレットを貼り込むための要素です。JavaはSun Microsystems社が開発したオブジェクト指向のプログラミング言語で、プラットフォームに依存せずに実行させることができます。

代替案としてobject要素が定義されています。

非推奨要素・非推奨属性について

非推奨属性のまとめ

非推奨属性とその代替案のCSSを纏めてみました。

非推奨要素・非推奨属性について

非推奨属性のまとめ

alink・link・vlink属性

alinkリンクスポットのテキストを選択した時 (マウスボタンを押した時) の文字の色
linkリンクスポットの文字色を指定する属性
vlink訪問済みリンク文字色を指定する属性

講習会では触れませんでしたが、body要素は上のような属性を持っていて、昔結構好んで使われました。しかし講習会で習った通り、今はCSSで代替するのが普通です。

非推奨要素・非推奨属性について

border属性

border要素における枠線表示あるいは非表示を設定。border="0"と書くと枠を消せる。

これも講習会でやりましたね。頻繁に使われますがやはりあまりよろしくなく、以下のようにCSSで代替したほうがよろしいです。

非推奨要素・非推奨属性について

bgcolor属性

bgcolor要素の背景色を指定する。

background属性

background要素の背景に画像を張り込む。

非推奨要素・非推奨属性について

text属性

text文書全体の文字色を指定する属性。

前スライドを合わせた3つの属性はbody要素に対して使われる属性ですが、決して使ってはいけません。教えた通り必ずCSSを使って下さい。

非推奨要素・非推奨属性について

width属性

width要素の幅を指定する、テーブル要素内のtr、td、th、罫線を指定するhr要素でも非推奨扱いでは非推奨扱い。しかし画像などのオブジェクトは非推奨ではないので注意。

height属性

height要素の高さを指定する。テーブル要素内のtr、td、th あるいは、ブロックレベル要素の高さ指定では非推奨扱い。しかし画像などのオブジェクトは非推奨ではないので注意。

非推奨要素・非推奨属性について

hspace・wspace属性

hspace要素の左右に余白を設定する属性。
wspace要素の上下に余白を設定する属性。

上もたまーに使われてるのを見ることがあります。でもダメです。必ずmarginプロパティを使うこと。

補足

クラスセレクタや一意セレクタの乱発

セレクタとはあまり関係ありませんがクラスセレクタや一意セレクタの乱発の話に関連して……、classやidは便利なのでついつい使いがちになりますが、乱発には十分注意せねばなりません。

確か初回の講習会で触れたと思うのですが、上のspan要素とb要素は同じ表示になります。
上の場合どちらが適切なのか?もしpやdivなどのブロックレベル要素から.attentionを呼び出したいのならば左側のほうが適切ですが、単にインライン要素の強調目的に使用しているのならばb要素を使った方がHTMLは文書構造を示すという意味では適切と言えます。

このように安易にCSSを用いず、既存のHTMLの要素で同じことができないか考えてから使いましょう。

※ただし強調目的ならば物理強調であるb要素よりも論理強調であるstrong要素を使ったほうが適切ですが……。まあこれは後日。

終わりに

とりあえず前期はHTMLやCSSの基礎についてある程度戯れることが出来たので、後期(或いは夏休み)は実際にサイトを作っていこうかなとか思っちゃってます。