※現在辻はAmazonの「この本を買った人はこの本も買っています」

Slides:



Advertisements
Similar presentations
WEB デザイン基礎実 験 担当:清水,田代 副手:浦辺,石井 ( 1 日目) NC-2 情報通信基礎実験.
Advertisements

BWD06-01 ~ 1 ~ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 – ガイダンス – Webの歴史 –HTML 基礎 今週 について(出席と課題提出) –HTML 画像、ハイパーリンク、文字書式.
コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀. はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例.
初年次セミナー 第13回 2次元グラフィックス(1).
視覚表現--CSSでwebページを自由にデザイン
2017/3/2 情報処理 第8回.
第11回JavaScriptゼミ セクション8-2 発表者 直江 宗紀.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
【2.12】文字装飾機能内部設計書
下左近研究室 ゼミ資料 ホームページの作り方(基礎編)
第12回(1月13日) 文書処理 久野禎子.
タグの直接入力によるウェブページの制作 練習課題1~3
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
2017/3/7 情報処理 第8回.
CEC公開授業 Webサイト制作にチャレンジ! 2007年11月20日 於:東京都立板橋有徳高校 学校インターネット教育推進協会.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
情 報 の 表 現(3) 情報社会とコンピュータ 第10回.
HTMLの記述と WWWにおける情報公開 遠藤
売れるためのWEBサイト構築.
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔.
HTML版パスファインダーの作成 CSSの利用 hp. infoseek. co. jp/cje10
ホームページの作り方.
講議資料 コンピュータ プレゼンテーション 講議資料
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
発表課題 インターネット上においての色の表現 調査期間:2012年05月~06月 発表日:2012年06月07日
見た目を定義する技術 CSS(スタイルシート).
専門ゼミⅠ 南ゼミ 特別授業③ 2002年6月7日 金曜日 4限目 今泉 裕隆.
9 Microsoft Word(1).
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (1日目) 担当:清水,田代 副手:浦辺,石井.
WebDesigner StartGUide
サイト運営者へむけて、CMS管理画面をつかって サイト運営していく方法を紹介します。
スタイルシート C306 情報発信の基礎【第6回】.
情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.
コンピュータ プレゼンテーション.
パスファインダーの作成 slis. tsukuba. ac. jp/~fuyuki/cje2/CJE161018
経営工学基礎演習a Word第1回目.
(Wed) Edited by KON IT講習会 一太郎編.
基礎プログラミング演習 第1回.
第3章 第2節 ネットワークを活用した 情報の収集・発信(3) 5 表現方法の工夫
Microsoft PowerPoint Netscape Communicator
10 Microsoft Word(1) 10.1 Microsoft Word v.Xの概要 起動 終了
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報スキル活用 第7週 制作技術-1 情報の記述と画面のデザイン.
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11.
第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
パスファインダーの作成 ※ をダウンロードして読んで下さい。
XMLゼミ 1.3 XML文書の表示 1.4 XMLの役割 1.5 XMLとプログラミング M2 正木 裕一.
パスファインダーの作成 ※ sakura. ne. jp/CJE121023
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
コンピュータ プレゼンテーション.
ウェッブページ書法の復習 ネットワーク論以前のお話.
HP作成 そろそろまとめ編 担当:TAの人.
コンピュータ プレゼンテーション.
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
ネイティブ広告デザインシート 媒体社名:○○様 実装アプリ/サイト名: 希望されますネイティブ広告枠の
例題のプログラムを通して JavaScriptの仕組みを理解することとします。
サンプル見出し テキスト 1 行目 テキスト 2 行目 テキスト 3 行目 (中級) 図の背後でタイトルを移動させるアニメーション効果
情報スキル活用 第6週 制作技術-1 情報の記述と画面のデザイン.
Presentation transcript:

※現在辻はAmazonの「この本を買った人はこの本も買っています」 といった図書推薦」のシステム作りを行っています(図書館のOPAC につけるのが夢です) 。もし被験者になってもよいという方がいたら keita@slis.tsukuba.ac.jp にメールを下さらないでしょうか。 辻が推薦する図書6~18冊に対して関心度を3段階でつける 簡単なお仕事です(お礼はジュース1本とか?)。 HTML版パスファインダーの作成 CSSの利用 http://slis.sakura.ne.jp/CJE111108.doc をダウンロードして下さい。 辻慶太

1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス   学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの1つに関するパスファインダーを作り,CSSで統合する:    ・地球温暖化    ・循環型社会    ・ジェンダーフリー論争    ・健康食品・サプリメント    ・インターネット広告

1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス   学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの1つに関するパスファインダーを作り,CSSで統合する:    ・地球温暖化    ・循環型社会    ・ジェンダーフリー論争    ・健康食品・サプリメント    ・インターネット広告

1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス   学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの1つに関するパスファインダーを作り,CSSで統合する:    ・地球温暖化    ・循環型社会    ・ジェンダーフリー論争    ・健康食品・サプリメント    ・インターネット広告

1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス   学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの1つに関するパスファインダーを作り,CSSで統合する:    ・地球温暖化    ・循環型社会    ・ジェンダーフリー論争    ・健康食品・サプリメント    ・インターネット広告

1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス   学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの1つに関するパスファインダーを作り,CSSで統合する:    ・地球温暖化    ・循環型社会    ・ジェンダーフリー論争    ・健康食品・サプリメント    ・インターネット広告

2. 今週のレポート課題と出席課題 詳細はレジュメ参照   

レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい:       レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい: http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p1.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p2.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/style.css 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい:       レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい: http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p1.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p2.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/style.css 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい:       レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい: http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p1.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p2.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/style.css 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

3. 出席課題 以下の画面を再現するような2つのhtmlファイルと1つのCSSファイルを作成し,www/local_only にアップする。完成したら画像を印刷して提出すること。 → 詳しくはレジュメ参照

<CSSで出来ること> 前回はhtmlの基本を学習した。今回はCSSを使ってWebページに色や枠線をつけ,文字の大きさを変える方法を学ぶ。 CSSを使わずhtmlだけで色をつけることも可能なのだが,htmlは本来文書の構造を記述するものなので,そうした使い方は本来のものではない。 CSSを使うことで複数のhtmlを同じスタイルに統一したり,htmlだけでは実現できない表現も可能になる。     (例えば段落や見出しに枠線を付けて,線と背景,文字      にそれぞれ別の色を付けるといったことも可能になる)

<CSSで出来ること> 前回はhtmlの基本を学習した。今回はCSSを使ってWebページに色や枠線をつけ,文字の大きさを変える方法を学ぶ。 CSSを使わずhtmlだけで色をつけることも可能なのだが,htmlは本来文書の構造を記述するものなので,そうした使い方は本来のものではない。 CSSを使うことで複数のhtmlを同じスタイルに統一したり,htmlだけでは実現できない表現も可能になる。     (例えば段落や見出しに枠線を付けて,線と背景,文字      にそれぞれ別の色を付けるといったことも可能になる)

<CSSで出来ること> 前回はhtmlの基本を学習した。今回はCSSを使ってWebページに色や枠線をつけ,文字の大きさを変える方法を学ぶ。 CSSを使わずhtmlだけで色をつけることも可能なのだが,htmlは本来文書の構造を記述するものなので,そうした使い方は本来のものではない。 CSSを使うことで複数のhtmlを同じスタイルに統一したり,htmlだけでは実現できない表現も可能になる。     (例えば段落や見出しに枠線を付けて,線と背景,文字      にそれぞれ別の色を付けるといったことも可能になる)

<CSSの基本的な記述方法> CSSは「プロパティ」に「値」を設定することで使用する。  ・ 「プロパティ」とは「フォントのサイズ」「色」など,設定しよ   うとする項目のこと。  ・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。           color:blue

<CSSの基本的な記述方法> CSSは「プロパティ」に「値」を設定することで使用する。  ・ 「プロパティ」とは「フォントのサイズ」「色」など,設定しよ   うとする項目のこと。  ・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。           color:blue

<CSSの基本的な記述方法> CSSは「プロパティ」に「値」を設定することで使用する。  ・ 「プロパティ」とは「フォントのサイズ」「色」など,設定しよ   うとする項目のこと。  ・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。           color:blue

<CSSの基本的な記述方法> CSSは「プロパティ」に「値」を設定することで使用する。  ・ 「プロパティ」とは「フォントのサイズ」「色」など,設定しよ   うとする項目のこと。  ・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。           color:blue

<CSSの記述場所> CSSを記述する場所には以下の3つがある: (1) style属性の値として記述する (2) ヘッダ部分に記述する (3) 別ファイルに記述する

<CSSの記述場所> CSSを記述する場所には以下の3つがある: (1) style属性の値として記述する (2) ヘッダ部分に記述する (3) 別ファイルに記述する

<title>タイトル</title> </head> <body> (1) style属性の値として記述する: スタイルを設定したい要素ごとに設定する方法で,「style=“プロパティ:値”」のように二重引用符を使って記述する。以下は「第1章」「第2章」「第3章」というh2要素を青色にする設定である: <html> <head>       <title>タイトル</title> </head> <body>       <h2 style="color:blue">第1章</h2>       <h2 style="color:blue">第2章</h2>       <h2 style="color:blue">第3章</h2> </body> </html> 21 21

<CSSの記述場所> CSSを記述する場所には以下の3つがある: (1) style属性の値として記述する (2) ヘッダ部分に記述する (3) 別ファイルに記述する

<CSSの記述場所> CSSを記述する場所には以下の3つがある: (1) style属性の値として記述する (2) ヘッダ部分に記述する (3) 別ファイルに記述する

<title>タイトル</title> <style type="text/css"> (2) ヘッダ部分に記述する: 文書内の同じタグすべてに同じスタイルを設定したい時は,htmlのヘッダ部分にstyle要素を用いて以下のように記述する。こうしておくと例えば「h2の色は青ではなく緑にしよう」と思った時,1箇所を変えるだけで済む: <html> <head>       <title>タイトル</title>       <style type="text/css">     h2 { color:blue }   </style> </head> <body>       <h2>第1章</h2>       <h2>第2章</h2>       <h2>第3章</h2> </body> </html> 24 24

<CSSの記述場所> CSSを記述する場所には以下の3つがある: (1) style属性の値として記述する (2) ヘッダ部分に記述する (3) 別ファイルに記述する

<CSSの記述場所> CSSを記述する場所には以下の3つがある: (1) style属性の値として記述する (2) ヘッダ部分に記述する (3) 別ファイルに記述する → これが今回の課題

(3) 別ファイルに記述する: 複数のhtmlファイルに同じスタイルを適用したい時は,独立したCSSファイルを作成し,それをhtmlに読み込ませる形を取る。CSSファイルとは拡張子を「.css」とする以下のようなテキストファイルである: h2 { color:blue } このファイルの名前を aoiro.css とすると,htmlでの読み込みは以下のようにする: <html> <head>       <title>タイトル</title>       <link rel="stylesheet"            type="text/css"            href="aoiro.css" > </head> <body>       <h2>第1章</h2>       <h2>第2章</h2>       <h2>第3章</h2> </body> </html> 27 27

(3) 別ファイルに記述する: 複数のhtmlファイルに同じスタイルを適用したい時は,独立したCSSファイルを作成し,それをhtmlに読み込ませる形を取る。CSSファイルとは拡張子を「.css」とする以下のようなテキストファイルである: h2 { color:blue } このファイルの名前を aoiro.css とすると,htmlでの読み込みは以下のようにする: <html> <head>       <title>タイトル</title>       <link rel="stylesheet"            type="text/css"            href="aoiro.css" > </head> <body>       <h2>第1章</h2>       <h2>第2章</h2>       <h2>第3章</h2> </body> </html> 28 28

(3) 別ファイルに記述する: 複数のhtmlファイルに同じスタイルを適用したい時は,独立したCSSファイルを作成し,それをhtmlに読み込ませる形を取る。CSSファイルとは拡張子を「.css」とする以下のようなテキストファイルである: h2 { color:blue } このファイルの名前を aoiro.css とすると,htmlでの読み込みは以下のようにする: <html> <head>       <title>タイトル</title>       <link rel="stylesheet"            type="text/css"            href="aoiro.css" > </head> <body>       <h2>第1章</h2>       <h2>第2章</h2>       <h2>第3章</h2> </body> </html> 29 29

<色の名称> 色の指定では次に述べるRGBによる指定が推奨されているのだが,以下の16色については言葉(blue,grayなど)で指定することができる: black, silver, gray, white, maroon, red, purple, fuchsia,green, lime, olive, yellow, navy, blue, teal, aqua 30 30

<RGBとは> Webページに限らず,コンピュータ上で表現される色は,光の3原色と呼ばれる赤(red),緑(green),青(blue)の組合せで表現される。これを3色の英語名の頭文字をとって「RGBカラー」と呼ぶ。それぞれの色が0~255までの256段階の強さを持つため,理論上256×256×256=16,777,216色を表すことができる。 上記の0~255は一般には16進数を使って指定する。例えば「赤の強さが最大で,緑と青は最小」(=赤)という色は「#FF0000」と表現される。「赤と青が最小で緑が最大」(=緑)という色は「#00FF00」と表現される。 31 31

<RGBとは> Webページに限らず,コンピュータ上で表現される色は,光の3原色と呼ばれる赤(red),緑(green),青(blue)の組合せで表現される。これを3色の英語名の頭文字をとって「RGBカラー」と呼ぶ。それぞれの色が0~255までの256段階の強さを持つため,理論上256×256×256=16,777,216色を表すことができる。 上記の0~255は一般には16進数を使って指定する。例えば「赤の強さが最大で,緑と青は最小」(=赤)という色は「#FF0000」と表現される。「赤と青が最小で緑が最大」(=緑)という色は「#00FF00」と表現される。 32 32

<RGBとは> Webページに限らず,コンピュータ上で表現される色は,光の3原色と呼ばれる赤(red),緑(green),青(blue)の組合せで表現される。これを3色の英語名の頭文字をとって「RGBカラー」と呼ぶ。それぞれの色が0~255までの256段階の強さを持つため,理論上256×256×256=16,777,216色を表すことができる。 上記の0~255は一般には16進数を使って指定する。例えば「赤の強さが最大で,緑と青は最小」(=赤)という色は「#FF0000」と表現される。「赤と青が最小で緑が最大」(=緑)という色は「#00FF00」と表現される。 33 33

<html> <head> <title>タイトル</title> <style type="text/css">    h1 { color:#FF0000 }    h2 { color:#0000FF }    p { color:#00FFFF } </style> </head> <body> <h1>HTML入門</h1> <h2>第1章</h2> <p>まずはじめに...</p> <h2>第2章</h2> <p>次にここでは...</p> </body> </html> <文字色の指定> 先ほどの「color:blue」をRGBの16進数を使って表し,かつ他の要素には他の色を指定する場合,例えば左のようにする。 34 34

<背景色の指定> <html> <head> <title>タイトル</title> <style type="text/css">    h1 { color:#FF0000 ; background-color:#aaccff}    h2 { color:#0000FF ; background-color:#3300aa}    p { color:#00FFFF ; background-color:#ffcc00} </style> </head> <body> <h1>HTML入門</h1> <h2>第1章</h2> <p>まずはじめに...</p> <h2>第2章</h2> <p>次にここでは...</p> </body> </html> <背景色の指定> 背景の色を指定する場合は background-color プロパティを使用する。h1,h2,pの文字色はそのままに,それぞれ違う背景色を指定する場合は例えば左のようにする。文字色,背景色のように,2つ以上のプロパティを設定する時は間に「;」を入れる。 35 35

<クラスを使った設定> 「クラス」にスタイルを設定し,クラスを各要素に適用するという書き方もある。先ほどの書き方だとh1とh2それぞれに文字色・背景色を設定しなければならなかったが,この書き方だとakairoというクラスに指定するだけで済む。気が変わって他の色にしたくなったときakairoの部分だけ変えれば良いので楽である。classはCSSで頻繁に用いられるのでよく覚えておくこと: <html> <head> <title>タイトル</title> <style type="text/css">    .akairo { color:#FF0000 ; background-color:3300aa } </style> </head> <body> <h1 class="akairo">HTML入門</h1> <h2 class="akairo">第1章</h2>   <p>まずはじめに...</p> <h2 class="akairo">第2章</h2>   <p>次にここでは...</p> </body> </html> 36 36

<ページの一部をまとめて 設定:div> <html> <head> h1,h2など要素ごとに設定するのではなく,Webページの一部をまとめて設定したい時は<div>タグを用いる。即ち,スタイルを設定したい部分を<div>と</div>で囲み,それにクラスを適用する。このdivタグもCSSで多用されるのでよく覚えておくこと。 <html> <head> <title>タイトル</title> <style type="text/css"> .akairo { color:#FF0000 } .midori { color:#00FF00 } </style> </head> <body> <h1>HTML入門</h1> <div class="akairo"> <h2>第1章</h2> <p>まずはじめに...</p> </div> <div class="midori"> <h2>第2章</h2> <p>次にここでは...</p> </body> </html> 37 37

<ページの一部をまとめて 設定:span> <html> <head> <title>クラス</title> <style type="text/css"> .akairo { color:#FF0000 } .midori { color:#00FF00 } </style> </head> <body> <h1>HTML入門</h1> <h2>第1章</h2> <p>まず<span class="akairo">htmlの仕様</span>を定義    する<span class="midori">W3Cについて</span>述べる</p> </body> </html> <ページの一部をまとめて   設定:span> 先ほどの<div>で囲んだ場合は改行される。テキスト中の一部分など,改行したくない箇所は<div>ではなく<span>を用いる。 38 38

<文字の大きさ> 文字の大きさはfont-sizeプロパティで指定する。指定の仕方はいくつかあるが数値+単位で指定すると柔軟なデザインが可能となる。以下の単位が使用できる; pt:ポイント(1ポイントは72分の1インチ) px:ピクセル数 cm:センチメートル mm:ミリメートル in:インチ(1インチは約2.54センチメートル) pc:パイカ(6分の1インチ) em:1階層上のタグに適用されている文字の          大きさに対する割合 ex:小文字のxの高さに対する大きさの割合 %:親要素のフォントのサイズに対する割合 39 39

例えばh1要素を48ptにし,箇条書きを14ptにしたいときは以下のようにする: <html> <head> <title>クラス</title> <style type="text/css"> h1 { font-size:48pt } ul { font-size:14pt } </style> </head> <body> <h1>ここを48ptで表示</h1> <ul> <li>箇条書き1は14pt <li>箇条書き2は14pt </ul> </body> </html> 40 40

<斜体・太字> 文字を斜体,太字にしたいときはfont-styleプロパティの値をそれぞれitalic,boldにする。例えば以下のようにする: <html> <head> <title>クラス</title> <style type="text/css"> h1 { font-style:italic } p { font-style:bold } </style> </head> <body> <h1>ここは斜体</h1> <p>ここは太字</p> </body> </html> 41 41

<枠線> CSSを使うとテキストの周りに枠線を付けることもできる。例えば以下のようにborder-styleプロパティを設定すると,テキストを点線で囲むことができる: <html> <head> <title>クラス</title> <style type="text/css"> h1 { border-style:dotted } </style> </head> <body> <h1>この周りに点線</h1> </body> </html> 42 42

border-styleプロパティに設定できる値は以下の通りである: dotted 点線 dashed ダッシュ solid 1本線 double 2本線 groove 窪んだ線 ridge 盛り上がった線 inset 枠線内が窪む outset 枠線内が盛り上がる none (枠線無し) また枠線にはborder-widthプロパティで太さを,border-colorプロパティで色を指定することもできる。 43 43

<2段組やマウスのロールオーバー> CSSを使って2段組のページを作ったり,マウスのポインタが上に来ると色が変わるようにする場合は以下の2ファイルを参考にすること: http://slis.sakura.ne.jp/sample.html http://slis.sakura.ne.jp/style3.css   上記 sample.html では左側にメニューを置き,そこからページ内のテーブルに飛ぶようにしてある。メニュー項目を図書,雑誌論文,新聞記事などにし,テーブルをそれに対応するものにすれば比較的簡単にパスファインダーが出来るかもしれない。 44 44

レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい:       レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい: http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p1.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/p2.html http://www.u.tsukuba.ac.jp/~sxxxxxx/local_only/style.css 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

46 46