第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用
文 書 構 造 とスタイル
自 己 紹 介 のHTML 文 書 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 放 送 太 郎 の 自 己 紹 介 </title> </head> <body> <h1> 放 送 太 郎 の 自 己 紹 介 </h1> <h2> 略 歴 </h2> <p> 神 奈 川 県 横 浜 市 出 身 1983 年 生 まれの29 歳 です 大 学 では 英 文 学 を 学 びました 現 在 は 千 葉 県 の<a href="http://www.ouj.ac.jp/"> 放 送 大 学 </a> 本 部 で 勤 務 しています </p> <h2> 趣 味 </h2> <ul> <li> 読 書 </li> <li>オートバイ</li> <li>プラモデル 製 作 </li> </ul> <address> 連 絡 先 : <a href="mailto:taro@example.com">taro@example.com</a></address> </body> </html>
Webブラウザでの 表 示 背 景 色 は 白 文 字 色 は 黒
Webブラウザでの 表 示 <h1> 放 送 太 郎 の 自 己 紹 介 </h1>
Webブラウザでの 表 示 <h2> 略 歴 </h2> <h2> 趣 味 </h2>
Webブラウザでの 表 示 <p> 神 奈 川 県 横 浜 市 出 身 1983 年 生 まれの </p>
Webブラウザでの 表 示 <ul> <li> 読 書 </li> <li>オートバイ</li> <li>プラモデル 製 作 </li> </ul>
Webブラウザでの 表 示 <address> 連 絡 先 : </address>
Webブラウザでの 表 示 <a href="http://www.ouj.ac.jp/"> 放 送 大 学 </a> <a href="mailto:taro@example.com">taro@example.com</a>
Webブラウザでの 表 示 Internet Explorer Mozilla Firefox
Webブラウザでの 表 示 携 帯 電 話 (シミュレータ) スマートフォン
Webブラウザでの 表 示
Webページの 見 た 目 HTMLの 規 格 では 定 められていない Webブラウザ 独 自 のスタイルで 表 示 HTML 文 書 構 造 ( 意 味 ) スタイルシート スタイル( 見 た 目 )
ワープロソフトのスタイル
ワープロソフトのスタイル
ワープロソフトのスタイル
ワープロソフトのスタイル
ワープロソフトのスタイル
ワープロソフトのスタイル
Cascading Style Sheets (CSS) HTML 文 書 (Webページ)に 適 用 できるスタイルシート 言 語 W3Cが 標 準 化 いくつかのバージョン
CSSの 指 定 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./style.css" type="text/css"> <title> 放 送 太 郎 の 自 己 紹 介 </title> </head> <body> <h1> 放 送 太 郎 の 自 己 紹 介 </h1> <h2> 略 歴 </h2> <p> 神 奈 川 県 横 浜 市 出 身 1983 年 生 まれの29 歳 です 大 学 では 英 文 学 を 学 びました 現 在 は 千 葉 県 の<a href="http://www.ouj.ac.jp/"> 放 送 大 学 </a> 本 部 で 勤 務 しています </p> <h2> 趣 味 </h2> <ul> <li> 読 書 </li> <li>オートバイ</li> <li>プラモデル 製 作 </li> </ul> <address> 連 絡 先 : <a href="mailto:taro@example.com">taro@example.com</a></address> </body> </html>
CSSの 適 用
CSSの 適 用
CSSの 適 用 body { line-height: 1.4; } h1 { border-top: 1px solid #a7bfde; border-bottom: 4px solid #9bbb59; color: #243f60; font-style: italic; font-weight: normal; padding-top: 1ex; padding-bottom: 1.2ex; text-align: center; } h2 { border-bottom: 2px solid #365f91; color: #365f91; font-size: 100%; margin-top: 4ex; padding-bottom: 2px; } p { margin: 0; text-align: justify; text-indent: 2em; } ul { margin: 0; padding-left: 2em; } address { font-style: normal; }
CSSの 適 用 Microsoft Word 2010の 組 み 込 みのクイック スタイルセットを 模 倣 して 作 りました
CSSの 適 用
CSSの 適 用 body { font-style: italic; line-height: 1.6; } h1 { background-color: #c0504d; color: #ffffff; font-weight: normal; padding: 0.5ex; text-align: center; } h2 { background-color: #f2dbdb; border: 1px solid #c0504d; color: #622423; font-size: 95%; margin-top: 4ex; padding-left: 2px; } p { margin: 0; text-align: justify; } ul { margin: 0 0 2ex; padding-left: 1em; }
CSSの 適 用 Microsoft Word 2010の 組 み 込 みのクイック スタイルセットを 模 倣 して 作 りました
CSSに 関 連 した 機 能 出 力 媒 体 に 応 じたCSSの 適 用 ユーザーが 選 択 可 能 なCSS ユーザー 独 自 のCSSの 適 用
出 力 媒 体 に 応 じたCSSの 適 用 出 力 媒 体 (メディアタイプ)に 応 じて 適 用 するCSSを 切 り 替 えられる all braille embossed handheld print projection screen speech tty tv
出 力 媒 体 に 応 じたCSSの 適 用
ユーザーが 選 択 可 能 なCSS traditional.css を 適 用 fancy.css を 適 用
ユーザーが 選 択 可 能 なCSS <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./default.css" type="text/css" title=" 既 定 "> <link rel="alternate stylesheet" href="./traditional.css" type="text/css" title="トラディショナル"> <link rel="alternate stylesheet" href="./fancy.css" type="text/css" title="ファンシー"> <title> 放 送 太 郎 の 自 己 紹 介 </title> </head> <body> 代 替 スタイルシート
ユーザーが 選 択 可 能 なCSS Microsoft Word 2010の 組 み 込 みのクイックスタイルセットを 模 倣 して 作 りました
ユーザー 独 自 のCSSの 適 用
ユーザー 独 自 のCSSの 適 用 ページ 制 作 者 が 指 定 するスタイル ユーザー 独 自 のスタイル Webブラウザ 既 定 のスタイル
スタイルの 分 離
CSSの 基 礎
CSSの 例 h1 { background-color: #000000; color: #ffffff; } 大 見 出 し(h1)は 背 景 色 (background-color)を 黒 (#000000) 文 字 色 (color)を 白 (#ffffff)にする
CSSの 例 このスタイルの 適 用 前 このスタイルの 適 用 後 h1 要 素
CSSの 例 p { text-indent: 1em; } 段 落 (p)は 先 頭 行 の 字 下 げ 幅 (text-indent)を1 文 字 (1em)にする
CSSの 例 このスタイルの 適 用 前 このスタイルの 適 用 後 p 要 素
CSSの 例 address { text-align: center; font-size: 80%; } 連 絡 先 (address)は 配 置 (text-align)を 中 央 揃 え(center) にし 文 字 の 大 きさ(font-size)を 通 常 の0.8 倍 (80%)にする
CSSの 例 このスタイルの 適 用 前 このスタイルの 適 用 後 address 要 素
CSSの 例 h1 { background-color: #000000; color: #ffffff; } p { text-indent: 1em; } address { text-align: center; font-size: 80%; }
CSSの 構 文 セレクタ { プロパティ1: 値 1; プロパティ2: 値 2; }
CSSのセレクタ ( 一 部 ) 種 類 記 述 方 法 ユニバーサルセレクタ * 型 セレクタ E 子 孫 セレクタ E F IDセレクタ E#myid
型 セレクタ CSS h2 { font-size: 120%; } HTML <h1> 放 送 太 郎 の 自 己 紹 介 </h1> <h2> 略 歴 </h2> <p> 神 奈 川 県 横 浜 市 出 身 1983 年 生 まれの </p> <h2> 趣 味 </h2>
CSSのセレクタ ( 一 部 ) 種 類 記 述 方 法 ユニバーサルセレクタ * 型 セレクタ E 子 孫 セレクタ E F IDセレクタ E#myid
CSS p a { text-decoration: none; } HTML 子 孫 セレクタ <p> 千 葉 県 の<a href="http://www.ouj.ac.jp/"> 放 送 大 学 </a> 本 部 で </p> <address> 連 絡 先 : <a href="mailto:taro@example.com">taro @example.com</a></address>
CSSのセレクタ ( 一 部 ) 種 類 記 述 方 法 ユニバーサルセレクタ * 型 セレクタ E 子 孫 セレクタ E F IDセレクタ E#myid
CSS IDセレクタ h2#hobby { border-left: 10px solid #006400; } HTML <h2> 略 歴 </h2> <p> 神 奈 川 県 横 浜 市 出 身 1983 年 生 まれの </p> <h2 id="hobby"> 趣 味 </h2>
IDセレクタ h2#hobby *#hobby #hobby <h2 id="hobby"> 趣 味 </h2> <ul id="hobby"> <li> 読 書 </li> <li>オートバイ</li> <li>プラモデル 製 作 </li> </ul>
CSSの 構 文 セレクタ { プロパティ1: 値 1; プロパティ2: 値 2; }
CSSのプロパティ background-color: 背 景 色 ; color: 文 字 色 ;
色 の 指 定 光 の 三 原 色 である 赤 (Red) 緑 (Green) 青 (Blue)の 強 さで 指 定 最 初 に # 緑 の 強 さ #xxxxxx 赤 の 強 さ 青 の 強 さ 十 六 進 数 で 00( 一 番 弱 い) ~ ff( 一 番 強 い)
色 の 指 定 #000000 black #ff0000 red #00ff00 lime #0000ff blue #ffff00 yellow #ff00ff fuchsia #00ffff aqua #ffffff white #008000 green #800080 purple #ffa500 orange #c0c0c0 silver
CSSの 例 h1 { background-color: #000000; color: #ffffff; } 大 見 出 し(h1)は 背 景 色 (background-color)を 黒 (#000000) 文 字 色 (color)を 白 (#ffffff)にする
図 表 の 利 用
表 の 構 成 ヘッダセル キャプション ヘッダ ボ デ ィ フッタ データセル セル
表 のマークアップ 例 <table> <caption> 放 送 大 学 教 養 学 部 の 入 学 者 数 </caption> <thead> <tr><th> 学 生 種 類 </th><th>2011 年 度 </th><th>2012 年 度 </th><th>2013 年 度 </th></tr> </thead> <tfoot> <tr><th> 合 計 </th><td>50,026</td><td>50,779</td><td>47,994</td></tr> </tfoot> <tbody> <tr><th> 全 科 履 修 生 </th><td>11,898</td><td>12,411</td><td>11,858</td></tr> <tr><th> 選 科 履 修 生 </th><td>17,020</td><td>18,094</td><td>17,459</td></tr> <tr><th> 科 目 履 修 生 </th><td>15,986</td><td>15,128</td><td>14,029</td></tr> <tr><th> 特 別 聴 講 学 生 </th><td>5,122</td><td>5,146</td><td>4,648</td></tr> </tbody> </table>
表 のマークアップ 例 <table> <caption> 放 送 大 学 教 養 学 部 の 入 学 者 数 </caption> <thead> <tr><th> 学 生 種 類 </th><th>2011 年 度 </th><th>2012 年 度 </th><th>2013 年 度 </th></tr> </thead> <tfoot> <tr><th> 合 計 </th><td>50,026</td><td>50,779</td><td>47,994</td></tr> </tfoot> <tbody> <tr><th> 全 科 履 修 生 </th><td>11,898</td><td>12,411</td><td>11,858</td></tr> <tr><th> 選 科 履 修 生 </th><td>17,020</td><td>18,094</td><td>17,459</td></tr> <tr><th> 科 目 履 修 生 </th><td>15,986</td><td>15,128</td><td>14,029</td></tr> <tr><th> 特 別 聴 講 学 生 </th><td>5,122</td><td>5,146</td><td>4,648</td></tr> </tbody> </table> 全 体 がtable 要 素
表 のマークアップ 例 キャプション <table> <caption> 放 送 大 学 教 養 学 部 の 入 学 者 数 </caption> <thead> <tr><th> 学 生 ヘッダ 種 類 </th><th>2011 年 度 </th><th>2012 年 度 </th><th>2013 年 度 </th></tr> </thead> <tfoot> <tr><th> 合 計 フッタ </th><td>50,026</td><td>50,779</td><td>47,994</td></tr> </tfoot> <tbody> <tr><th> 全 科 履 修 生 </th><td>11,898</td><td>12,411</td><td>11,858</td></tr> <tr><th> 選 科 履 修 生 </th><td>17,020</td><td>18,094</td><td>17,459</td></tr> <tr><th> 科 目 ボディ 履 修 生 </th><td>15,986</td><td>15,128</td><td>14,029</td></tr> <tr><th> 特 別 聴 講 学 生 </th><td>5,122</td><td>5,146</td><td>4,648</td></tr> </tbody> </table> table 要 素 の 中 にcaption thead tfoot tbody 要 素
表 のマークアップ 例 <table> <caption> 放 送 大 学 教 養 学 部 の 入 学 者 数 </caption> <thead> <tr><th> 学 生 種 類 </th><th>2011 年 度 </th><th>2012 年 度 </th><th>2013 年 度 </th></tr> </thead> <tfoot> <tr><th> 合 計 </th><td>50,026</td><td>50,779</td><td>47,994</td></tr> </tfoot> <tbody> <tr><th> 全 科 履 修 生 </th><td>11,898</td><td>12,411</td><td>11,858</td></tr> <tr><th> 選 科 履 修 生 </th><td>17,020</td><td>18,094</td><td>17,459</td></tr> <tr><th> 科 目 履 修 生 </th><td>15,986</td><td>15,128</td><td>14,029</td></tr> <tr><th> 特 別 聴 講 学 生 </th><td>5,122</td><td>5,146</td><td>4,648</td></tr> </tbody> </table> ヘッダ フッタ ボディの1 行 がtr 要 素
表 のマークアップ 例 <table> <caption> 放 送 大 学 教 養 学 部 の 入 学 者 数 </caption> th ヘッダセル <thead> <tr><th> 学 生 種 類 </th><th>2011 年 度 </th><th>2012 年 度 </th><th>2013 年 度 </th></tr> </thead> <tfoot> <tr><th> 合 計 </th><td>50,026</td><td>50,779</td><td>47,994</td></tr> </tfoot> <tbody> <tr><th> 全 科 履 修 生 </th><td>11,898</td><td>12,411</td><td>11,858</td></tr> <tr><th> 選 科 履 修 生 </th><td>17,020</td><td>18,094</td><td>17,459</td></tr> <tr><th> 科 目 履 修 生 </th><td>15,986</td><td>15,128</td><td>14,029</td></tr> <tr><th> 特 別 聴 講 学 生 </th><td>5,122</td><td>5,146</td><td>4,648</td></tr> </tbody> </table> td データセル tr 要 素 の 中 にth 要 素 またはtd 要 素
表 の 構 造 全 体 がtable 要 素 table 要 素 の 中 に caption 要 素 キャプション thead 要 素 ヘッダ tfoot 要 素 フッタ tbody 要 素 ボディ thead tfoot tbody 要 素 の 中 に tr 要 素 表 の1 行 tr 要 素 の 中 に th 要 素 ヘッダセル td 要 素 データセル
表 のマークアップ 例 <table> <caption> 放 送 大 学 教 養 学 部 の 入 学 者 数 </caption> <thead> <tr><th> 学 生 種 類 </th><th>2011 年 度 </th><th>2012 年 度 </th><th>2013 年 度 </th></tr> </thead> <tfoot> <tr><th> 合 計 </th><td>50,026</td><td>50,779</td><td>47,994</td></tr> </tfoot> <tbody> <tr><th> 全 科 履 修 生 </th><td>11,898</td><td>12,411</td><td>11,858</td></tr> <tr><th> 選 科 履 修 生 </th><td>17,020</td><td>18,094</td><td>17,459</td></tr> <tr><th> 科 目 履 修 生 </th><td>15,986</td><td>15,128</td><td>14,029</td></tr> <tr><th> 特 別 聴 講 学 生 </th><td>5,122</td><td>5,146</td><td>4,648</td></tr> </tbody> </table>
表 のスタイル
表 のスタイル th { background-color: #eeeeee; border: 1px solid #999999; } td { border: 1px solid #999999; }
表 のスタイル
表 のスタイル th { background-color: #eeeeee; border: 1px solid #999999; padding: 0.5em; } td { border: 1px solid #999999; padding: 0.5em; }
表 のスタイル
表 のスタイル th { background-color: #eeeeee; border: 1px solid #999999; font-weight: normal; padding: 0.5em; text-align: left; }
表 のスタイル
table { border-collapse: collapse; } 表 のスタイル
表 のスタイル
表 のスタイル thead > * { border-bottom: 5px double #999999; } tfoot > * { border-top: 5px double #999999; }
表 のスタイル
td { border: 1px solid #999999; font-family: monospace; padding: 0.5em; text-align: right; } 表 のスタイル
表 のスタイル
表 のスタイル caption { margin-bottom: 1ex; }
表 のスタイル
CSS table { border-collapse: collapse; } caption { margin-bottom: 1ex; } thead > * { border-bottom: 5px double #999999; } tfoot > * { border-top: 5px double #999999; } th { background-color: #eeeeee; border: 1px solid #999999; font-weight: normal; padding: 0.5em; text-align: left; } td { border: 1px solid #999999; font-family: monospace; padding: 0.5em; text-align: right; }
表 のスタイル
図 の 利 用 画 像 リソース(ファイル)を 別 に 用 意 し 要 素 型 imgを 用 いて 埋 め 込 む <img src=" 画 像 リソースのURI" alt=" 画 像 の 説 明 ">
マークアップ 例 <p> 神 奈 川 県 横 浜 市 出 身 1983 年 生 まれの29 歳 です 大 学 では 英 文 学 を 学 びました 現 在 は 千 葉 県 の<a href="http://www.ouj.ac.jp/"> 放 送 大 学 </a> 本 部 で 勤 務 しています <img src="./ouj.jpg" alt=" 放 送 大 学 本 部 を 正 門 側 から 撮 った 写 真 右 の 建 物 の 屋 上 に 電 波 塔 が 見 える "> </p>
Webブラウザでの 表 示
第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用