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

準備

注意事項

準備

(CSS利用時の)お約束

style要素が追加されてます。ただし、次回以降このお約束は変化します。

前回の補足

コメントアウトの仕方

前回、CSSでセレクタを指定する度にコメントアウトを利用していた人がいましたが、それは誤りです。コメントアウトはstyle要素の最初と最後に一度だけしてればいいです。

前回の補足

font-sizeプロパティ

前回、font-sizeプロパティの使い方でpx(ピクセル)と%(パーセンテージ)と他12種類くらいが使えるよーとかさらっと流しましたが、font-sizeにおけるパーセンテージは現在設定されているフォントサイズに対する相対的な大きさのことです。(150%なら1.5倍、とか。)img要素のパーセンテージは親要素の大きさに対する大きさなので、前者と後者では意味が異なりますね。

詳しくは今日後半。

CSSの基礎構文

セレクタのグループ化

セレクタはグループ化して一挙に纏めて指定できます。
以下の例ではh1、h2、p、divに纏めてプロパティを指定してます。

※細かい話ですが、カンマ(,)と半角スペースの位置に気をつけて下さい。カンマの後に半角スペースです。

CSSの基礎構文

idセレクタとclassセレクタ

前回、HTMLソース中でidは「名前がかぶっちゃいけない」で、classは「名前がかぶってもいい」(ただしこれはHTMLソース中での話なので、同名セレクタかつ同名クラスの箇所をCSS中には複数作ってはいけません)と教えました。

そのルールに加え、「idとclassは同時指定可能で、classは複数指定可能」というルールもあります。

CSSの基礎構文

idセレクタとclassセレクタ

あ、手打ちでソースを打つとき、コメントの部分はわざわざ写さなくていいです。

CSSの基礎構文

idセレクタとclassセレクタ

実際の表示

CSSの基礎構文

idセレクタとclassセレクタ

少し複雑なソースになりましたが、理解できるでしょうか?
HTMLソースを上から解説していきます。まず本文2行目ですが、汎用的なブロックレベル要素であるdiv要素にid="menu"属性が付いています。CSS中では、この#menuはメニュー領域を幅と高さを指定することで定めています。また、このdiv要素はclass="attention"属性も付いています。このclassは名前の通り、CSS中で注意を引くための文字色と背景色を定めています。このように、id要素とclass要素を同じ要素に定めてやれば、同時に使うことができます。
8行目のspan要素では、先程のclass="attention"を再度使い注意を引いています。さらに、class="big"を使い、文字を大きくしています。(新しい単位emを使いました。解説は後ほど。)このように、class属性で複数のclassを指定するには、半角スペースでclass名とclass名の間を空けます。
9行目ではspan要素のclass="big"を使って文字だけ大きくしています。文字色や背景色はそのままです。

CSSの基礎構文

ユニバーサルセレクタとその省略

CSSでは、今まで習ってきたh1やpなどの要素を対象とした要素型セレクタの他に、ユニバーサルセレクタ(全称セレクタ)というセレクタを扱うことが出来ます。

上の例では、すべての要素に対して文字サイズを18pxにしています。h1要素もp要素も、すべて18pxのサイズになります。
このように、「*」(ワイルドカード)を使うことですべての要素にプロパティを適用できます。

ただし、上のような全称セレクタの使い方は(正規化がフォームコントロールにまで及んでしまうので)よろしくないとか言われており、あんまり使いません。実際には上のような使い方ではなく、次のスライドのような使い方をするのが一般的です。
(参考)http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

CSSの基礎構文

ユニバーサルセレクタとその省略

例では、以下のようなクラスの使い方を出しました。

上のセレクタは、実は「*.attention」「*.big」を表しており、全ての要素の中でattentionクラスとbigクラスを属性で指定している要素全てに適用されます。
上の例ではユニバーサルセレクタを省略しています。このように、ユニバーサルセレクタは省略できます。(※前スライドの例は除く)

CSSの基礎構文

ユニバーサルセレクタとその省略

前回の講習会の例(h1#headline1など)ではあえて省略しませんでしたが、idセレクタの場合は要素型セレクタやユニバーサルセレクタは省略するのが普通です。

さて、ここでクイズです。idセレクタを使う際に要素型セレクタを省略してしまうのはなぜでしょうか。

CSSの基礎構文

ユニバーサルセレクタとその省略

前回習った通りidセレクタは一意のもの、つまりHTMLソース中で同じ名前のidは複数回使えず、したがってわざわざ要素型セレクタを付加しなくともそのid名だけでHTML上の一箇所を指定できます。

ただしカスケーディングの優先順位を高めたり、共通スタイルシートの規則の適用状況を文書によって変えたい時にはidセレクタにも要素型セレクタを付加するのですが、そこまで考えてidセレクタを使うのはまだ難しいので今は触れません。

CSSの基礎構文

幅と高さを指定する

#menu(id="menu")では新しいプロパティを使いました。

width幅を指定する。px、パーセンテージの他、11種類ほど指定方法がある。(次のスライド)
使い方については、HTMLのwidth要素でやったのと同じですね。あ、でもHTMLと違って必ず単位をつけてくださいね。
height高さを指定する。使い方は上と同じ。

CSSの基礎構文

サイズの指定方法

CSSでは、数値に単位を付けて長さを指定します。px以外の指定方法では、小数が使用可能です。(有効数字はブラウザにより異なるが小数点3桁以降は殆ど使われない)
また、「0.5em」など、1未満の小数の場合「.5em」と書くことができ、数値「0」(ゼロ)の場合は単位を省略できます。

赤くなってるのは見る人の環境に依らず同じサイズで表示される絶対的なサイズ指定で、それ以外は相対的なサイズ指定です。

pxピクセル。HTMLのwidth属性でやりましたがピクセルとはモニタの店でしたね。小数使用不可
em現在の文字の高さを1emとして基準にした単位。1.5emなら現在の文字の1.5倍、.1emなら0.1倍。文字基準ってだけで文字以外のwidthとかでも使える
%font-sizeなどで使った時:現在の文字の大きさ基準。この場合、↑のemとほぼ意味変わらんです。150%なら現在の文字の1.5倍
widthなどry:親要素に対する大きさ。詳しくは第3回参照。

CSS2.1の範囲でよく使われるのは上の3つのみ。次スライドと次々スライドは補足なんで覚えなくておk

CSSの基礎構文

サイズの指定方法

ex文字「x」の高さを1exとした基準
cmセンチメートル。関係ないけど、秒速5センチメートルにはめっちゃハマった
mmミリメートル
inミリメートル
ptポイント(欧米で使われるフォントサイズの単位)
pcパイカ(欧米で使われるフォントサイズの単位)

CSSの基礎構文

サイズの指定方法

以下は、font-sizeプロパティでの文字サイズ指定に使える値。widthとかでは使用不可。英単語で指定できるが、そんなには使われない。

xx-smallとても小さなフォント。
x-small小さなフォント
small少しだけ小さなフォント。
medium通常の大きさのフォント。(=16px)
large少しだけ大きなフォント。
x-large大きなフォント。
xx-largeとても大きなフォント。
larger現状よりも少し大きなフォント。
smaller現状よりも少し小さなフォント。

CSSの基礎構文

サイズの指定方法

CSS3.0(最新技術)では以下の単位が追加された。ただしどれもIE8以前や一部のブラウザは使えないので使用には注意が必要。rem以外はほぼ使われていない。

rememの進化系。詳しくはこの後。文字サイズ指定のこれからの主流になる可能性大だが、IE8以前やOpera(11.10現在)wwwwwで使えないのがアレ
ch「0」の横幅
vw表示領域の横幅
vh表示領域の高さ
vmin表示領域の横幅と高さのうち小さな方

CSSの基礎構文

サイズの指定方法の補足

px

絶対的なサイズ指定方法において最も使われる単位であり、widthプロパティなどには普通pxかパーセンテージが用いられる。
しかし文字サイズを指定する際の単位には避けられる。Internet Explorerでは老眼の爺さんでも文字が見やすいように文字サイズをブラウザ側から自由に変更する機能(ズーム機能とは異なる)があるのだが、この絶対的なサイズ指定方法によってフォントサイズが指定されていると、その機能が無効化されてしまう。あなたが「この文字サイズが(・∀・)イイ!!」とか思っても老眼の人や閲覧する環境によっては見難くなっていることがあり、しかもそれを変えられないので色々不都合が生じてしまう。マトモなウェブ制作者(除:山口)はpxの使用を禁忌している。

CSSの基礎構文

サイズの指定方法の補足

em

emを使うことで、前述のpx問題は解決できる。emは現在の文字サイズに対する相対的なサイズ指定だからである。使い方は以下の通り。

多くのブラウザはデフォルトフォントサイズを16pxとしている。従ってbodyセレクタ(htmlセレクタ)で基準(1em)の文字サイズを16pxの62.5%(=10px)に調整することでサイズの計算がしやすくなる。

CSSの基礎構文

サイズの指定方法の補足

em

ただしemにも欠点がある。

実際の表示

最初のdiv要素ではデフォルト(=10px)の2倍の20pxで表示されるが、タグが入れ子になってると更にその2倍の40pxで表示しちゃって困ったことになる。これは同じ相対的サイズ指定であるパーセンテージでも同様。
単純なソースなら問題無いが、複雑なページを書くときに頭が痛くなる。

CSSの基礎構文

サイズの指定方法の補足

rem

その問題点を解消したのがremで、emは親要素に対する相対的なサイズだが、remでは常にデフォルトフォントサイズ(html要素)に対し相対的になる。

CSSの基礎構文

サイズの指定方法の補足

rem

ただし前述のとおりIEやOpera(失笑)ではremは非対応。文字サイズが変わらないことを避けるため、以下の様な記述をする。

CSSでは同じプロパティを複数回記述すると、後ろに記述したプロパティが優先されるという特性がある。(これは後日。)従って、IE8以前やOpera(失笑)で見るとpx、それ以外で見るとremで文字サイズが表示される。まあ、これだとまたpx問題が再燃するが致し方ない。

CSSの基礎構文

idセレクタとclassセレクタ

ところで、先の例でidとclassを同時に指定したり、classを複数指定するメリットはなんでしょうか?

仮に、#menuの部分で文字色と背景色も一緒に設定したとします。

これならばメニューの部分は例と同じ表示になります。メニューの部分は。
しかし、文章で文字を強調したい時にはどうすればいいでしょうか?また新しいclassセレクタを作ってcolorプロパティとbackground-colorプロパティを定めなくてはいけません。これではソースが無駄に長くなってしまい、非合理的ですね。

CSSの基礎構文

idセレクタとclassセレクタ

ちなみに、idセレクタとclassセレクタ(あるいは単なる要素型セレクタ)を同時に指定した時に同じプロパティを指定すると、idセレクタで指定したものが優先されます。(後で詳しくやります。)

この特性を利用して、何らかの殆ど同じデザインの箇所をページ内に複数作るとき、classで一旦プロパティを指定して、一部例外的なデザインのある箇所だけidで指定し直す、的な使い方が考えられます。

CSSの基礎構文

idセレクタとclassセレクタ

  1. 攻殻機動隊 STAND ALONE COMPLEX
  2. コードギアス 反逆のルルーシュ
  3. シュタインズ・ゲート
  4. ARIA The ORIGINATION

補足

クラス名や識別子(id)の付け方

以下のCSSとHTMLの「クラス名」の箇所に名前を付けるとします。あなたならばどんなクラス名を付けますか。

※この例の場合、span要素の内容「打ち切り」が情報的に重要です。

補足

クラス名や識別子(id)の付け方

文字色赤なんだから、class="red"でおk^^
→ブブー
注意に書いたように、この場合span要素の内容は情報的に重要であることを表しています。
class="red"として、途中でやっぱり黄色に変えたくなった時、あなたはどうしますか?ページ内すべてのclass名を書き換えるのでは面倒ですね。不適切です。

色弄ってるんだからclass="color"で
→ブブー
もし文字色ではなく文字サイズで強調したくなった時、どうしましょうか。

打ち切りなんだからclass="uchikiri"でいいんじゃね?
→ブブー
それじゃページ内の他の部分で使った時にちょっと変ですね。

面倒だからclass="class1"で……
→ブブー
論外

class="azusa"
まあ奨励賞ぐらいは

補足

クラス名や識別子(id)の付け方

色を付けるのは、なにか目的があってのことです。この場合、内容が重要なので閲覧者に注意をはらってもらうために使いました。大切なのは「注意を払ってもらう」という意味上の目的であって、赤い文字であることは本質ではありません。

クラスはその「意味」を示すようにつけるほうがよいのです。注意を払ってほしい場所にはclass="important"とかclass="attention"としておけば、色をどれだけ変えようと文字サイズを弄ろうとクラス名には矛盾が生じません。

補足

色の指定方法

後でやると言いつつ結局やってない色の指定方法を、ここで纏めておきます。

#RRGGBBカラーコード。Red、Green、Blueを16進数を使って表すんでしたね。
#RGBカラーコード。3桁バージョン。
色名redとかblueとかの色名で指定。
rgb(R, G, B)あまり使われないが、rgb(255, 100, 0)的な感じでカラーコードを0~255の10進数で表す。
また、rgb(50%, 100%, 0%)的な感じで0~100%のパーセンテージも使用可能。
rgba(R, G, B, a)CSS3.0で追加。上に加え、aで透明度(0.0~1.0)を表す。
hsl(色相, 彩度, 輝度(または明度))CSS3.0で追加。hsl(300, 100%, 50%)的な感じで、色相(0~360)、彩度と輝度(それぞれ0%~100%)で指定する。
詳しくはhttp://cweb.canon.jp/camera/picturestyle/editor/matters05.html
transparent透明色。ほとんどの要素の初期値だが、テキストボックスなんかを透過するときに指定が必要
currentColorCSS3.0で導入された値。あんま使わないが、例えば文字色をなんちゃら色で指定したけど、背景色もそれと同じのにしたいって時に使う。

補足

色の指定方法

補足

色の指定方法

currentColorのテスト
rgbaのテスト