Comments
Description
Transcript
配布資料
コンピュータ基礎実習(上級) 第 3 週 「コンピュータ基礎実習(上級)」第 3 週 色の設定と画像の利用 今回の授業は、HTML での色の表現と、画像表示について学びます。 1. HTML における色の表現 HTML で文字の色や背景の色などを設定する際、色を表現するために２種類の表現方法があります。 それは [カラーネーム] と[カラーコード] です。 1.1. カラーネームとは red yellow green blue といった色の名前で指定する方法です。 直感的に指定できますが、表現できる色に限りがあります。 1.2. カラーコードとは #00FF00 や #8080A0 のように#に続けて６桁の 16 進数数値で色を指定する方法です。 16 進数がやや難解ですが、コンピュータが出せる全ての色（約 1,600 万色）を指定できます。 カラーネームやカラーコードに関する詳しい説明は、清水の基礎実習ページ内の[HTML における色の表現] ページを参照してください。 基礎実習ページ内の[資料]コーナーまたは、以下のアドレスでアクセスできます。 http://www.cc.kyoto-su.ac.jp/~shimizu/MAKE_HTML/tag_color.html 2. 色にまつわる HTML タグ解説 2.1. ページ全体の色を設定する ウェブページの背景色 や 文字色 を設定できます。効果範囲はページ全体に及びます。 ページの基礎デザインを行う際に便利です。 設定方法は<body>タグに以下のように属性を追加します。 HTML ブラウザ画面出力 <body bgcolor="black" text="green"> bgcolor でページ背景の色が黒(black)、 text で文字の色が緑(green) になります。 上記の例ではカラーネームを使用していますが、もちろんカラーコードも使用できます。 (例) <body bgcolor="#e0e0ff"> 2.2. 一部の文字の色を設定する 文章中の特定の文字だけ色を変えるには <font> タグと color 属性を使います。 <font>～</font>で囲われた範囲に効果があります。 HTML ブラウザ画面出力 きわめて<font color="red">重要</font>です。 きわめて重要です。 上の例では 重要 という文字の色が赤くなります。 他のタグと重ねて使うことも出来ます。 (例) きわめて<font color="red"><b>重要</b></font>です。 重要 という文字が太字かつ赤色になります。 <h1><font color="red">第一章</font>はじめに</h1> 第一章 という見だしの文字が赤色になります。 作りたいサイトに合った色にデザインすると良いでしょう。 3. ページに画像を挿入する HTML ではページ上に好きな画像を表示させることが出来ます。 画像を表示するには <img> タグを使用します。 しかし、画像を扱うにはいくつかの注意点があります。 3.1. 画像を扱う際の注意点 ウェブページ上で使用する画像は、以下のようなルールを守ってください。 1. 画像は別途、画像ファイルとして用意してください。 2. ファイル名に全角文字は使えません。 ファイル名には半角英数文字を使ってください。 3. 画像のデータ形式は、[JPG 形式] か [GIF 形式] か [PNG 形式] のいずれかが使用できます。 4. ページに使用する画像ファイルは全て public_html フォルダ以下にアップロードしてください。 ルールが守られていないと、画像にアクセスできず、ページが正しく表示されない場合があります。 -1- コンピュータ基礎実習(上級) 第 3 週 3.2. 画像ファイルのデータ形式 ウェブページで使用できる画像のデータ形式は [JPG 形式] か [GIF 形式] か [PNG 形式] のいずれかですが、それ ぞれ特徴があります。 詳しくは 清水の基礎実習ページ内の[画像ファイルのデータ形式] ページを参照してください。 基礎実習ページ内の[資料]コーナーまたは、以下のアドレスでアクセスできます。 http://www.cc.kyoto-su.ac.jp/~shimizu/MAKE_HTML/image_format.html 3.3. 画像を用意する方法 画像はいくつかの方法で用意できます。 画像編集ソフトウェア(ペイントツールや Paint.net など)を使って描く。 画面に映っている映像の一部を切り取って使用する。(画面キャプチャー) 携帯カメラの写真やスキャナで取り込んだ写真などを利用する。 それぞれの方法を解説します。 3.4. 自分で絵を描く 画像編集ソフトウェアを使って自分で絵を描くことができます。 その際は以下のようなポイントに注意しましょう。 1. ペイントを使用する場合、[スタート] → [全てのプログラム] → [アクセサリ] → [ペイント] で起動できます。 2. 作成する画像の大きさ(面積)に注意！ 画像は実寸大でページに表示されます。よって画像の大きさはおよそ画面の８分の１程度が良いでしょう。 ペイントの場合は画面の白い部分(キャンバス)の右下角をドラッグして大きさを調整できます。 3. 保存をする際は、ファイルの形式を JPEG GIF PNG 形式のどれかにすること。 4. 保存ファイル名は半角英数文字にすること。 (例) diary.jpg mycat-01.png など 5. 保存場所は HTML ファイルからアクセスできる場所にする。public_html フォルダ以下のどこかにすること。 3.5. 画面の一部を切り出す(画面キャプチャー) Windows Vista 以降であれば、[Snipping Tool] を使うと、画面の一部分を 切り出して、画像として保存できます。 例えば画面操作の様子を画像にして保存したり、 Snipping Tool WORD 等で作成したワードアートを画像として保存したりできます。 1. Snipping Tool の起動： [スタート] → [すべてのプログラム] → [アクセサリ] → [Snipping Tool] 2. [新規作成] ボタンが押されている状態で、画面上をドラッグ。(ドラッグした範囲が画像として切り出される。) 3. ディスクのマーク をクリックして保存。 他のアプリケーションの画面表示などからウェブページ用の画像を調達できます。 (練習) WORD で作成したワードアートを Snipping Tool で切り出し、ページ上に画像として掲載しましょう。 3.6. img タグの詳細 <img>タグを使ってページに画像を表示できます。<img>タグは以下のように使用します。 <img src=”画像ファイル名” alt=”説明文” width=”画像の縦ピクセル数” height=”画像の横ピクセル数” > src 属性で表示する画像のファイル名を指定します。 src 属性以外は省略することができます。 (例) <img src=”title.jpg” > alt 属性には何らかの問題で画像が表示できない場合に代わりに表示されるメッセージを記入します。 メッセージはマウスカーソルを画像にかざした時にも表示されます。 その他 視覚障害者用ブラウザ等がページを読み上げる時、画像の代わりとして読み上げられます。 width と height 属性を指定すると、元の画像サイズを無視して指定の大きさで画像を表示されます。 ただし画像データは全てダウンロードされてから閲覧者のブラウザで拡大縮小処理が行われるので、 ダウンロードされるデータ量を節約することにはなりません。 3.7. 画像ファイル指定方法 (パスについて) 画像ファイルは、ウェブサーバーにアップロード済みのものを <img>タグの src 属性で呼び出します。 この時、正しく画像を呼び出すためにはファイルが存在する場所を正確に指定する必要があります。 このファイルの場所を指定する方法のことを[パス] (path)と言います。 -2- コンピュータ基礎実習(上級) 第 3 週 そして、状況によっていくつかの種類のパスを使い分けることがあります。 パスはウェブページを作る上でとても大切なことですので理解しておきましょう。 (パスは画像を呼び出す場合のほか、他のページにリンクを作る際にも使います。) 3.8. 相対パス [相対パス]は、基準となるファイルから見た位置関係の表し方です。 相対パスを使うにあたっては、いくつかの約束事があります。 (以下の４つを覚えればＯＫです。) フォルダは [フォルダ名/] (スラッシュ) で表す。 今いるフォルダは [ ./ ] (ドットスラッシュ)で表す。 一つ上のフォルダは [ ../ ] (ドットドットスラッシュ) で表す。 パス先頭の[ ./ ] は省略できる。 例えばフォルダの構造が図のようになっているとします。 public_html menu image 現在 index.html を編集中だとします。(つまり基準となるファイルは index.html です) この時… index.html と同じフォルダ内にある top.gif を指定するには <img src="./top.gif"> と書きます。 先頭の ./ は省略できるので、 <img src="top.gif"> と書いてもＯＫです。 image フォルダの中にある title.gif を指定するには <img src="./image/title.gif"> と書きます。 やはり先頭の ./ は省略できるので、 <img src="image/title.gif"> と書いてもＯＫです。 現在 pic.html を編集中だとします。(つまり基準となるファイルは pic.html です) この時… pic.html と同じフォルダにある face.jpg は <img src="./face.jpg"> または./を省略して <img src="face.jpg"> で指定できます。 一つ上位のフォルダ(public_html) にある top.gif を指定するには <img src="../top.gif"> のように [ ../ファイル名 ] で指定できます。 隣の image フォルダの中にある title.gif を指定するには <img src="../image/title.gif "> で指定できます。 相対パスは、相互の位置関係が正しければ動作するので、 フォルダ全体を別の場所に移動してもそのまま動作するのがメリットです。 小規模サイトでも画像ファイルの数は数百に及ぶことがありますので、フォルダなどにまとめると便利です。 このようなとき相対パスでフォルダ内の画像ファイルを呼び出す必要が生まれるでしょう。 3.9. 絶対パス指定 [絶対パス]は、どこから見ても同じ表記になる位置関係の表し方です。 具体的には、http://から始まるアドレス(URL) を使って記述します。 <img>タグで表現すると、 <img src="http://www.cc.kyoto-su.ac.jp/~shimizu/image/email.gif"> のように指定します。 画像にアクセスするのに必要な URL を http://から全て記入してください。 絶対パスは他のサイトから画像ファイルを読み込んだりリンクしたりする際に使います。 -3- コンピュータ基礎実習(上級) 第 3 週 4. 課題 自己紹介文の作成 のつづき 前回の授業に引き続いて作成途中の 自己紹介ページについて ページ内に img タグを使って画像を追加してください。 自画像や自己紹介の内容にまつわるイラスト等がよいでしょう。 次回以降の授業で行う内容を更に追加した後、最終的に提出となりますので そのつもりで作業を行ってください。 以上 -4-