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

準備

注意事項

お約束

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

演習問題

演習問題の解答例

次スライドに続く

演習問題の解答例

次スライドに続く

演習問題の解答例

演習問題の解答例

この解答は、あくまで一例です。
パスは環境によって異なるでしょうし、色とか大きさはハッキリと記述した箇所以外は異なってても構いませんし、idやclassの使用手法が異なっても構いません。

何か質問があれば山口まで。

前回の補足

marginプロパティの応用

演習問題でちゃっかり使っちゃいましたが、marginは以下の様な使い方で本文中の上下左右の余白を消せます。
body要素自体もボックスモデルの例外ではないですからね。

paddingは(仕様的には)なくても大丈夫ですが、paddingも同時に指定しとかないとブラウザによっては余白が出てしまう場合もあるので一応指定すること。

前回の補足

style属性の補足

style属性では個々の要素に直接CSSを適用できるとか言いましたが、前回やったurl()関数や今日やるfont-familyプロパティを使うときは、二重引用符の使い方に注意せねばなりません。

上記は誤った使い方です。上の状態だとstyle属性の値がstyle="background-image: url("になってしまいます。
こういう場合、引用符(')を使います。

各部の名称

今更なんだけど、なんとなくネットサーフィンしてたら各所の名称が綺麗に整理されたサイトが出てきたのでここに載せておきます。このレジュメでは誤用しまくってるので、整理しないと詳しく書いてあるサイトなんか見ると混同するので。

各部の名称

フォント関連プロパティ

フォント(テキスト)関連のプロパティはどれも使用頻度が割と高いので、突然ですが今から一気にやります。

font-style文字スタイルを指定。
normal(通常フォント、初期値)、italic(イタリック)、oblique(斜体)を取れるが、italicとobliqueは(厳密には異なるものの)殆どのブラウザやフォントでは同じ表示になるので区別しなくていい。
つまり、font-styleではitalicしか使われない
font-weight文字の太さ。
normal(通常フォント、初期値)、bold(太字)、bolder(より太く)、lighter(より細く)、数値(100-900で数値が高けりゃ太い)の値を取るが、上と同じく皆同じ表示になる。
つまり、font-weightではboldだけ使えばおk
text-decoration文字の装飾。
none(なし、初期値)、underline(下線)、overline(上線)、line-through(打ち消し線)、blink(点滅、だがIE非対応なので原則使うな)など。
これでu要素とかs要素の代替ができますね。
CSS3では他にも値が追加されてますが、非対応大杉なんで割愛

フォント関連プロパティ

同じ表示になる奴が多くて紛らわしいですね。
将来的には使用頻度の低い値は廃止になっちゃうかもしれません。

ちなみに、font-style: bold;とかやっても太字とかイタリックにはならないです。プロパティと値の組み合わせを間違えないように。

フォント関連プロパティ

font-familyフォントを指定する。
前に散々説明した通り、アナタのPCに入ってるフォントが他のPCに入っているとは限りません。フォントをカンマ(+半角スペース)で区切って複数指定すると、左側から順にPCに入っているか探し、最初に見つかったフォントを利用します。
フォント名が日本語or半角スペース混じってる場合引用符で括ります。単なる引用符(')で括るのが好きな人が多いですが、二重引用符(")でも何も間違ってはいません。

フォントの説明はフォントとはで散々説明しましたね。
例ではまずWindows用のフォントであるメイリオやMeiryo(メイリオの英語読み)を指定し、なければMac用のヒラギノ角ゴ(ry、なければWin用のMS Pゴシック、Mac用のOsaka、最後に「sans-serif」という書体終端部の突起の無いゴシック体やHelveticaなどのフォント(これは抽象的な指定方法なのでOSによって表示が異なる。)を指定しています。

ちなみに、上で出した例は日本語環境ユーザが最も見やすいとされている理想的なフォント群の指定方法になります。是非コピペして使いましょう。

フォント関連プロパティ

ちなみに、例で指定したsans-serif以外にも、serif(書体の終端部の突起付きのフォント。明朝体やTimes)やcursive(筆記体)、monospace(等幅)などの抽象的な指定もできます。

http://rinrin.saiin.net/~aor/fonts/allfonts
上はフォントカタログです。
http://alumnat.blog1.fc2.com/blog-entry-233.html
こっちはWinとMacの共通フォント。

あ、ただしフォントが指定できるからって単語ごとにフォントを変えたりすると残念なことになります。同一ウェブサイト内ではフォントは統一した方が結局ユーザに喜ばれることが多いです。(英字と日本語は別けてもいいけど。)

CLANNAD坂上智代C.C.ARIA The ORIGINATION
人生DARKER THAN BLACK魔法少女

ちなみに、font-familyプロパティで指定したフォントが一つもPCに入ってない場合、ブラウザで指定した標準フォント(WinならMSPゴシックとかメイリオとか)で表示されます。

フォント関連プロパティ

line-height(ブロックレベル要素内の1行あたりの)行の高さを指定。
normal(通常、初期値)、auto(自動計算)、none(親要素のフォントサイズに依存)、数値、パーセンテージを取れる。
数値には二種類あり、単位付きと単位なしがある。
単位なしの場合、font-size×数値=行の高さとなり、この場合パーセンテージやemなどの単位付き相対単位とほぼ同意。
単位付きの場合、emなどの相対単位は上の通りだが、pxなどの絶対単位の場合はその値がそのまま行の高さとなる。
なお、line-heightが20pxでfont-sizeが14pxの場合20px(行の高さ)から14px(フォントサイズ)を引いた残りの6pxが行間として上下均等に3pxずつ割り振られ、line-heightが10pxでfont-sizeが14pxなど行の高さがフォントサイズより小さな値の場合には行が重なって表示される。

あ、CSSでただ単に数値って説明した場合、単位は必ず付けて下さい。このline-heightの形式が例外的なだけなんで。

フォント関連プロパティ

letter-spacing文字間隔。
normal(通常、初期値)、数値、パーセンテージ

糞長い文章なんかを打った時、(特にIEでは)字間が詰まってサイトが見難くなります。
そんなときこのプロパティをline-heightプロパティと併用してやるとサイトが見やすくなります。

フォント関連プロパティ

text-alignプロパティ

text-alignテキストの位置。HTMLでやったalign属性と似てる。
値はleft、center、right。
他にも値を取れるが、あまり使わないので触れない。

これで非推奨属性のalignを代替できますね。

フォント関連プロパティ

text-alignプロパティ

注意したいのは、これはあくまでブロックレベル要素内にあるインライン要素(テキストとか画像とか)の位置を指定するためのもので、例えばブロックレベル要素であるtable要素はtext-alignを無視します。

table要素の場合、table要素自体にmarginプロパティの左や右を直接指定すること。

中央にしたい場合は以下の様にautoを指定。下は非推奨なalign属性を使った例。

フォント関連プロパティ

text-indent行頭のインデント(字下げ)を指定する。
数値、パーセンテージを指定可。(初期値0)
マイナスを指定すると反対方向に突き出る。

例の場合新しい段落の文字が二字ずつ空きます。
後述するcontentプロパティでスペース指定しても字下げはできますが、こっちの方が一般的です。

補足ですが、値に9999pxとか-9999pxとか指定するとユーザに見えないいわゆる隠し文字になって検索エンジン向けにキーワードを多数与えられるので検索順位が上がる!とか書いてるSEO対策用書籍がありますが、古い情報です。そんなことやったらGoogle先生がブチ切れて検索結果から除外される可能性すらあるので止めましょう。まあ、詳しくは後々。

擬似クラスセレクタ

話題変わって、ここで新しいセレクタを使ってみましょう。

上の従来の例では、a要素の色が赤くなるだけでした。

擬似クラスセレクタ

では以下ではどうなるでしょうか。

上の例では、未訪問のリンクが赤に、訪問済みのリンクが青に、カーソルを上に合わせたリンクが緑に、クリックしたリンクが背景色黒になる。

こんな風に:linkだの:visitedだの「:ごにょごにょ」の形式で、要素の状態によって対象を指定することができます。

擬似クラスセレクタ

:link未訪問のリンクにマッチ。
これはa要素にしか使えない
:visited一度でも訪問済みのリンクにマッチ。
これはa要素にしか使えない
:focusタブキーなどでフォーカスが当てられた状態にマッチ。
a要素以外でも使用可能
:hover要素上にカーソルを置いた状態にマッチ。
a要素以外でも使用可能
:active要素をクリックした状態にマッチ。
a要素以外でも使用可能

下3つはa要素以外でも使えます。「span.attention:hover」的な感じでclassやidと組み合わせることも可能です。

擬似クラスセレクタ

a要素を対象とした擬似クラス

知らない人が多いですが、a要素に擬似クラスを使う時は前の例の順番で使わないとブラウザ(主にIE)によっては予期せぬ動作になりますし、実際仕様的にも誤っています。(詳しい説明は省略しますが)

まあ要は使う時は例をコピペしろってことです。

擬似要素セレクタ

疑似クラスが文書中の特殊な状態の要素自体を指定するのに対し、疑似要素は文書中の要素の一部を疑似的な要素として扱います。
ただし使用の際の形式は同じなんで、これは擬似要素でこれは擬似クラスとか深く区別しなくてもいいです。

:first-letter要素の一文字目。
:first-line要素の一行目。

擬似要素セレクタ

:before指定した要素の直前。
:after指定した要素の直後。

このように、beforeやafterは文字や画像を挿入するのによく使用される。以下はプロパティの説明。

contentコンテントを追加する。
文字を二重引用符で括って入れたり、url()関数で画像などを入れたりします。
なお、このプロパティで全角とか使う時は@charsetを確り指定しとかないと文字化けするかも。

contentプロパティや上2つの擬似要素は初心者ではあんまり使用機会がないかもしれませんが、適切に使えば似非プロっぽいです。(ただしIE7以下は非対応)

擬似要素セレクタ

selection擬似要素

CSS3では、前スライドや前々スライド以外にも擬似要素が追加されました。
ただし、「:」だと擬似クラスと見分けがつかないっつー理由で擬似要素には「::」を付けることになりました。
このルールは従来の擬似要素でも使えますが、「::after」と書いても認識しないブラウザがあるので、従来通り「:after」と書いたほうが無難です。

::selectionマウスのドラッグで選択された箇所。
::-moz-selection同上。後述

ドラッグで選択された箇所が明るい青になります。多くのWinのブラウザでは標準では濃い青か白ですよね。

擬似要素セレクタ

selection擬似要素

前述の「::selection」だけだと、FirefoxなどのMozilla系のブラウザには反映されません。
その対策として、「::-moz-selection」という擬似要素を同時指定することで正しく表示できます。

この接頭辞「-moz-」は意味を持っています。

独自拡張プロパティ

CSSの最初の講習会でさらっと言いましたが、最新技術であるCSS3は2012年現在W3Cによる全面勧告には至ってません。
しかし、最近のブラウザはCSS3で追加しそうなプロパティを先行してバンバン実装しています。

ただし注意しなければならないのは、正式に勧告されていない独自プロパティは結局勧告されず廃止される可能性もあり、これは先行実装ですよー的なアピールをするためにプレフィックス(接頭辞)を指定しなければならない場合が多いです。具体的には、Internet Explorerの場合は先頭に「-ms-」が、FirefoxなどのMozilla系では「-moz-」が、Operaでは「-o-」を、SafariやChromeなどのWebKit系の場合先頭に「-webkit-」が付きます。

まあ独自拡張なんで廃止されちゃう可能性もあるんで使わない方が無難なんですが、前述の「-moz-selection」のように結構使われてるものもありますし、ウェブ上に転がってるサイトを参考にする場合でも、このルールを知ってると何かと理解が捗ります。