情報スキル活用 第７週 制作技術－１ 情報の記述と画面のデザイン
これまで（基礎技術）の内容 第１週 ： ガイダンス 第１週 ： ガイダンス 現代社会の情報基盤であるインターネットとその上にあるWebページのしくみを理解し、活用できる素養を養うことを目指す。 第１週～第５週 ： Webページの基本を理解 初めてWebページ制作を経験する人のための基礎について解説と制作実習を行った。 基礎技術－１ ：Webページの基本 基礎技術－２ ：Webページの基本形 基礎技術－３ ：文字の表示（紹介ページ作成） 基礎技術－４ ：画面デザイン（スタイルシート） 基礎技術－５ ：画像表示，ページ間リンク 第６週 ： 基礎技術のまとめ （作品の提出） 2
これからの予定 制作技術 ： Webページ開発の技術の活用 第７週 ： 制作技術－１ （情報の記述とデザイン） 第７週 ： 制作技術－１ （情報の記述とデザイン） 第８週 ： 制作技術－２ （画面分割） 第９週 ： 制作技術－３ （画面分割と双方向通信） 第10週 ： 制作技術－４ （双方向通信） 第11週 ： 制作技術－５ （付加機能） 第12週 ： 制作技術のまとめ プログラミング ： 第13週 ： プログラミング－１ （新学習指導要領） 第14週 ： プログラミング－２ （文部科学省提供：プログラミン） 第15週 ： プログラミング－３ （ﾏｻﾁｭｰｾｯﾂ工科大提供：Scratch） 3 3
制作技術の詳細 Webページ制作の一般的な技術は、これから６回で講義する内容ですべてではありませんが、これらの内容を知っておけば、さらに高度な技術の学習への手がかりになります。 第 ７週 制作技術－１では、文字や画像などの情報を表示するタグは領域があります。その領域のデザインについて解説し、制作済みのページへ適用します。あわせて動画についても解説します。 第８週 制作技術－２では、Webページを表示する画面を分割し、それぞれの部分に役割を持たせます。 第 ９ 週 制作技術－３では、PCとサーバーとの間の双方向通信の仕組みについて理解し、実際に各自のページに組み込みます。 第10週 制作技術－４では、アクセスカウンタ等機能について学習します。これをもとにトップページに組み込んでみます。 第11週 制作技術－５では、アクセスカウンタ等機能について学習します。これをもとにトップページに組み込んでみます。 第12週 制作技術のまとめ 制作技術過程における統一課題の制作と提出 4 4
本日（第7週）の内容 ● 表示領域をもつタグ(body,hα,p,hr)のスタイルを設定 ● もし、時間があれば ① margin（マージン） ： 領域周辺の間隔設定 ② border（ボーダー） ： 領域境界線のデザイン ③ padding(ﾊﾟﾃﾞｨﾝｸﾞ） ： 領域内側の隙間設定 ● もし、時間があれば 画面を華やかにするアニメーションについて解説と制作体験 アニメーションは多用しないことが望まれています。しかし、基本的なことは知っておくと便利です。 ① 考え方と制作体験 ② 画像の透過
margin, border, paddingの意味 bodyの領域 <h1>現代教育学部紹介</h1>の場合 h１ の領域 border 現代教育学部紹介 padding
アニメーションの考え方と制作の方法 アニメーション（動画）作成の手法 専用ソフト（Flush），プログラム言語（Javaなど）の活用 もっとも簡単な方法（プログラム言語を使わない） 数枚の画像を一定時間間隔で順に表示する。 gifファイルの基本的な機能を利用する。 例 ： 複数枚の画像(.gifﾌｧｲﾙ)を一枚に合成する。 画像の透過（白い部分に背景色を透過して表示） 左から順に表示すれば ⇒ 左から順に表示すれば ⇒
margin, padding の設定 マージンの設定 要素名 {margin-top: サイズ; margin-bottom: サイズ; margin-left: サイズ; margin-right: サイズ} パディングの設定 要素名 {padding-top: サイズ; padding-bottom: サイズ; padding-left: サイズ; padding-right: サイズ} 位置の指定（margin と padding） 要素名 {margin: p1} 上下左右 要素名 {margin: p1,p2} 上下，左右 要素名 {margin: p1,p2,p3} 上，左右，下 要素名 {margin: p1,p2,p3,p4} 上，右，下，左
サイズ（間隔）の単位 相対値指定の単位 ① em: フォントの大きさ 'font-size' を 1 とする。 ② ex: 小文字の高さ 'x-height' を 1 とする。 ③ px: ピクセル。解像度に依存してサイズが決まる。 ④ ％: 表示中の画面サイズに対する比率で指定。 絶対値指定の単位 ① in: インチ 2.54 cm ② cm: センチメートル ③ mm: ミリメートル ④ pt: ポイント 1/72 インチ ⑤ pc: パイカ 12 ポイント
border（境界線） の設定 対象とするタグの領域の境界線のデザイン 太さ 要素名 {border-width: 太さ} 種類 要素名 {border-style: 種類} 色 要素名 {border-color: 色} 色の指定の表現は文字などと同じ
border-width の設定 タグの領域の境界線の太さの指定を行います。 太さは、margin,paddingで示した単位のほか、 つぎのパラメータが使えます。 ［パラメータの意味と表現］ ① 細い線 thin ② 中くらいの線 medium ③ 太い線 thick ［設定例］ ① 要素名 {border-width: thin} ② 要素名 {border-width: medium} ③ 要素名 {border-width: thick}
border-style の設定 タグの領域の境界線の種類の指定を行います。 種類としては、つぎのパラメータが使えます。 ［パラメータの意味と表現］ ① 点線 dotted ② 実線 solid ③ 破線 dashed ④ 二重線 double ⑤ 窪み(凹)線 groove ⑥ 浮き(凸)線 ridge ⑦ 内容が沈む inset ⑧ 内容が浮く outset ［設定の形式］ 要素名 {border-style: ①～⑧のいずれか}
margin,border,padding の体験 では、これらの機能を使ってタグをデザインしてみよう。 まず HTML文書とスタイルシートのファイルを作ります。 理解をし易くするために、 <h1>現代教育学部紹介</h1> だけのHTML文書のファイルを作ります。 スタイルシートのファイルの始めの内容は何もありません。 ファイル名は、mbp.html と mbp.css としておきましょう。
HTML文書の内容 html文書に変更を加えず、h1タグで表示されるイメージにデザインを加えることとします。 ［ HTML文書のファイル名 ： mbp.html ］ <!DOCTYPE html> <html> <head> <title>margin,border,padding</title> <link rel="stylesheet" href="mbp.css" type="text/css" media="screen" /> </head> <body> <h1>現代教育学部紹介</h1> </body> ［ ｽﾀｲﾙｼｰﾄのファイル名 ： mbp.css ］ 当初は内容は何もありません。 html文書に変更を加えず、h1タグで表示されるイメージにデザインを加えることとします。 この方法は、バリアフリーなWebページ制作の第一歩です。
mbp.html と mbp.css の内容
mbp.html実行画面 と mbp.css編集画面 この編集画面でデザイン