1 / 70

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

情報処理 II www による情報発信とサービス提供 I. 第 8 回 2014 年 6 月 5 日 大塚 智宏. 本日の予定. CSS の基礎（３） ボックスモデル 視覚整形モデルの基礎 ボックスの配置と位置決め 視覚整形モデルに関する補足 第 ７ 回課題（再掲）. 前回までの課題について. 第 3 回課題 採点し，本日返却しました 授業支援でテキストファイルをダウンロードしてください ファイル先頭の学籍番号が間違っていないか確認してください 再提出の指示があった人は早めに再提出を 第 5 回課題 採点中なのでもう少しお待ちください 第 7 回課題

mira
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 本日の予定 • CSSの基礎（３） • ボックスモデル • 視覚整形モデルの基礎 • ボックスの配置と位置決め • 視覚整形モデルに関する補足 • 第７回課題（再掲）

  3. 前回までの課題について 第3回課題 採点し，本日返却しました 授業支援でテキストファイルをダウンロードしてください ファイル先頭の学籍番号が間違っていないか確認してください 再提出の指示があった人は早めに再提出を 第5回課題 採点中なのでもう少しお待ちください 第7回課題 6/13（金） 23:59 締切です

  4. 第３回課題のよくある問題点 バリデータの使い方 Direct Inputモードを使っている DOCTYPE宣言の間違いにより正しいモードで検証できていない 見出し要素の使い方 h1要素が複数個ある h1，h2，h3，… というように順番に使っている 機種依存文字 全角文字の 「I」 「II」 などを使っている

  5. バリデータの使い方（１） 「Validate by URI」 「Validate by File Upload」 のいずれかで使用すること 「Validate by Direct Input」 は使用しない 文字コード関連の問題を検出できないため アップロードして公開されているHTMLを検証する場合は「Validate by URI」 が最適 http://validator.w3.org/

  6. バリデータの使い方（２） 結果ページの見方 「This document was successfully checked as HTML5!」 と表示されればとりあえずOK 「HTML 4.01 Transitional」 などだったら何かがおかしい DOCTYPE宣言がない，あるいは間違っているかも Result が 「Passed, 1 warning(s)」 となっているか？ 警告が1つだけなら問題ない （HTML5のバリデータ機能がまだ評価版のため）

  7. 見出し要素の使い方 以下の2点に特に注意する h1要素には 「文書全体の見出し」 を付け，原則として1つの文書中に1個のみとする title要素に近い感覚で使う 同じレベルの見出しには同じ見出し要素を使う h1，h2，h3，… と順番に使うわけではない • 自己紹介 • 基本情報 • 趣味 • 音楽 • 旅行 • ゲーム • 最後にひと言 <h1>自己紹介</h1> <h2>基本情報</h2> <h2>趣味</h2> <h3>音楽</h3> <h3>旅行</h3> <h3>ゲーム</h3> <h2>最後にひと言</h2>

  8. 機種依存文字 機種依存文字は，Webページで使ってはいけない 以下のような文字が機種依存文字 全角文字の 「①」 「②」 … 全角文字の 「Ⅰ」 「Ⅱ」 … 全角文字の 「㍍」 「㌔」 など これらは，OSや環境によって全く表示されなかったり，文字化けしたりする そもそも，バリデータで検証するとエラーになるはず Direct Inputモードだとならないかも

  9. ボックスモデル

  10. ボックスとは（１） • 各要素について生成される長方形の領域で，以下の4つの領域で構成される • 要素の 「内容」 （content） • 枠線を表す 「ボーダー」 （border） • 内容とボーダーとの間の余白 「パディング」 （padding） • ボーダーと他の要素との間の余白 「マージン」 （margin） マージン パディング 内容 ボーダー

  11. ボックスとは（２） • 各領域は上下左右の4つに分解でき，それぞれ別々のスタイルを適用可能 • ボックスの幅 = 左右マージン + 左右ボーダーの太さ +左右パディング + 内容の幅 • ボックスの高さ = 上下マージン + 上下ボーダーの太さ + 上下パディング + 内容の高さ 上ボーダー 上マージン 左ボーダー 右ボーダー 上パディング 左パディング 右パディング 左マージン 右マージン 内容 下パディング 下マージン 下ボーダー

  12. マージンの指定（１） • 上下左右のマージンを個別指定するプロパティ • margin-top，margin-bottom，margin-left，margin-right • 長さまたは%値によって値を指定 （負の値も可） • %値は，包含ブロック（後述）の幅を基準値（100%）とする • デフォルト値は 「0」（マージンなし） • 「auto」 と指定すると，状況に応じて自動的にマージンが設定される 上マージン 左マージン 右マージン 今日は実にいい天気ですね。 明日もいい天気だといいです ね。そうですね。 下マージン

  13. マージンの指定（２） • マージンの一括指定 （marginプロパティ） • スペース区切りで4つまで値を指定でき，以下の意味になる • margin: 1em; （上下左右） • margin: 1em auto; （上下，左右） • margin: 1em 3em 2em; （上，左右，下） • margin: 1em 1em 0 4em; （上，右，下，左） • このような一括指定用のプロパティを 「ショートハンド」 と呼ぶ 上マージン 左マージン 右マージン 今日は実にいい天気ですね。 明日もいい天気だといいです ね。そうですね。 下マージン

  14. マージンの利用例 段落間の間隔や余白の調整 p { margin: 0; } p { margin: 2em; }

  15. パディングの指定（１） • 上下左右のパディングを個別指定するプロパティ • padding-top，padding-bottom，padding-left，padding-right • 長さまたは%値によって値を指定 （負の値は不可） • %値は，包含ブロック（後述）の幅を基準値（100%）とする • デフォルト値は 「0」（パディングなし） 左パディング 上パディング 右パディング 今日は実にいい天気ですね。 明日もいい天気だといいです ね。そうですね。 下パディング

  16. パディングの指定（２） • パディングの一括指定 （paddingプロパティ） • marginと同様，スペース区切りで4つまで値を指定可能 • padding: 1em; （上下左右） • padding: 1em 0; （上下，左右） • padding: 1em 3em 2em; （上，左右，下） • padding: 1em 1em 0 4em; （上，右，下，左） 左パディング 上パディング 右パディング 今日は実にいい天気ですね。 明日もいい天気だといいです ね。そうですね。 下パディング

  17. ボーダーの構成要素 「太さ」 「形状」 「色」 を指定可能 ボーダーの太さ（幅） ボーダーの形状：solid （一重線） 今日は実にいい天気ですね。 明日もいい天気だといいです ね。そうですね。 ボーダーの色： red

  18. ボーダーの太さの指定 • 上下左右のボーダーの太さ（幅）を個別に指定 • border-top-width，border-bottom-width，border-left-width，border-right-width • 指定可能な値は，長さ，および 「medium」 「thin」 「thick」 • 負の値は指定不可 • 「medium」 「thin」 「thick」 の長さはブラウザに依存 • ボーダーの太さの一括指定 （border-width） • スペース区切りで4つまで値を指定可能 • border-width: 2px; （上下左右） • border-width: medium 2px; （上下，左右） • border-width: 1px 0 2px; （上，左右，下） • border-width: 2px 0 2px 8px; （上，右，下，左）

  19. ボーダーの形状の指定 • 上下左右のボーダーの形状を個別に指定 • border-top-style，border-bottom-style，border-left-style，border-right-style • 指定可能な値は 「none」 「solid」 「double」 「dotted」 等10種類 • 省略した場合，「none」 となる • 「none」 にすると太さも自動的に0となる • ボーダーの形状の一括指定 （border-style） • スペース区切りで4つまで値を指定可能 • border-style: solid; （上下左右） • border-style: double none; （上下，左右） • border-style: solid none solid; （上，左右，下） • border-style: dotted none dotted solid; （上，右，下，左）

  20. ボーダーの色の指定 • 上下左右のボーダーの色を個別に指定 • border-top-color，border-bottom-color，border-left-color，border-right-color • 指定可能な値は，色，および 「transparent」 • 省略すると，colorプロパティの値 （≒文字の色） となる • 「transparent」 を指定すると背景色が透過される（透けて見える） • ボーダーの色の一括指定 （border-color） • スペース区切りで4つまで値を指定可能 • border-color: black; （上下左右） • border-color: green lime; （上下，左右） • border-color: red black red; （上，左右，下） • border-color: black blue black red; （上，右，下，左）

  21. ボーダー構成要素の一括指定 • 太さ，形状，色を一括指定するプロパティ • border-top，border-bottom，border-left，border-right： 上下左右いずれかのボーダー • border： 上下左右共通のボーダー • 値の順番は自由で，省略も可能 • 以下のように上書き指定を行うことで，記述量を減らして読みやすくすることができる p { border: medium dotted green; border-left: 5px solid red; border-right: 5px solid red; }

  22. ボーダー関連プロパティのまとめ border-{top,bottom,left,right}-width 上下左右のボーダーの太さを個別に指定 border-{top,bottom,left,right}-style 上下左右のボーダーの形状を個別に指定 border-{top,bottom,left,right}-color 上下左右のボーダーの色を個別に指定 border-{width,style,color} ボーダーの太さ／形状／色の一括指定 （4つまで値を指定） border-{top,bottom,left,right} 上下左右いずれかのボーダーの太さ／形状／色を一括指定 値の順番は自由，省略も可 border ボーダーの太さ／形状／色を一括指定 （上下左右共通） 値の順番は自由，省略も可

  23. 上下マージンの相殺（１） 要素間の垂直方向のマージンは，大きい方の値が採用され，小さい方の値は無視される 以下の例では，p要素の間隔は 3em ではなく 2em となる 水平方向のマージンは相殺されず，両方とも確保される p { margin-top: 2em; margin-bottom: 1em; } p要素 margin-bottom: 1em margin-top: 2em p要素

  24. 上下マージンの相殺（２） 上下マージンの相殺は親子要素間でも発生する ただし，親要素にパディングまたはボーダーが設定されていると相殺は発生しない #A { margin: 3em; } #B { margin: 2em; } 3em 2em 3em #A #B #Bの上下マージン（2em）は相殺されて0となる 2em #A { margin: 3em; border: 3px solid; } #B { margin: 2em; } 3em #A 2em 3em #B #Aにボーダーがあるので相殺は発生しない 2em

  25. 視覚整形モデルの基礎

  26. 視覚整形モデルとは CSSにおいて，各要素に対して生成されたボックスをどのように配置，表示するかを規定するモデル CSSによるWebページのさまざまなレイアウトは，視覚整形モデルに従って実現されている ヘッダ領域 サイドバー領域 コンテンツ領域 フッタ領域 よくあるWebページのレイアウト

  27. ブロックボックスとインラインボックス ボックスは主に以下の2種類に分類される ブロックボックス： ブロックレベル要素に対応 インラインボックス： インライン要素，テキストに対応 インラインボックスは，包含ブロック（後述）内で自動的に改行・折り返しされて配置される ブロックボックス ブロックボックス インラインボックス インラインボックス イン ラインボックス インラインボックス インライン

  28. 包含ブロック 各ボックスのサイズや位置決めの基準となるボックス 通常は，「親要素の内容領域」 が包含ブロックとなる 親要素がインライン要素の場合は，ブロックレベル要素に行き当たるまで祖先をたどる body要素に行き当たった場合は，その内容領域を包含ブロックとする （「初期包含ブロック」 と呼ばれる） 親要素の内容領域= 包含ブロック 子要素1 子要素2 親要素のボックス

  29. ブロックボックスの配置 ブロックボックスは，上から下へ順番に配置される 同一レベルにある （包含ブロックが同じ） ブロックボックス同士は，出現順に配置される たとえ右側にスペースがあっても，そこには配置されない h1 p 包含ブロック（body，div等） p h2 p

  30. インラインボックスの配置 インラインボックスは，左から右へ順番に配置される 同一レベルにある （包含ブロックが同じ） インラインボックス同士は，出現順に配置される 包含ブロックの右端で自動的に改行・折り返しされ，複数の「行」 を生成する テキスト em テキ 包含ブロック（h1～h6，p等） スト a テキスト

  31. displayプロパティ 指定した要素が生成するボックスの種類を変更する display: block; ⇒ ブロックボックス display: inline; ⇒ インラインボックス display: inline-block; ⇒ インラインブロックボックス ブロックボックスとして生成されるが，インラインボックスとして配置 置換要素（後述）はデフォルトでこれになる display: run-in; ⇒ ランインボックス 後続のブロックボックスにインラインボックスとして埋め込まれる display: list-item; ⇒ リスト項目として生成 li要素と同様に扱われ，リスト関連のプロパティを指定できる display: none; ⇒ ボックスを生成しない その要素は表示されなくなる

  32. displayプロパティの使用例 ID 「gnav」 を持つdiv要素の子孫のli要素をインライン化 クラス 「lnav」 に属するp要素の子孫のa要素をブロック化 画像を非表示にする div#gnav li { display: inline; list-style: none; margin: 0 1em 0; } p.lnav a { display: block; } img { display: none; }

  33. ボックスのサイズ ボックスのサイズは，通常は自動的に決定される ブロックレベル要素の場合，幅は包含ブロックの幅いっぱいに広げられ，高さはちょうど内容が収まるだけの高さとなる つまり，幅は包含ブロックの幅と同じになる インライン要素の場合，高さはフォントサイズを元に決定され，幅はちょうど内容が収まるだけの幅となる ただし，置換要素（後述）の場合はその内在寸法となる 例えば，img要素の場合は画像のサイズ 包含ブロック h1 p

  34. ボックスサイズの指定（width／height） widthおよびheightプロパティによって，ボックスの内容領域の幅・高さを明示的に指定できる ブロックレベル要素と置換要素（後述）にのみ指定可能 （置換要素以外の）インライン要素には指定できない 値はそれぞれ，長さ，%値，auto を指定可能 %値は包含ブロックの幅／高さを基準値とする auto は指定しない場合と同じ （自動的に決定） 置換要素の場合は内在寸法となる width 内容 height

  35. 補足： 置換要素 インライン要素の中でも，属性値等に応じて内容が置き換えられる要素のこと img，object，input，select，textarea の5種類 内在寸法 （内在的な幅・高さ） を持つ img要素の場合，画像のサイズが内在寸法となる width，height を指定しない （auto） 場合，内在寸法がそのまま内容領域の幅・高さとなる 置換要素を除くインライン要素を 「非置換インライン要素」と呼ぶ

  36. ボックスの最大・最小サイズの指定 以下のプロパティによって，ボックスの内容領域の最大・最小の幅や高さを指定できる max-width，max-height： 幅／高さの最大値を指定 min-width，min-height： 幅／高さの最小値を指定 ボックスのサイズを一定以上大きくしない，または一定以上小さくしないようにする 値には長さ，%値を指定可能 適用対象，および%値の基準はwidth，heightと同じ body { max-width: 50em; min-width: 30em; }

  37. ボックスの配置と位置決め

  38. サンプルHTMLとCSS 以下のサンプルを用意 （以降の例で使用） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="test.css" /> <title>CSSのテスト</title> </head> <body> <p id="p1">#p1</p> <p id="p2">#p2</p> <p id="p3">#p3</p> <p id="p4">#p4</p> </body> </html> body { border: 3px solid; } p { margin: 0.5em; padding: 0.5em; border: 3px solid; width: 40%; } #p1 { background-color: red; } #p2 { background-color: green; } #p3 { background-color: blue; } #p4 { background-color: fuchsia; } test.css

  39. 通常配置（static） • 特に何も指定しない場合の動作 • ブロックボックスは上から順に配置される • インラインボックスは左から順に配置され，右端で改行 h1 包含ブロック p h2 p

  40. 通常配置の例 • サンプルHTML+CSSをそのままブラウザで表示 • 色の組合せが悪いのは説明のためなので気にしない

  41. positionプロパティ • 指定した要素のボックスの配置方法を変更できる • position: static; 通常配置 （デフォルト） • position: relative; 相対配置 • 通常配置に従って配置した上で，その要素を移動 • position: absolute; 絶対配置 • その要素を通常配置から外し，指定した場所に配置 • position: fixed; 固定配置 • 絶対配置に加え，ウィンドウのスクロール等に対して固定される

  42. 相対配置（relative） • position: relative の場合 • 通常配置に従って配置された上で，その位置を基準にして相対的に移動される • 移動距離を top／right／bottom／left プロパティで指定 • 後続の要素は，移動した要素が 「元の位置にあるものとして」 配置される h1 p 包含ブロック p h2 p

  43. 相対配置の例（１） • 本来の位置から上に100px，右に500px移動 • top／right／bottom／left の移動の向きに注意 • それぞれ包含ブロックの上辺，右辺，下辺，左辺から見た場合の移動距離と考える • 指定しない場合は移動距離 「0」 • topとbottom，あるいはleftとrightを同時に指定した場合，topおよびleftが優先され，bottomおよびrightは無視される h1 包含ブロック -100px p#rel p#rel 500px p#rel { position: relative; top: -100px; left: 500px; } h2

  44. 相対配置の例（２） • サンプルで，2番目のp要素を相対配置 • 要素の重なり方にも注目 #p2 { position: relative; top: -30px; left: 80px; }

  45. 絶対配置（absolute） • position: absolute の場合 • 通常配置の対象から外され，包含ブロックの4辺を基準にした指定位置に配置される • 4辺からの距離を top／right／bottom／left プロパティで指定 • 後続の要素は，絶対配置した要素が 「存在しないものとして」 配置される h1 p 包含ブロック h2 p

  46. 絶対配置の例（１） • 包含ブロックの上辺から50px，左辺から400pxの位置に配置 • top／right／bottom／left は，それぞれ包含ブロックの上辺，右辺，下辺，左辺から 「該当する辺までの」 距離 • topとbottom，あるいはleftとrightを同時に指定した場合，bottomおよびrightは無視される （相対配置と同じ） 50px h1 包含ブロック 400px p#abs h2 p#abs { position: absolute; top: 50px; left: 400px; }

  47. 絶対配置の例（２） • サンプルで，2番目のp要素を相対配置 • 包含ブロックの高さが低くなっている点にも注目 #p2 { position: absolute; top: 35px; right: 0; }

  48. 固定配置（fixed） • position: fixed の場合 • 絶対配置と同様の位置決めで配置された上で，ウィンドウスクロール等の領域移動に対して固定される • 印刷媒体の場合，各ページの同じ位置に出力される • 後続の要素は，固定配置した要素が存在しないものとして配置される h1 p 包含ブロック h2 p

  49. 固定配置の例 • サンプルで，2番目のp要素を固定配置 • http://user.keio.ac.jp/~aa202427/1-08/fixed.html #p2 { position: fixed; top: 0; right: 0; } #p1, #p3, #p4 { height: 500px; }

  50. フロート（浮動化） • ボックスを通常の配置フローから外し，左または右に寄せるための指定 • float: left; ボックスを左にフロート • float: right; ボックスを右にフロート • 後続ボックスはフロートされたボックスが存在しないものとして配置されるが，テキストは重ならないように 「回り込む」 • フロートされたボックスは後続ボックスより前面に表示される p div#fl 包含ブロック div#fl { width: 150px; float: left; } p

More Related