Download
1 / 69
690 likes | 790 Views
情報処理 II www による情報発信とサービス提供 I. 第 9 回 2014 年 6 月 12 日 大塚 智宏. 本日の予定. 段組レイアウトの基礎 レイアウトの種類 2 段組レイアウト 3 段組レイアウト いろいろ なスタイル指定（１） 文字色と 背景 フォント テキスト 今回の課題. 前回までの課題 について. 第 5 回課題，第 3 回課題の再提出分 採点中なのでもう少しお待ちください … 第 7 回課題 明日 6/13 （ 金） 23:59 締切です. 訂正 ： table 要素の summary 属性.
E N D
情報処理IIwwwによる情報発信とサービス提供I 第9回 2014年6月12日 大塚 智宏
本日の予定 • 段組レイアウトの基礎 • レイアウトの種類 • 2段組レイアウト • 3段組レイアウト • いろいろなスタイル指定（１） • 文字色と背景 • フォント • テキスト • 今回の課題
前回までの課題について 第5回課題，第3回課題の再提出分 採点中なのでもう少しお待ちください… 第7回課題 明日 6/13（金） 23:59 締切です
訂正： table要素のsummary属性 HTML5の勧告案では廃止されていたことが判明 お詫びして訂正します 勧告案では，代わりに表の内容について記述する方法がいくつか紹介されています 表の前後の段落（p要素）等で説明する 見出し（caption要素）内で説明する 説明が必要ないような明快な表を作る <table> <caption>会員名簿</caption> <tr> <th abbr="番号">会員番号</th> <th abbr="氏名">会員氏名（敬称略）</th> <th abbr="所属">所属団体名</th> <th abbr="所在地">所属団体所在地（都道府県）</th> </tr> ...
段組レイアウトとは ページの内容を複数の列に分割するレイアウト手法 「マルチカラムレイアウト」 などとも呼ばれる CSSのフロートや絶対配置を使うことで実現できる 以前は表（table要素）を使って実現することが多かった ヘッダ ヘッダ サイドバー コンテンツ 左サイドバー コンテンツ 右サイドバー フッタ フッタ 2段組レイアウトの例 3段組レイアウトの例
段組レイアウトのHTML記述 div要素によって構造化するのが基本 段組化する部分全体を 「コンテナ」 で囲む 記述の順序にも気をつける CSSの記述内容を左右するため 一つの指針として，サイドバーよりもコンテンツを先に書く （「重要な情報は前へ」） <div id="header"> （ヘッダ） </div> <div id="container"> <div id="content"> （コンテンツ） </div> <div id="sidebar"> （サイドバー） </div> </div> <div id="footer"> （フッタ） </div> ヘッダ コンテナ サイドバー コンテンツ フッタ
固定幅レイアウトと可変幅レイアウト 固定幅レイアウト （ソリッドレイアウト） ページの幅を固定したレイアウト ブラウザのウィンドウ幅を変えても内容部分の幅が変わらない ウィンドウ幅が内容より狭くなった場合はスクロールが必要 幅をピクセル（px）値で指定する 可変幅レイアウト （リキッドレイアウト） ページの幅を固定しないレイアウト ブラウザのウィンドウ幅に合わせてページの幅が変化 幅をパーセント（%）値で指定する ブラウザのウィンドウ幅が100%となる
それぞれの長所と短所 固定幅レイアウト ○ デザインの自由度が高い （デザイン性の高いページ向き） × せっかくの広いウィンドウを活用できない × 狭いウィンドウだとスクロールが必要で見にくくなる × 文字サイズを変更するとレイアウトが崩れることがある 可変幅レイアウト ○ スクロールが必要ない （文章が多いページ向き） × 画像を多用しにくく，デザイン重視のページには向かない × あまり広いウィンドウだと逆に見にくくなる max-widthプロパティで制限できる × あまり狭いウィンドウだとレイアウトが崩れることがある min-widthプロパティで制限できる
エラスティックレイアウト 文字サイズの変更に合わせてページ幅を変更 文字サイズが1.2倍になったら幅も1.2倍に 固定幅と可変幅レイアウトの良いとこ取り ただし，CSS作成の難易度はやや高い 幅を相対単位（em，ex）で指定する 幅だけでなく，いろいろな長さをem／exで指定する 幅をemで指定した場合，日本語の文章では 「1行あたりの文字数」 を指定するのと同じことになる 日本語の場合，35～40文字程度が読みやすいと言われている ただし，最近のブラウザでは 「ページズーム機能」 がサポートされているものが多く，文字サイズごと画面を拡大・縮小できる （スマートフォン等にも同様の機能がある） エラスティックレイアウトの有用性は低下している
レスポンシブWebデザイン スマートフォンやタブレットに対応したWebデザイン手法として2011年頃から使われるようになった スマートフォン用・タブレット用サイトを別に用意するのではなく，単一のHTML/CSSのみでさまざまなデバイスに対応 http://mediaqueri.es/ にサイトの例がある 主に以下3種類の技法を駆使してレイアウトする メディアクエリ （media queries） CSSの機能により，画面サイズに応じてスタイルを切り替える フルードグリッド （fluid grids） 画面を格子状に分割してレイアウトする 「グリッドレイアウト」 を発展させたもので，画面サイズに応じて格子の大きさや数を変化させる フルードイメージ （fluid images） 画面サイズに応じて画像の大きさを変化させる
２段組レイアウトの基本 2カラムレイアウトとも呼ばれ，大きく分けて2種類の方法がある ダブルフロート型 コンテンツとサイドバーをそれぞれフロートさせる ポジショニング型 コンテンツまたはサイドバーを絶対配置する 絶対配置 + フロート 絶対配置 + 相対配置 絶対配置 + マージン 以下，可変幅レイアウトを例にそれぞれを解説 いずれの方法でも，コンテンツとサイドバー，それらを囲むコンテナにそれぞれ幅を指定するのが基本 可変幅レイアウトなので，幅は%値で指定 HTMLの記述順は，「コンテンツ」 「サイドバー」 「フッタ」
サンプルHTMLとCSS 以下のサンプルを用意 （以降の例で使用） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="test.css" /> <title>CSSのテスト</title> </head> <body> <div id="header"> <p>#header</p> </div> <div id="container"> <div id="content"> <p>#content</p> </div> <div id="sidebar"> <p>#sidebar</p> </div> </div> <div id="footer"> <p>#footer</p> </div> </body> </html>
サンプルHTMLとCSS （続き） div#header { background-color: red; } div#content { background-color: green; height: 30em; } div#sidebar { background-color: blue; height: 30em; } div#footer { background-color: fuchsia; } p { margin: 0; } test.css
ダブルフロート型 （左サイドバー） コンテンツとサイドバーそれぞれにfloatを指定 後続のフッタでフロートを解除 div#container { width: 100%; } div#content { width: 70%; float: right; } div#sidebar { width: 30%; float: left; } div#footer { clear: both; } #container #sidebar #content ← float float → 30% 70% #footer
ダブルフロート型 （右サイドバー） フロートの方向をそれぞれ逆にするだけ div#container { width: 100%; } div#content { width: 70%; float: left; } div#sidebar { width: 30%; float: right; } div#footer { clear: both; } #container #content #sidebar ← float float → 70% 30% #footer
絶対配置＋フロート （左サイドバー） サイドバーを絶対配置し，コンテンツを右フロート コンテナを絶対配置の基準とするためposition: relative を指定 サイドバーを (0,0) に絶対配置 div#container { width: 100%; position: relative; } div#content { width: 70%; float: right; } div#sidebar { width: 30%; position: absolute; top: 0; left: 0; } div#footer { clear: both; } #container #sidebar #content (0,0) float → #footer
絶対配置＋フロート （右サイドバー） サイドバーを絶対配置し，コンテンツを左フロート サイドバーの横位置は 「右から0」と指定 div#container { width: 100%; position: relative; } div#content { width: 70%; float: left; } div#sidebar { width: 30%; position: absolute; top: 0; right: 0; } div#footer { clear: both; } #container #content #sidebar ← float (-0,0) #footer
絶対配置＋相対配置 （左サイドバー） コンテンツをフロートする代わりに相対配置する コンテナ幅の30%分だけ右へ移動 サイドバーが絶対配置なので，コンテンツの初期位置は (0,0) となる div#container { width: 100%; position: relative; } div#content { width: 70%; position: relative; top: 0; left: 30%; } div#sidebar { width: 30%; position: absolute; top: 0; left: 0; } #container #sidebar #content 30% (0,0) #footer
絶対配置＋相対配置 （右サイドバー） 同様にコンテンツを相対配置 この例では，実際にはコンテンツは初期位置のまま （移動量0） div#container { width: 100%; position: relative; } div#content { width: 70%; position: relative; top: 0; left: 0; } div#sidebar { width: 30%; position: absolute; top: 0; right: 0; } #container #content #sidebar 0% → (-0,0) #footer
絶対配置＋マージン （左サイドバー） コンテンツに左マージンを設定 コンテナ幅の30%を左マージンとする 幅は自動で決定されるので，指定する必要はない #container div#container { width: 100%; position: relative; } div#content { margin-left: 30%; } div#sidebar { width: 30%; position: absolute; top: 0; left: 0; } #sidebar #content 30% (0,0) #footer
絶対配置＋マージン （右サイドバー） コンテンツに右マージンを設定 コンテナ幅の30%を右マージンとする #container div#container { width: 100%; position: relative; } div#content { margin-right: 30%; } div#sidebar { width: 30%; position: absolute; top: 0; right: 0; } #content #sidebar 30% (-0,0) #footer
高さの問題 ボックスの高さは内容によって決まるため，実際には段組化する要素間で高さに差が生じる 高さが小さい方の下に余白ができてしまう 絶対配置した要素の高さの方が大きい場合は，コンテナからはみ出してしまう 解決方法はいくつかあるが，ここでは詳しい解説は省略 #sidebar #content #sidebar #content #footer #footer
カラム落ち問題 IEでは，ダブルフロート型の場合に後からフロートした要素が下に落ちてしまう問題（「カラム落ち」）が発生 幅の合計が100%とならないように調整することで回避可能 div#container { width: 100%; } div#content { width: 69%; float: right; } div#sidebar { width: 30%; float: left; } div#footer { clear: both; } #sidebar #content ← float float → 30% 69% #footer
３段組レイアウトの基本 3カラムレイアウトとも呼ばれ，2段組レイアウトの応用で実現可能 ダブルコンテナ型 コンテナを2重にし，それぞれで2段組を作る ポジショニング型 いずれか1つまたは2つの要素を絶対配置する 絶対配置 + フロート 絶対配置 + 相対配置 絶対配置 + マージン 以下，可変幅レイアウトを例にそれぞれを解説 HTMLの記述順は，「コンテンツ」 「左サイドバー」 「右サイドバー」 「フッタ」 とする
サンプルHTMLとCSS 以下のサンプルを用意 （以降の例で使用） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="test2.css" /> <title>CSSのテスト2</title> </head> <body> <div id="header"> <p>#header</p> </div> <div id="container"> <div id="wrapper"> <div id="content"> <p>#content</p> </div> <div id="lbar"> <p>#lbar</p> </div> </div> <div id="rbar"> <p>#rbar</p> </div> </div> <div id="footer"> <p>#footer</p> </div> </body> </html>
サンプルHTMLとCSS （続き） div#header { background-color: red; } div#content { background-color: green; height: 30em; } div#lbar { background-color: blue; height: 30em; } div#rbar { background-color: aqua height: 30em; } div#footer { background-color: fuchsia; } p { margin: 0; } test2.css
ダブルコンテナ型の例 コンテナを2重化し，それぞれで2段組を作成 2段組の実現方法は任意 （以下はダブルフロート型の例） %値の基準となる幅に注意 この場合，左サイドバーとコンテンツの幅は#wrapperが基準となる #container #wrapper #rbar div#container { width: 100%; } div#wrapper { width: 80%; float: left; } div#rbar { width: 20%; float: right; } div#content { width: 70%; float: right; } div#lbar { width: 30%; float: left; } div#footer { clear: both; } 20% #lbar #content 30% 70% #footer
絶対配置＋フロート （３段組）の例 コンテンツを絶対配置し，サイドバーを左右にフロート コンテナを絶対配置の基準とする （position: relative） コンテンツは左から20%の位置に絶対配置 #container #lbar #content #rbar div#container { width: 100%; position: relative; } div#content { width: 60%; position: absolute; top: 0; left: 20%; } div#lbar { width: 20%; float: left; } div#rbar { width: 20%; float: right; } div#footer { clear: both; } 20% 60% 20% #footer
絶対配置＋相対配置 （３段組）の例 サイドバーをそれぞれ絶対配置し，コンテンツを相対配置 コンテンツはコンテナ幅の20%分だけ右へ移動 div#container { width: 100%; position: relative; } div#content { width: 60%; position: relative; top: 0; left: 20%; } div#lbar { width: 20%; position: absolute; top: 0; left: 0; } div#rbar { width: 20%; position: absolute; top: 0; right: 0; } #container #lbar #content #rbar 20% #footer
絶対配置＋マージン （３段組）の例 サイドバーをそれぞれ絶対配置し，コンテンツに左右マージンを設定 コンテナ幅の20%を左右それぞれのマージンとする （幅指定は不要） div#container { width: 100%; position: relative; } div#content { margin-left: 20%; margin-right: 20%; } div#lbar { width: 20%; position: absolute; top: 0; left: 0; } div#rbar { width: 20%; position: absolute; top: 0; right: 0; } #container #lbar #content #rbar 20% 20% #footer
CSS3では CSS3では，段組レイアウトのモジュールが定義され，専用のプロパティが用意されている これにより，段組レイアウトを実現しやすくなった 現在は 「勧告候補」 の段階 Firefox，Safari，Chrome，Opera，IE10 等ではすでに実装されている ただし，現時点では 「ベンダプレフィックス」 を付ける必要あり 興味のある人は，以下のサイトや書籍等を見てみるとよい http://www.w3.org/TR/css3-multicol/ http://www.css3.info/preview/multi-column-layout/
ボックスモデルと背景領域 ボックスモデルにおける 「背景」 は，パディングおよびボーダーを含む領域が対象となる ボーダーは背景の上に重ねて描画される 点線や二重線の場合などはすき間から背景が見える マージンの部分には背景は適用されず，親要素の背景等が透過される （透けて見える） マージン パディング 内容 背景領域 ボーダー
文字色と背景に関するプロパティ color 文字の色 background-color 背景色 background-image 背景画像 background-repeat 背景画像の繰り返し background-attachment 背景画像の固定 background-position 背景画像の初期位置 background 背景関連プロパティの一括指定
colorプロパティ（再掲） 文字の色（前景色）を指定 指定できる値は，色を表すRGB値およびキーワード 値は子要素に継承される body要素に設定しておけば，全体の文字色を変えられる body { color: #007; } h1 { color: red; }
background-colorプロパティ（再掲） 背景色を指定 指定できる値は，色，または transparent transparent にすると親要素の背景が透過される ただし，デフォルト値が transparent なので，わざわざ指定する必要はない colorと違い，値は子要素には継承されない body { background-color: black; color: white; } h1 { background-color: #070; }
前景色と背景色の組み合わせ（再掲） 文字色と背景色のコントラストに注意 コントラストが低いと，文字が読みにくくなる グレースケールの環境や，色覚障害の人に配慮する 色の組み合わせの評価基準 明度差 （R，G，B はそれぞれ 0～255） 明度 = (R×299 + G×587 + B×114) ÷ 1000 差が125以上あればOK 色差 （R1を色1のR値，R2を色2のR値とする） 色差 = |R1 - R2| + |G1 - G2| + |B1 - B2| 500以上あればOK 輝度比というのもある （算出方法はやや面倒なので略） 以下のページで組み合わせのチェックが可能 http://www.kanzaki.com/docs/html/color-check 良くない例
background-imageプロパティ（再掲） 背景画像を指定 指定できる値は，url関数または none デフォルト値は none で，背景画像は設定されない url関数は，( ) 内に画像のパス名を指定する パス名は " " で囲んでも囲まなくてもよい 画像内の透明な領域では，背景色が透過される 画像が利用できない環境のために，background-colorで画像の色に近い背景色を一緒に指定しておくこと body { background-color:#effdec; background-image: url("images/bcg.gif"); }
background-repeatプロパティ 背景画像の繰り返しを指定 指定できる値 repeat： 画像を水平方向，垂直方向に繰り返す （デフォルト） repeat-x： 水平方向にのみ繰り返す repeat-y： 垂直方向にのみ繰り返す no-repeat： 画像を1つだけ表示 （繰り返さない） 指定する画像 repeat repeat-x repeat-y no-repeat
background-attachmentプロパティ 背景画像の固定 指定できる値 scroll： 画面のスクロールと連動して画像も移動する （デフォルト） fixed： 画像を画面の表示領域に対して固定する fixed に設定すると，画面をスクロールしても背景画像が固定されたままとなる ロゴを常に背景に表示しておきたい場合などに有効 body { background-color: #effdec; background-image: url("./images/bcg.gif"); background-attachment: fixed; }
background-positionプロパティ 背景画像の初期位置を指定 水平位置，垂直位置の順に組で指定する （空白区切り） 値が1つの場合は水平位置に適用され，垂直位置は 50% となる 値は以下のいずれか %値： 画像の左端／上端から%値の位置を，パディング領域の左端／上端から%値の位置に揃える （負の値も可） 長さ： 画像の左端／上端を，パディング領域の左端／上端から指定した長さの位置に揃える （負の値も可） left，center，right （水平位置）： 0%，50%，100% と同じ top，center，bottom （垂直位置）： 0%，50%，100% と同じ デフォルト値は 「0% 0%」 （左上隅） 100% 0% 50% 50% 0% 100%
backgroundプロパティ 背景関連プロパティの一括指定 以下の5つのプロパティの値を一括指定できる background-color，background-image，background-repeat，background-attachment，background-position 値は順不同（空白区切り）で，省略も可能 省略したプロパティはデフォルト値を指定したことになる body { background: #effdec url(logo.gif) no-repeat fixed 50% 50%; }
フォントに関するプロパティ font-family フォントの種類 font-size フォントのサイズ font-weight フォントの太さ font-style フォントのスタイル font-variant フォントの変形 font フォント関連プロパティの一括指定
font-familyプロパティ（再掲） フォントの種類を指定 指定できる値は，フォントファミリー名 （"ＭＳ Ｐゴシック" 等） または総称ファミリー名 （sans-serif 等，次頁で解説） フォントファミリー名は " " で囲む 総称ファミリー名はキーワードなので囲まない 半角カンマ（,）区切りで複数の値を指定可能 指定順がそのまま優先順位となる ユーザの環境によって利用可能なフォントは違うため，必ず最後に総称ファミリー名を指定しておく body { font-family: "ＭＳ Ｐゴシック", "Osaka", sans-serif; }
フォントの総称ファミリー名（再掲） システムで利用可能なフォントから適切なものを選択する仕組みを提供 serif （セリフ体，明朝体） "Times New Roman"， "Garamond"， "ＭＳ Ｐ明朝"， 等 sans-serif （サンセリフ体，ゴシック体） "Arial"， "Verdana"， "ＭＳ Ｐゴシック"， 等 monospace （等幅フォント） "Courier New"， "ＭＳ 明朝"， "ＭＳ ゴシック"， 等 cursive （筆記体，草書体） fantasy （装飾フォント）
