情報処理 II www による情報発信とサービス提供 I

1. 情報処理IIwwwによる情報発信とサービス提供I 第7回 2014年5月22日 大塚 智宏

2. 本日の予定 • CSSの基礎（２） • CSSにおける長さの指定 • 基本的なプロパティ（２） • クラスとID • いろいろなセレクタ • HTMLの基礎（５） • グループ化要素 • 今回の課題

3. 前回までの課題について • 第3回課題 • 採点中なのでもう少しお待ちください • 第5回課題 • 明日 5/23（金） 23:59 締切です

4. CSSにおける長さの指定

5. 長さ指定の概要 長さの指定方法の種類 絶対単位による指定 pt，pc，in，cm，mm 相対単位による指定 px，em，ex パーセンテージ（%）値による指定 指定する際の書式 「（数値）（単位）」 のようにつなげて書く 例： 「720px」 「-150%」 数値と単位・符号の間に空白文字を入れてはいけない 数値が0の場合のみ，単位を省略してもよい 1未満の小数の場合，0を省略してもよい 例： 「.5em」（= 「0.5em」）

6. 絶対単位による指定 あらゆる環境において変化しない絶対的な長さ 印刷用のCSS等に使われる ディスプレイ用のCSSでは原則として使わない 絶対単位の種類 pt （ポイント）： 1/72インチ （≒ 0.35mm） pc （パイカ）： 12pt （= 1/6インチ ≒ 4.23mm） in （インチ）： 2.54cm cm （センチメートル） mm （ミリメートル） p { font-size: 12pt; }

7. 相対単位による指定 環境によって変化する相対的な長さ ディスプレイ用のCSSの場合，こちらを使う 相対単位の種類 em （エム）： 親要素のフォントサイズの値を1とする 大文字 「M」 の幅を基準としている ex （エックス）： 親要素の小文字 「x」 の高さを1とする px （ピクセル）： 画素の大きさを1とする 解像度によって大きさが変わるため相対単位に分類されるが，実際には絶対単位として扱われる /* フォントサイズを1.2倍にする */ p { font-size: 1.2em; }

8. パーセンテージ値による指定 プロパティによって基準値（100%）が異なる 親要素や包含ブロック（後述）の値を参照する場合が多い 以下の例では，1.2em と指定するのと同じになる p { font-size: 120%; }

9. 基本的なプロパティ（２）

10. 文字色と背景に関するプロパティ color 文字の色 background-color 背景色 background-image 背景画像 background-repeat 背景画像の繰り返し background-attachment 背景画像の固定 background-position 背景画像の初期位置 background 背景関連プロパティの一括指定

11. background-imageプロパティ 背景画像を指定 指定できる値は，url関数または none デフォルト値は none で，背景画像は設定されない url関数は，( ) 内に画像のパス名を指定する パス名は " " で囲んでも囲まなくてもよい 画像内の透明な領域では，背景色が透過される 画像が利用できない環境のために，background-colorで画像の色に近い背景色を一緒に指定しておくこと body { background-color:#effdec; background-image: url("images/bcg.gif"); }

12. フォントに関するプロパティ font-family フォントの種類 font-size フォントのサイズ font-weight フォントの太さ font-style フォントのスタイル font-variant フォントの変形 font フォント関連プロパティの一括指定

13. font-familyプロパティ フォントの種類を指定 指定できる値は，フォントファミリー名 （"ＭＳ Ｐゴシック" 等） または総称ファミリー名 （sans-serif 等，次頁で解説） フォントファミリー名は " " で囲む 総称ファミリー名はキーワードなので囲まない 半角カンマ（,）区切りで複数の値を指定可能 指定順がそのまま優先順位となる ユーザの環境によって利用可能なフォントは違うため，必ず最後に総称ファミリー名を指定しておく body { font-family: "ＭＳ Ｐゴシック", "Osaka", sans-serif; }

14. フォントの総称ファミリー名 システムで利用可能なフォントから適切なものを選択する仕組みを提供 serif （セリフ体，明朝体） "Times New Roman"， "Garamond"， "ＭＳ Ｐ明朝"， 等 sans-serif （サンセリフ体，ゴシック体） "Arial"， "Verdana"， "ＭＳ Ｐゴシック"， 等 monospace （等幅フォント） "Courier New"， "ＭＳ 明朝"， "ＭＳ ゴシック"， 等 cursive （筆記体，草書体） fantasy （装飾フォント）

15. font-sizeプロパティ フォントの大きさ（サイズ）を指定 指定できる値 長さ，%値 em／exおよび%値の場合，親要素のフォントサイズが基準 つまり，100% = 1em = 親要素のフォントサイズ xx-small，x-small，small，medium（デフォルト値），large，x-large，xx-large，larger（1段階大きく），smaller（1段階小さく） 各キーワードのサイズはブラウザに依存 em／exか%値により指定するのが基本 絶対単位によるサイズ指定 （「16pt」 等） はなるべく避ける h1 { font-size: 3em; }

16. font-weightプロパティ フォントの太さを指定 指定できる値 normal： 通常の太さ （400相当，デフォルト値） bold： 太字 （700相当） 100～900（100刻みの値），bolder，lighter 大抵のフォントは通常の太さと太字の2種類しか持たないため，これらの指定は無意味なことが多い ul { font-weight: bold; }

17. font-styleプロパティ フォントのスタイルを指定 指定できる値 normal： 通常体 （デフォルト値） italic： イタリック体 oblique： 斜体 多くのフォントでイタリック体と斜体は同じ表示となる 日本語は斜体にすると読みにくいことがあるので注意 h1 { font-style: italic; }

18. テキストに関するプロパティ text-align テキストの行揃え text-indent テキストのインデント幅 text-decoration テキストの装飾 text-transform 大文字小文字の変換 letter-spacing，word-spacing 文字／単語の間隔 line-height インラインボックスの高さ vertical-align インラインボックスの垂直位置

19. text-alignプロパティ テキストの行揃えを指定 指定できる値 left： 左揃え （多くの環境でデフォルト） right： 右揃え center： 中央揃え（センタリング） justify： 両端揃え（均等割り付け） ブラウザによっては日本語等のjustifyに対応していない CSS3では text-justify というプロパティが追加された 適用対象はブロックレベル要素のみ h1 { text-align: center; }

20. text-indentプロパティ テキストの最初の行のインデント幅を指定 指定できる値は，長さおよび%値 %値は包含ブロック（後述）の幅を基準とする 負の値も指定可能 デフォルト値は0（インデントなし） 適用対象はブロックレベル要素のみ 複数行のテキスト全体をインデントしたい場合は，パディング（後述）やマージン（後述）を設定する p { text-indent: 1em; }

21. text-decorationプロパティ テキストの装飾を指定 指定できる値 underline： 下線を引く overline： 上線を引く line-through： 打ち消し線を引く none： 装飾なし （デフォルト値） スペース区切りで複数指定することも可能 CSS3では，線種の指定などができるようになった 線の色は，指定した要素のcolorプロパティの値と同じ ul { text-decoration: underline; }

22. リストに関するプロパティ list-style-type リストマーカーの種類 list-style-image リストマーカーの画像 list-style-position リストマーカーの位置 list-style リストマーカー関連プロパティの一括指定

23. list-style-typeプロパティ リストマーカーの種類を指定 指定できる値 none： マーカーを表示しない disc： ● （黒丸，デフォルト値） circle： ○ （白抜きの丸） square： ■ （黒い四角） decimal： 1，2，3，… lower-roman： i，ii，iii，… upper-roman： I，II，III，… lower-alpha： a，b，c，… upper-alpha： A，B，C，… 他の値もあるが，サポートしていないブラウザが多い li要素にしか指定できない 厳密には，display: list-item 指定されている要素になら指定可 li { list-style-type: square; }

24. list-style-imageプロパティ リストマーカーの画像を指定 指定できる値は，url関数または none デフォルト値は none で，画像は設定されない url関数の書式は background-image と同じ 画像が利用できない環境のために，list-style-type も指定しておくこと ul li { list-style-type: square; list-style-image: url("images/marker.gif"); }

25. CSSファイルの例 @charset "UTF-8"; body { background-color: #fdfcf4; background-image: url(img/A6.png); color: black; font-family: sans-serif; font-size: 120%; } h1 { background-color: #effdec; background-image: url(img/D4.png); color: #071d5f; font-weight: normal; font-size: 2.5em; text-align: center; } /* 次スライドに続く */

26. CSSファイルの例（続き） p { text-indent: 1em; } ul { color: #999; text-decoration: underline; } li { color: black; list-style-type: circle; list-style-image: url(img/cube01-006.gif); } a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: olive; }

27. サンプルHTMLファイル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>この講義について</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>講義資料の情報</h1> <p> 講義資料は「<a href="http://user.keio.ac.jp/~aa202427/josho/">講義資料のページ</a>」にあります。以下はこの講義の参考書のリストです。 </p> <ul> <li>「よくわかるHTML5+CSS3の教科書」</li> <li>「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」</li> <li>「CJKV日中韓越情報処理」</li> </ul> </body> </html>

28. クラスとID

29. セレクタ （復習） • スタイルを適用する対象を指定する書式 • HTMLの要素名を用いるのが基本 （「タイプセレクタ」） • body，h1～h6，p，a，em，img など body要素に適用 body { color: white; background-color: black; } h1{ text-align: center; } h1要素に適用

30. セレクタの拡張 • 特定の要素のみにスタイルを適用したい • 例えば以下の場合，単純にセレクタを 「p」 と指定すると，全てのp要素にスタイルが適用されてしまう • そこで，特定の要素のみを指定できるセレクタを導入する <p>その他の段落1。</p> <p>この段落のみにスタイルを適用したい。</p> <p>その他の段落2。</p> <p>その他の段落3。</p> p { background-color: silver; }

31. IDセレクタ • 「ある1つの」 要素のみを指定 • HTMLで，スタイルを適用したい要素に 「id属性」 を指定 • ほとんどすべての要素に指定可能 • id属性の値は 「ID名」 と呼ばれ，任意の名前を指定可能 • ただし，1つの文書内で同じID名を2箇所以上指定してはいけない • セレクタを 「要素名#ID名」 とする <p>その他の段落1。</p> <p id="id1">この段落のみにスタイルを適用したい。</p> <p>その他の段落2。</p> <p>その他の段落3。</p> p#id1 { background-color: silver; }

32. クラスセレクタ • 要素の 「グループ」 を指定 • HTMLで，スタイルを適用したい要素に 「class属性」 を指定 • ほとんどすべての要素に指定可能 • class属性の値は 「クラス名」 と呼ばれ，任意の名前を指定可能 • ID名と違い，1つの文書内で同じクラス名を2箇所以上指定可 • セレクタを 「要素名.クラス名」 とする <p>その他の段落1。</p> <p class="cls1">スタイルを適用したい段落1。</p> <p>その他の段落2。</p> <p class="cls1">スタイルを適用したい段落2。</p> p.cls1 { background-color: silver; }

33. ID名・クラス名に関するルール • HTML内で同じID名を複数回使ってはいけない • 違う種類の要素であっても同じID名は不可 • クラス名は，1つの要素に複数個指定してもよい • 以下のp要素は 「note」 「emph」 の2つのクラスに属する • ID名，クラス名の命名規則 • 最初の文字はアルファベット（A-Z，a-z） • 2文字目以降は以下の文字で構成 • アルファベット，数字（0-9），ハイフン（-），アンダースコア（_） • 他にもいくつか使える文字があるが，使わない方がよい • 大文字・小文字は区別される <p class="note emph">段落。</p>

34. IDとクラスの用法 • IDとクラスの使い分け • クラスによるスタイル指定は 「1つ以上」 の特定要素に適用できるので，IDをクラスで置き換えることも可能 • ただし，文書内で1度のみしか出現しないものにはIDを使う方が望ましい • ヘッダやフッタ，タイトルロゴ，グローバルナビゲーション，等 • ID名，クラス名の付け方のコツ • その部分の意味や目的に沿った名前を付ける • 適用するスタイル・表現を表すような名前は好ましくない • 例： 「注意書き」 として赤文字で表現したい場合 <p class="red">好ましくない例。</p> <p class="attention">良い例。</p>

35. 補足： 文書内の特定位置へのリンク • IDは，文書内の特定位置を示すためにも使用される • 「フラグメント識別子」 と呼ばれ，リンク先として指定可能 • 他の文書からリンクする場合，「URI#ID名」 で指定 <h2 id="preface">はじめに</h2> ... ... <p><a href="#preface">「はじめに」へ戻る</a></p> <p> <a href="index.html#preface">「はじめに」へ</a> </p>

36. いろいろなセレクタ

37. ユニバーサルセレクタ • 「全ての」 要素を指定 • IDセレクタ，クラスセレクタ等と併用する場合，「*」 を省略することができる • 「*#nav」 は 「#nav」 でも同じ （ID 「nav」 を持つ要素） • 「*.note」 は 「.note」 でも同じ （クラス 「note」 に属する全要素） * { color: white; background-color: black; } #nav { font-size: 1.2em; } .note{ color: red; }

38. 子孫セレクタ • ある要素に 「含まれる」 要素を指定 • 「先祖要素名 対象要素名」 のようにスペースで区切る • 直接の子要素だけでなく，孫要素以下も対象となる • 例： p要素の子孫となっているem要素にスタイルを適用 • p要素自体には適用されないことに注意！ • IDセレクタ，クラスセレクタとの併用も可能 • 2つ以上つなげることもできる • 例： body要素に含まれるp要素で，直接の子要素ではないもの p em { text-decoration: underline; } #nav li { display: inline; } body * p { color: red; }

39. セレクタのグループ化 • 複数のセレクタをグループ化し，スタイルを一括指定 • 「セレクタ1, セレクタ2」 のように 「,」（カンマ） で区切る • 例： th要素とtd要素の両方にスタイルを適用 • 子孫セレクタ等もグループ化可能 th, td { font-size: .8em; } = th { font-size: .8em; } td { font-size: .8em; } .sec ul, .sec ol, .sec dl { margin: 0; }

40. 擬似クラス • スタイル適用対象の 「状況」 によってクラス分け • 「状況」 の例 • リンクを辿ったことがある • ポインタで指し示されている • 「要素名:擬似クラス名」 で指定 • 擬似クラスの種類 （CSS 2.1） • :first-child擬似クラス • リンク擬似クラス （:link，:visited） • ダイナミック擬似クラス （:hover，:active，:focus） • 言語擬似クラス （:lang） • CSS3では他にも多くの擬似クラスが追加された

41. :first-child擬似クラス • 親要素の 「最初の子要素」 である場合に適用される • IE6等ではサポートされていない • CSS3では :last-child，:nth-child 等が追加された <ul> <li>最初の子要素</li> <li>2番目の子要素</li> <li>3番目の子要素</li> </ul> li:first-child { color: blue; } このli要素にのみ適用される

42. リンク擬似クラス • リンクを辿ったことがあるかどうかによってクラス分け • :link ⇒ 未訪問リンクに適用 • :visited ⇒ 訪問済みリンクに適用 • a要素にのみ指定可能 • ブラウザのデフォルト設定で以下の例のようになっていることが多い <ul> <li><a href="doc1.html">未訪問リンク</a></li> <li><a href="doc2.html">訪問済みリンク</a></li> </ul> a:link { color: blue; } a:visited { color: purple; } a:link, a:visited { text-decoration: underline; }

43. ダイナミック擬似クラス • マウス等の状態によってクラス分け • :hover ⇒ 要素にカーソルが乗っている状態 • :active ⇒ 要素がアクティブ（選択中）な状態 • マウスでクリックしてボタンを離すまでの間，など • :focus ⇒ 要素がフォーカスされている状態 • リンク擬似クラスと違い，a要素以外にも指定可能 <ul> <li><a href="doc1.html">リンク</a></li> </ul> a:hover { color: red; } a:active { color: fuchsia; } a:focus { border: 1px dotted black; } ・ リンク ・ リンク ・ リンク :hover :active :focus

44. a要素の擬似クラス指定上の注意 • 指定する順序に気を付ける必要がある • :link，:visited，:hover，:active の順に指定する • CSSでは，記述順が後ろのものの方が優先されるため • カーソルで指し示されているときは :hover が優先され，さらにアクティブになっているときは :active が優先される a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: fuchsia; }

45. 擬似要素 • 要素の内容の一部等，HTMLでは範囲を指定することが困難なもの • 擬似クラスと同様，「要素名:擬似要素名」 で指定 • 擬似要素の種類 （CSS 2.1） • :first-line擬似要素 • :first-letter擬似要素 • :before擬似要素，:after擬似要素 • CSS3では : が ::（ダブルコロン） となったが，IE8以下で対応していないので現状では使いにくい

46. :first-line擬似要素 • ある要素の1行目のみを対象とする • 1行目の内容は，状況によって変わる • ウィンドウの横幅，要素のサイズや配置等 • 使用できるプロパティが限られている • 文字色と背景関連，フォント関連，テキスト関連等 p:first-line { color: red; font-style: italic; } <p> こんにちは。はい，こんにちは。今日はいい天気ですね。そうですね。でも明日は雨らしいですよ。えっ，そうなんですか。 </p>

47. :first-letter擬似要素 • ある要素の1文字目のみを対象とする • フロート（後述）と合わせて指定することにより，「ドロップキャップ」 と呼ばれるレイアウト手法を実現できる • :first-line 同様，使用できるプロパティが限られている <p> こんにちは。はい，こんにちは。今日はいい天気ですね。そうですね。でも明日は雨らしいですよ。えっ，そうなんですか。 </p> p:first-letter { color: red; font-size: 2em; }

48. :before，:after擬似要素 • ある要素の前後にテキスト等を生成する • 生成内容のテキストはcontentプロパティで指定し，" "（または ' '） で囲む • 日本語等を使う場合，@charset規則で文字コードを指定する • 画像を挿入したり，章や節に自動で番号を振ったりもできる p.note:before { content: "Note: "; } <p class="note"> 生成内容に日本語を使う場合，必ず@charset規則で文字コードを指定すること。 </p>

49. 見出しへの番号付け :before擬似要素を使って見出し要素にセクション番号を付加 h2要素に 1，2，…，h3要素に 1.1，1.2，… のようになる 今回の課題のHTMLに適用する際はセレクタを少し工夫する必要あり h2 { counter-increment: section; counter-reset: subsection; } h3 { counter-increment: subsection; } h2:before { content: counter(section)" "; } h3:before { content: counter(section)"."counter(subsection)" "; } <h1>h1要素<h1> <h2>h2要素</h2> <h3>h3要素</h3> <h3>h3要素</h3> <h3>h3要素</h3> <h2>h2要素</h2> <h3>h3要素</h3> <h3>h3要素</h3> <h3>h3要素</h3>

50. その他のセレクタ • CSS2で導入されたもの • 属性セレクタ： 特定の属性や属性値を持つ要素に適用 • 「要素名[属性名]」，「要素名[属性名="値"]」，など数種類 • 子セレクタ： ある要素の直接の子要素のみに適用 • 「親要素名 > 対象要素名」 • 隣接セレクタ： ある要素の直接の弟要素のみに適用 • 「兄要素名 + 対象要素名」 • 同一の要素を親に持つ隣合う要素同士で，後に出現する方 • ただし，これらはIE6等ではサポートされていない • CSS3で導入されたもの • last-child，nth-child，nth-of-type，not 等，数多くのセレクタ，擬似クラスが追加された