Lecture/InfoDesignB2004/6th/image の変更点

追加された行はこの色です。
削除された行はこの色です。
Lecture/InfoDesignB2004/6th/image へ行く。
*イメージを貼り付ける [#hba34d1b]

**イメージを配置する [#r3de5825]
イメージ（画像データ）を配置するには、
''img''要素と''alt''属性を指定します。
また、''height''、''width''属性で画像の高さや幅も指定できます。
#pre(novervatim){{
COLOR(red):<img src="COLOR(blue):画像ファイルの場所・名前COLOR(red):" alt="COLOR(blue):代替テキストCOLOR(red):">
COLOR(red):<img src="COLOR(blue):画像ファイルの場所・名前COLOR(red):" alt="COLOR(blue):代替テキストCOLOR(red):" height="COLOR(blue):高さCOLOR(red):" width="COLOR(blue):幅COLOR(red):">
</pre>
}}

img要素で指定した場所に、画像を配置します。
alt属性には、画像を表示できない環境で、
画像のかわりに表示させるテキストを設定します。~
画像の内容を説明するのではなく、
画像によって伝えたい内容を設定します。
なお、画像が意味のない飾りの場合は、
「alt=""」と指定します。

画像の高さと幅は、height属性とwidth属性で、
ピクセル値を使って指定します。
どちらかだけの指定もできます。
もしピクセル値が画像のサイズより大きい場合は画像が拡大され、
ピクセル値が画像のサイズより小さい場合は画像は縮小されます。

#pre(novervatim){{
COLOR(red):<img src="COLOR(blue):logo.pngCOLOR(red):" alt="COLOR(blue):兵庫大学情報科学センターCOLOR(red):">
</pre>
}}

**文字とイメージの縦位置を調整する [#eeff9ee6]
イメージの位置を調整するには、''align''属性を指定します。
COLOR(red):なお、この方法は、現在使われているHTML4.01では推奨されていません。

#pre(novervatim){{
COLOR(red):<img src="COLOR(blue):画像ファイルの場所・名前COLOR(red):" alt="COLOR(blue):代替テキストCOLOR(red):" aligh="COLOR(blue):位置COLOR(red):">
</pre>
}}

同じ行の文字に対して、画像を表示する位置を設定できます。
次のような設定ができます。
-top: 画像の上側と文字の上側を揃える
-middle: 画像の中心と文字の下側を揃える
-bottom: 画像の下側と文字の下側を揃える

**ページ全体の背景イメージを設定する [#pe581dde]
ページ全体の背景イメージを設定するには、
body要素に''background''属性を指定します。
COLOR(red):なお、この方法は、現在使われているHTML4.01では推奨されていません。

#pre(novervatim){{
COLOR(red):<body background="COLOR(blue):画像ファイルの場所・位置COLOR(red):">
 ...
COLOR(red):</body>
</pre>
}}


**画像データの利用 [#v4b205d4]
***画像のフォーマット [#n231fcf4]
Webページ上で扱うことができる、
画像データのフォーマット（形式）には、
次のものがあります。

:GIF: Graphics Interchange Format (*.gif)|
--アイコン、バナー向き（最大で256色しか扱えない）
--透過GIFやアニメーションGIFなど機能が豊富
:PNG: Portable Network Graphics (*.png)|
--GIFファイルに代わる次世代のフォーマット（フルカラーが扱える）
--古いブラウザでは扱えない場合がある
:JPEG: Joint Photographic Experts Group (*.jpg, *.jpeg)|
--写真、イラスト向き（フルカラーが扱える）
--ファイルサイズが小さい（圧縮率を変える）

その他に、Web上では扱えないが、
パソコンで一般的に扱われるフォーマットには、
次のものがあります。
Web上で扱うには、画像を変換する必要があります。
:BMP: Bitmap (*.bmp)|
--Windows標準の画像フォーマット（「ペイント」で作成できる）
--ファイルサイズが大きい（24ビットカラーの場合）
--Webページでは使えないので、ほかの形式に変換する必要がある


***素材集の利用 [#a69f7f25]
インターネットに公開されている「素材集サイト」にアクセスして、
アイコンの素材を集めます。
ただし、
''素材集サイトを利用するときには、利用に関する注意事項を確認しましょう''。
「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。

+Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス
+「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む
+登録されているサイトにアクセスし、画像ファイルを探す
+気に入った画像があったら、画像を右クリックする
++メニューから「名前をつけて画像を保存」を選ぶ
++ファイルの保存場所を指定して、「保存」ボタンをクリック

**著作権（再掲・追加） [#qeace29f]
「''著作権''」とは、
「''著作物''」（人が創造したもの）に対して
「''著作者''」（著作物を創造した人）が持つ権利です。
原則として、
著作者の了解なしに、
著作物を複製したり販売したりしてはいけません。

-著作物とは？（一部）
--文章：小説、脚本、論文、講演
--音楽：歌詞、楽曲、舞踏
--美術：絵画、彫刻、写真、映画
--情報：Webページ、コンピュータのプログラム
-著作権はいつ発生する？
--特別な手続きは必要なし（創作した時点で自動的に発生）
--著作者の死後50年後まで有効

***参考リンク [#t67d073a]
-[[とほほの著作権入門:http://tohoho.wakusei.ne.jp/wwwcopy.htm]]
-[[しゅんしゅんの著作権講座:http://www.geocities.jp/shun_disney7/]]

&br;
&navi2(Lecture/InfoDesignB2004/6th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2004/6th,prev,toc,next)

}}
KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/6th/image の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
