メディア 技 術 基 礎 (Web) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) HTML の 基 本 的 な 書 き 方 テキストエディタで index.html を 作 成 して 以 下 のサンプルを 入 力 してみましょう 始 めの 2 行 は HTML を 書 く 前 のおまじないの 様 なものです ここで 登 場 する HTML タグについての 説 明 は 以 下 の 通 りです HTML タグには <html> </html> の 様 にサンドイッチ 形 式 にするものと <br /> の 様 にサンドイッチにせずにタグ 単 独 で 効 果 を 発 揮 するものがあります この 他 にも HTML タグは 沢 山 あるので 色 々と 試 してみましょう Hyperlink HTML ではハイパーリンクを 使 って 複 数 のドキュメントを 結 びつけて 参 照 する 事 が 出 来 ます 例 えばココをクリックすると SFC の HP を 参 照 する 事 が 出 来 る といった 具 合 です ハイパーリンクを 書 く 為 の HTML タグは こちらを 使 います URL の 部 分 で 参 照 したいドキュメントの URL を 絶 対 パスや 相 対 パスで 指 定 しま す タグの 間 に 文 章 を 記 述 すると その 文 章 がハイパーリンクとして 表 示 されます タグの 間 に 何 も 記 述 しないとリンク 自 体 を 表 示 するものが 何 も 無 いので 必 ず 何 か 目
に 見 えるものを 記 述 して 下 さい また a href="url" の 続 きに 半 角 スペースを 空 けて target="_blank" と 記 述 すると リンク 先 のドキュメントを 新 しいウィンドウで 開 く 様 に 設 定 する 事 が 出 来 ます 外 部 リンクなどを 記 載 する 場 合 はこの 方 法 を 使 うと 良 いでし ょう 練 習 1 上 で 作 成 した index.html を 編 集 して 以 下 の 3 つのハイパーリンクを 作 成 して 下 さい 自 己 紹 介 ( 例 : me.html) 時 間 割 ( 例 : timetable.html) 課 題 ページ( 例 : homework.html) また SFC の HP など 外 部 サイトのリンクを 新 しいウィンドウで 表 示 する 様 なハイパーリンクを 作 成 して 下 さい 画 像 の 表 示 HTML では 文 章 だけではなく 画 像 や 写 真 を 表 示 する 事 も 出 来 ます 画 像 は 以 下 の HTML タグを 使 って 表 示 する 事 が 出 来 ます ハイパーリンクの 時 と 同 様 URL の 部 分 で 表 示 したい 画 像 の URL を 絶 対 パスや 相 対 パスで 指 定 します この <img /> は <br /> と 同 じ 様 に サンドイッチしないで 使 うタイプの HTML タグです また src="url" の 続 きに 半 角 スペースを 空 けて width=" px" とか height=" px" と 記 述 すると 画 像 の 大 きさを 指 定 した 通 りに 拡 大 縮 小 して 表 示 する 事 が 出 来 ます 練 習 2 自 分 の Web ページの 中 に 画 像 を 表 示 したり 画 像 から 他 のドキュメントにアクセス 出 来 る 様 なハイパーリンクを 作 成 したりしてみましょう 文 字 の 装 飾 これまではプレーンな 文 字 で 文 書 を 書 いてきましたが 例 えば 以 下 のタグを 使 って 文 字 に 色 を 付 けてみましょう この 様 にタグの 中 に color="# " と 記 述 すると 文 字 の 色 を 変 更 する 事 が 出 来 ま す の 部 分 は RGB の 色 の 値 を 2 桁 ずつ 指 定 しており それぞれ 00 から FF までの 値 を 取 る 事 が 出 来 ます 黒 : #000000 赤 : #FF0000 緑 : #00FF00 青 : #0000FF 白 : #FFFFFF といった 具 合 です また face="font" と( FONT にはフ
ォント 名 を) 記 述 する 事 でフォントを 変 更 する 事 が 出 来 ます 使 用 可 能 なフォントはブ ラウザに 依 存 しますが 試 しに Arial や Century などを 使 ってみましょう 練 習 3 自 分 の Web ページのフォントを 変 更 してみましょう 上 で 紹 介 した 2 つ 以 外 のフォント を 探 して 使 ってみて 下 さっても 結 構 です Table の 基 本 表 を 作 成 する 時 は テーブルを 使 うと 便 利 です この 様 に 記 述 した 場 合 以 下 の 様 な 表 が 出 来 上 がります 1-1 1-2 1-3 2-1 2-2 2-3 しかしこれでは 枠 などが 無 いので 表 として 少 し 見 難 いですね そこでテーブルでは 以 下 のパラメータを 記 述 する 事 で 表 のスタイルを 設 定 する 事 が 出 来 ます width=" px" : 幅 height=" px" : 高 さ border=" px" : 境 界 線 の 太 さ bgcolor="# " : 背 景 の 色 bordercolor="# " : 境 界 線 の 色 cellspacing=" px" : セル 同 士 の 間 隔 ( table タグでのみ 有 効 ) cellpadding=" px" : セルと 文 字 の 間 隔 ( table タグでのみ 有 効 ) これらのパラメータを table tr td のどのタグに 記 述 するかによって 設 定 が 適 用 される 場 所 が 変 わります また テーブル 内 の 文 字 の 記 述 に 関 するパラメータもあり ます align=" " : 水 平 方 向 の 整 頓 (left / center / right) valign=" " : 垂 直 方 向 の 整 頓 (top / middle / bottom) nowrap : 自 動 改 行 禁 止 ( td タグでのみ 有 効 ) 練 習 4
これらのパラメータを 設 定 して より 枠 組 みの 見 易 い 表 を 作 ってみましょう こんな 感 じで 表 を 作 れると 良 いですね table の 結 合 表 を 作 る 過 程 でセル 同 士 を 結 合 させる 必 要 が 出 て 来 た 時 は colspan や rowspan を 使 いましょう colspan は 横 方 向 の 結 合 rowspan は 縦 方 向 の 結 合 を 設 定 します 練 習 5 テーブルを 使 用 して timetable.html に 今 期 の 自 分 の 時 間 割 表 を 作 って 下 さい ただ 単 に 表 を 組 むだけではなく 積 極 的 にタグを 活 用 してより 見 易 い 時 間 割 表 になる 様 に 工 夫 しましょう
課 題 提 出 今 回 の 課 題 は 自 分 の Web ページを 作 る 事 です 講 義 中 の 練 習 1 から 練 習 5 ま でをクリアして 自 己 紹 介 時 間 割 課 題 ページ などのコンテンツを 含 む Web ペー ジを 作 りましょう 授 業 の 内 容 や より 発 展 的 な 内 容 を 積 極 的 に 取 り 入 れて 是 非 素 敵 な Web ページに 仕 上 げて 下 さい 課 題 を 以 下 の URL から 参 照 出 来 る 様 にアップロ ードして SFC-SFS に URL を 提 出 してください 添 付 ファイルによる 提 出 は 認 められま せんので 注 意 しましょう 課 題 の URL( 例 : http://web.sfc.keio.ac.jp/~ 自 分 のログイン 名 /mtb/index.html) CSS CSS とは Cascading Style Sheets の 略 です HTML の 要 素 をどの 様 に 視 覚 表 現 す るのかを 指 定 する 為 のプレゼンテーション 技 術 です つまり ページのデザインを 決 め る 為 のファイル という 事 です 下 のサイトを 見 て 少 し CSS を 実 感 してみましょう Zen Garden 悟 りへの 道 という 始 まり 方 でとても 怪 しい 感 じですが 決 して 怪 しいサイトではあり ません 右 側 の デザインを 選 択 の 項 目 にあるデザインを 1 つ 選 んでクリックしてみ て 下 さい 表 示 されている 文 章 は 変 わらずに ページのデザインだけが 変 更 されまし た これが HTML( 情 報 ) と CSS(デザイン) を 分 ける 最 大 のメリットです 長 い 時 間 を 掛 けて HTML を 書 き 直 さなくても CSS を 変 更 するだけでデザイン 変 更 を 行 うことが 出 来 るのです HTML と CSS それでは 実 際 に CSS を 使 ってデザインしてみましょう 下 の HTML のサンプルと CSS のサンプルを 作 って ブラウザから HTML ファイルを 確 認 してみましょう
CSS では <div> </div> というタグを 使 ってレイアウトを 組 みます <div>タグは 見 出 しや 文 章 といった 個 々のパーツをグループ 化 する 為 の box です この sample.html で は 以 下 の 図 の 様 な 入 れ 子 構 造 になっています
class で 名 前 を 付 けた 場 合 は CSS 側 で.class 名 { } として 設 定 し id で 名 前 を 付 け た 場 合 は CSS 側 で #id 名 { } として 設 定 します class と id の 違 いですが class は HTML 内 で 何 度 も 使 えるのに 対 し id は HTML 内 で 1 度 しか 使 えません クラスは 同 じクラスに 何 人 も 入 れますが 学 籍 番 号 は1 人 1つで 使 い 回 しが 効 きませんね <link href="sample.css" rel="stylesheet" type="text/css" /> HTML 側 のこの 1 行 は CSS を 指 定 して 読 み 込 む 為 の 宣 言 です href="stylesheet.css"の 部 分 で CSS の URL を 指 定 します <p> </p> は 段 落 (Paragraph)です <ul> </ul> と <li> </li> は 箇 条 書 きを 作 る 為 のタグで <ul> (Unordered List) 要 素 は 箇 条 書 き 全 体 を 表 し <li>(list Item) 要 素 は 項 目 1 つ を 表 します float プロパティは あるボックスが 左 側 に 配 置 するか 右 側 に 配 置 する かを 指 定 するものです この sample.css では menu を float: left; と 指 定 して 左 に 寄 せていますね main は float: right; で 右 に 寄 せています
練 習 1 先 程 のサンプルを 変 更 して body のデザインを 変 更 しましょう CSS に 書 き 込 む 設 定 には 以 下 のものをはじめ 様 々なものがあります background-image: url("image.jpg"); 背 景 画 像 background-color: # ; 背 景 色 font-size: pt; 文 字 サイズ font-family: FONT; フォント こちらのリンクも 参 考 にしてみましょう TAGindex とほほの WWW 入 門 練 習 2 更 に 先 程 のサンプルを 変 更 して リンクのデザインを 変 更 しましょう リンクの 設 定 はリンクの 状 態 によって 変 える 事 が 出 来 ます a:link{ } 通 常 a:visited{ } アクセス 済 み a:hover{ } ポイント 時 a:active{ } クリック 時 練 習 3
練 習 2 ではページ 全 体 のリンクのデザインを 設 定 しましたが 今 度 は 特 定 のエリアのリンクのデザインを 変 更 してみましょう [HTML] <a class="class 名 前 " href="url">link</a> [CSS] a.class 名 :link{ } a.class 名 :visited{ } a.class 名 :hover{ } a.class 名 :active{ } 練 習 4 テーブルについても リンクの 様 にまとめて 設 定 をする 事 が 出 来 ます テーブルのデザインを CSS から 設 定 してみましょう table{ } tr{ } 今 回 の 課 題 は 自 分 の Web ページを CSS によってデザインする 事 です 講 義 中 の 練 習 1 から 練 習 4 までをクリアして Web ページをもっと 素 敵 に 変 身 さ せましょう 授 業 の 内 容 や より 発 展 的 な 内 容 を 積 極 的 に 取 り 入 れて 是 非 素 敵 な Web ペ ージに 仕 上 げて 下 さい 課 題 を 以 下 の URL から 参 照 出 来 る 様 にアップロードして SFC-SFS にて URL を 提 出 して 下 さい
CSS ファイルを 作 り Web の データ と デザイン を 別 々にした 事 で 更 新 が 行 い 易 く なったと 思 います 前 回 の 課 題 では こんな 感 じの Web ページを 作 って 頂 きました しかし これでは 物 足 りない 気 がしますね 今 回 は Web の 定 番 的 なレイアウト パター ンを 紹 介 します CSS によるレイアウトの 基 本 的 な 手 法 を 理 解 し 自 分 の Web の 作 り 込 みをしてみましょう CSS によるレイアウト 前 回 学 習 した div 要 素 については 理 解 出 来 ていますか 今 回 は 先 ず 以 下 の 図 を 参 考 にして サンプルの HTML と CSS を 自 分 で 作 ってみまし ょう また 下 のサンプルは 穴 埋 め 方 式 になっていますから?????? の 部 分 を 考 えて 埋 めてみてください sample.html
sample.css
きっと こんな 感 じになると 思 います <div> 要 素 前 回 の 復 習 です CSS では <div> </div> というタグを 使 ってレイアウトを 組 みます <div>タグは 見 出 しや 文 章 といった 個 々のパーツをグループ 化 する 為 の Box です この sample.html では 以 下 の 図 の 様 な 入 れ 子 構 造 になっています float プロパティ 復 習 です float プロパティは ある Box が 左 側 に 配 置 するか 右 側 に 配 置 するかを 指 定 していま す この sample.css では sub を float: left; と 指 定 して 左 に 寄 せていますね main は float: right; で 右 に 寄 せています 上 の 図 を 参 考 にしてください id と class
前 回 の 復 習 です id と class の 違 いは 以 下 の 通 りでした id : 1 つの HTML ファイルで 一 度 しか 使 えない class : 1 つの HTML ファイルで 何 度 も 使 用 できる サンプルを 見 てみましょう margin と padding margin プロパティは コンテンツ 領 域 の 外 側 の 余 白 padding プロパティは コンテンツ 領 域 の 内 側 の 余 白 を 指 定 します 以 下 の 図 を 参 考 にしてください
CSS への 指 定 の 仕 方 は 以 下 の 4 通 りです padding も 指 定 する 位 置 は 同 様 です サンプルでは #wrapper の 中 に 例 があります margin: 0 auto; と 指 定 する 事 で 左 右 の 外 側 の 余 白 を auto に 設 定 し ブラウザの 中 心 に 配 置 することが 可 能 です margin と padding は その pixel 数 も 全 体 の 幅 や 高 さに 含 まれます レイアウトを 組 む 時 には 指 定 した pixel 数 に 気 を 付 ける 様 にしましょう
3 段 組 みレイアウト 練 習 1 サンプルを 参 考 にして 3 段 組 みのレイアウトに 挑 戦 してみましょう
きっと こんな 感 じになると 思 います Web をデザインする ブラウザのデフォルト 設 定 によって フォントや 文 字 サイズ 行 間 字 間 は 異 なって 来 ます Web の 情 報 を 読 み 易 く 伝 え 易 くするためには テキストの 設 定 が 重 要 となります 練 習 2 背 景 色 背 景 画 像 フォントを 装 飾 してみましょう 文 字 サイズ : font-size 書 体 : font-family 字 間 : letter-spacing 行 間 : line-height 例 えば こんな 感 じ 背 景 画 像 などの 素 材 も 自 分 で 作 ってみましょう
練 習 3 メニューの 作 り 込 みをしてみましょう 例 えば こんな 感 じにする 事 も 出 来 ます 練 習 4 以 下 の Web サイトの CNS のギャラリーを 参 考 にしながら 自 分 の Web のデザインを 考 えて 下 さい Unmatchedstyle cssbeauty cssvault Stylegala CSS Drive css thesis Styleboost CSSElite CSS Import Web Creme CSS Mania DesignShack ( 引 用 元 : http://www.pronetadvertising.com/articles/my-50-favorite-design-resources.html) 以 下 のリファレンスを 参 考 にしながら 授 業 で 取 り 上 げていない 事 についても 試 してみ て 下 さい TAGindex とほほの WWW 入 門 ZenGarden 課 題 提 出 今 回 の 講 義 で Web の 色 々な 設 定 について 学 ぶ 事 が 出 来 たと 思 います 講 義 中 の 練 習 1 から 練 習 4 までをクリアして Web ページをもっと 素 敵 に 変 身 さ せましょう 授 業 の 内 容 や より 発 展 的 な 内 容 を 積 極 的 に 取 り 入 れて 是 非 素 敵 な Web ページに 仕 上 げて 下 さい
課 題 を 以 下 の URL から 参 照 出 来 る 様 にアップロードして SFC-SFS にて URL を 提 出 し て 下 さい 横 メニュー 前 回 と 同 様 に 引 き 続 きメニューの 作 り 込 みをしてみましょう 今 回 はメニューを 横 1 列 に 並 べたデザインを 紹 介 します 新 しく 学 ぶ 事 は 殆 ど 無 いと 言 って 良 いでしょう これで Web サイトで 多 用 される 横 メニュー や 縦 メニュー が 作 れる 様 になります sample.html sample.css
きっと こんな 感 じになると 思 います 文 字 の 装 飾 文 字 の 色 大 きさ 間 隔 配 置 等 まで 手 が 回 っていない 人 が 多 い 様 ですが サイト 全 体 で 統 一 感 や 雰 囲 気 を 作 り 出 す 事 はとても 大 事 です 1 つ 1 つの 要 素 名 に 対 して 丁 寧 にスタイルを 適 用 してみましょう 文 字 サイズ : font-size 書 体 : font-family 形 : font-style 色 : color 背 景 : background-color 枠 線 : border 字 間 : letter-spacing 行 間 : line-height 文 字 揃 え : text-align 練 習 2 統 一 感 や 雰 囲 気 を 意 識 しながら サイト 全 体 のデザインにこだわってみましょう こんな 感 じのデザインも 参 考 にしてみて 下 さい margin や padding の 設 定 もきちんと 行 ってみましょう HTML 入 門 - 3 :: margin と padding 画 像 の 回 り 込 み 綺 麗 な 写 真 を 効 果 的 に 配 置 する 事 で Web サイトの 雰 囲 気 を 格 段 に 向 上 させる 事 が 出 来 ます <div> </div> で 構 造 を 意 識 しながら 作 ってみましょう float プロパティを 使 用 して ある Box が 左 側 に 配 置 されるか 右 側 に 配 置 されるか を 指 定 します 練 習 3 Web ページに 画 像 を 配 置 してみましょう 例 えば こんな 感 じ 課 題 提 出
HTML や CSS についての 学 習 は 今 回 で 終 わりです 基 本 的 な HTML の 書 き 方 やデザインの 方 法 が 解 って 来 たと 思 います 講 義 中 の 練 習 1 から 練 習 3 をクリアして Web ページに 仕 上 げをしましょう 授 業 の 内 容 や より 発 展 的 な 内 容 を 積 極 的 に 取 り 入 れて 是 非 素 敵 な Web ページに 仕 上 げて 下 さい 課 題 を 以 下 の URL から 参 照 出 来 る 様 にアップロードして SFC-SFS にて URL を 提 出 して 下 さい