Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21
演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: Webデータ 管 理 20111026 演 習 1 演 習 2 Z: Webデータ 管 理 20111026 演 習 2 演 習 3 Z: Webデータ 管 理 20111026 演 習 3 演 習 4 Z: Webデータ 管 理 20111026 演 習 4 演 習 5 Z: Webデータ 管 理 20111026 演 習 5 講 義 で 使 うフォルダ 2/21
スタイルシート tsujido.css を 開 き 下 記 の 通 り 修 正 してくだ さい body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;} h2{background-color:#fc6;font-size:1.2em;padding:0.5em;}.head{background-color:#fff;padding:3em;margin:0;}.contents{background-color:#fc6;padding:0.5em;margin:0;}.honbun{background-color:#fff;line-height:1.5;padding:0.8em;textindent:1em;} ( 演 習 1)スタイルシートで1 文 字 目 を 変 更 する 3/21
( 演 習 1) 結 果 4/21
ブロックの1 文 字 目 のスタイルを 変 更 する 機 能 値 セレクタ: first-letter {スタイル} 1 文 字 目 のスタイルを 指 定 する フォントや 文 字 色 背 景 色 枠 線 などのスタイル ブロックの1 文 字 目 を 字 下 げする スタイル 機 能 値 text-indent: 字 下 げ 幅 段 落 の1 文 字 目 の 字 下 げ 幅 を 指 定 する em( 標 準 1em) px(ピクセル) pt(ポイント) %など ブロック1 文 字 目 のスタイルを 変 更 する 5/21
スタイルシート tsujido.css を 開 き 下 記 の 通 り 修 正 してくだ さい body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;} h2{background-color:#fc6;font-size:1.2em;padding:0.5em;textalign:center;}.head{background-color:#fff;padding:3em;margin:0;}.contents{background-color:#fc6;padding:0.5em;margin:0;}.honbun{background-color:#fff;line-height:1.5;padding:0.8em;textindent:1em;} ( 演 習 2) 文 字 の 表 示 位 置 を 指 定 する 6/21
( 演 習 2) 結 果 7/21
ブロックの 文 字 の 表 示 位 置 を 指 定 する スタイル 機 能 値 text-align: 表 示 位 置 文 字 の 表 示 位 置 を 指 定 する left 文 字 を 左 揃 えで 表 示 する center 文 字 を 中 央 揃 えで 表 示 する right 文 字 を 右 揃 えで 表 示 する justify 文 字 を 両 端 揃 えで 表 示 する justyfyは 日 本 語 の 場 合 無 効 center rightは 短 い 文 章 が 有 効 文 字 の 表 示 位 置 を 指 定 する 8/21
スタイルシート tsujido.css を 開 き 下 記 の 通 り 修 正 してください body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;font-style:italic;} h2{background-color:#fc6;font-size:1.2em;padding:0.5em;textalign:center;letter-spacing:0.5em;font-family: MS P 明 朝, HiraMinProN-W3 ;}.head{background-color:#fff;padding:3em;margin:0;font-weight:bold;}.contents{background-color:#fc6;padding:0.5em;margin:0;}.honbun{background-color:#fff;line-height:1.5;padding:0.8em;textindent:1em;} ( 演 習 3) 文 字 の 装 飾 を 指 定 する 9/21
( 演 習 3) 結 果 10/21
太 字 で 表 示 する スタイル 機 能 値 斜 体 で 表 示 する font-weight: 文 字 の 太 さ 文 字 の 太 さを 指 定 する normal 文 字 を 標 準 の 太 さで 表 示 する bold 文 字 を 太 字 で 表 示 する 100~900 文 字 の 太 さを100おきの 数 字 で 表 示 する スタイル 機 能 値 font-style: 文 字 の 種 類 文 字 を 斜 体 で 表 示 するかどうかを 指 定 する normal 斜 体 にせず 文 字 を 標 準 で 表 示 する italic 文 字 をイタリック 体 で 表 示 する oblique 文 字 をオブリーク 体 で 表 示 する 文 字 の 装 飾 を 指 定 する(1) 11/21
フォントを 指 定 して 表 示 する スタイル 機 能 値 font-family:フォントの 種 類 フォント 名 文 字 のフォントの 種 類 を 指 定 する serif sans-serif cursive fantasy monospaceなど 文 字 間 を 調 節 して 表 示 する スタイル 機 能 値 letter-spacing: 文 字 の 間 隔 文 字 と 文 字 の 間 隔 を 指 定 する normal 文 字 と 文 字 の 間 隔 を 指 定 しない em( 文 字 サイズ) px(ピクセル 数 ) pt(ポイント 数 )などの 数 値 文 字 と 文 字 の 間 隔 を 数 値 で 指 定 する 文 字 の 装 飾 を 指 定 する(2) 12/21
スタイルシート tsujido.css を 開 き 下 記 の 通 り 修 正 してください body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;font-style:italic;} h2{background-color:#fc6;padding:0.5em;text-align:center;letterspacing:0.5em;font:bold 1.2em MS P 明 朝, HiraMinProN-W3 ;}.head{background-color:#fff;padding:3em;margin:0;font-weight:bold;}.contents{background-color:#fc6;padding:0.5em;margin:0;}.honbun{background-color:#fff;line-height:1.5;padding:0.8em;textindent:1em;} ( 演 習 4)フォント 関 連 のスタイルをまとめて 指 定 する 13/21
( 演 習 4) 結 果 ( 演 習 3と 同 じ) 14/21
フォント 関 連 のプロパティの 一 括 指 定 スタイル 機 能 値 font: 斜 体 文 字 の 太 さ 大 きさ/ 行 間 フォント フォント 関 連 のプロパティを 一 括 で 指 定 する font-style/font-weight/font-size/line-height/fontfamilyと 同 じ font : 斜 体 太 さ 文 字 サイズ/ 行 間 フォントの 種 類 font-style font-weight font-size line-height font-family フォント 関 連 のプロパティの 一 括 指 定 15/21
HTMLファイル shuuhen.html を 開 き 下 記 の 通 り 修 正 してください 前 略 <title> 辻 堂 周 辺 </title> </head> <body> <h1> 辻 堂 の 周 辺 にあるもの</h1> <div class= shoukai > <h2> 辻 堂 駅 </h2> <p class= honbun > 辻 堂 駅 は 大 正 5 年 12 月 1 日 に 開 業 したJR 東 日 本 東 海 道 線 の 駅 です 出 口 は 北 口 南 口 西 口 の3つがあります </p> </div> <div class= shoukai > <h2> 湘 南 工 科 大 学 </h2> <p class= honbun > 湘 南 工 科 大 学 は1963 年 に 創 立 した 工 学 部 のみの 単 科 大 学 で 機 械 工 学 科 電 気 電 子 工 学 科 情 報 工 学 科 コンピュータ 応 用 学 科 コン ピュータデザイン 学 科 人 間 環 境 学 科 の6 学 科 から 構 成 されます </p> </div> </body> </html> ( 演 習 5-1) 複 数 の 要 素 にまとめてスタイルを 指 定 する 16/21
( 演 習 5-1) 結 果 ( 演 習 4と 同 じ) 17/21
スタイルシート tsujido.css を 開 き 下 記 の 通 り 修 正 してください body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;font-style:italic;} h2{background-color:#fc6;padding:0.5em;text-align:center;letterspacing:0.5em;font:bold 1.2em MS P 明 朝, HiraMinProN-W3 ;margin:0;}.head{background-color:#fff;padding:3em;margin:0;font-weight:bold;}.contents{background-color:#fc6;padding:0.5em;margin:0;}.honbun{background-color:#fff;line-height:1.5;padding:0.8em;textindent:1em;margin:0;}.shoukai{border-left:solid 20px #ccc;margin:1em 0;} ( 演 習 5-2) 複 数 の 要 素 にまとめてスタイルを 指 定 する 18/21
( 演 習 5-2) 結 果 19/21
複 数 の 要 素 をまとめて 扱 う タグ 機 能 <div> ~ </div> 複 数 の 要 素 をまとめて 扱 う <div> <h2> ~ </h2> <p> ~ </p> </div> 複 数 の 要 素 をまとめて 扱 う 20/21
本 日 の 演 習 内 容 について 復 習 してください 演 習 内 容 作 成 ファイル 演 習 1 スタイルシートで1 文 字 目 を 変 更 する shuuhen.html tsujido.css 演 習 2 文 字 の 表 示 位 置 を 指 定 する shuuhen.html tsujido.css 演 習 3 文 字 の 修 飾 を 指 定 する shuuhen.html index.html tsujido.css 演 習 4 フォント 関 連 のスタイルをまとめて 指 定 する shuuhen.html tsujido.css 演 習 5 複 数 の 要 素 にまとめてスタイルを 指 定 する shuuhen.html tsujido.css HTML+CSS(4)まとめ 21/21