Top > Lecture > CompPracR2003 > 14th
AND OR

コンピュータ演習（再） 第14回

▲ ▼

画像ファイル

▲ ▼

画像ファイルの種類

  • GIFファイル(*.gif)
    • アイコン向き（256色しか扱えない）
    • Compu Serve（現在はAOL）が定められたフォーマット
    • 透過GIFやアニメーションGIFなど機能が豊富
  • JPEGファイル (*.jpg, *.jpeg)
    • 写真やイラスト向き（フルカラーが扱える）
    • ファイルサイズが小さい（圧縮率を変える）
  • PNGファイル (*.png)
    • GIFファイルに代わるフォーマット
    • GIFファイルあるUnisysの特許問題を避けるために定められた
  • BMP（ビットマップ）ファイル (*.bmp)
    • Windows標準の画像フォーマット（「ペイント」で作成できる）
    • ファイルサイズが大きい
    • Webページ向きではない（ほかの形式に変換）
▲ ▼

著作権

▲ ▼

著作権とは

  • 著作権とは？
    • 「著作者」が「著作物」に対して持つ権利（「著作権法」より）
    • 著作者に無断で第三者に公開することはできない
  • 著作物とは？（一部）
    • 小説、脚本、論文、講演
    • 音楽（曲、歌詞）、舞踏
    • 絵画、彫刻、写真、映画
    • コンピュータのプログラム
  • 著作者とは？
    • 著作物を創作した人
  • 著作権はいつ発生する？
    • 特別な手続きは必要なし（創作した時点で自動的に発生）
    • 著作者の死後50年後まで有効
  • 参考リンク
▲ ▼

画像ファイルの利用

▲ ▼

画像ファイルの用意

インターネットに公開されている「素材集サイト」を利用して、 画像ファイルを用意します。 素材集サイトを利用するときには、利用に関する注意事項を確認しましょう。 「著作権フリー」のように、再利用が許可されているかどうかにに注意しましょう。

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

画像ファイルの表示

画像をWebページに貼り付けるには、<img>タグを使います。

  • <img src="...">
    • Webページに表示する画像ファイルを指定します。
    • 「src=」の後には、画像ファイルの場所（URL）を指定します。
    • 「alt=」の後には、画像の名前を入力します。 
      <img src="画像ファイルの場所" alt="画像ファイルの名前" width=XXX height=XXX>
<img src="title.gif" alt="タイトル" width=300 height=60>
    • 「width」と「height」は、画像の幅と高さのサイズを指定します（省略可能）。
▲ ▼

背景画像の表示

背景画像を表示するには、スタイルシートを使います。

  • <body>タグにbackground-image属性を指定します。 
    <style type="text/css">
<!--
  body {color: black; background: white; background-image: url(ファイルの場所);}
  • 参考リンク
▲ ▼

表によるレイアウト

HTMLには「表」を作る<table>タグがあります。 本来の目的は表を表示するためのものですが、 この機能を使って、Webページの内容をブロック状にレイアウトすることができます。

メインメニュー
サブメニューコンテンツ（内容）
署名
  • <table>...</table>
    • テーブル（表）を設定します。
    • 「<table border=X>」でテーブルの枠の太さを指定できます。数字を指定し0にすると枠線が見えなくなります。
  • <tr>...</tr>
    • テーブルのひとつの行を設定します。
  • <td>...</td>
    • テーブルのひとつのマス目を設定します。 
       <table border=1>
   <tr><td>1</td><td>2</td><td>3</td></tr>
   <tr><td>4</td><td>5</td><td>6</td></tr>
 <table>
      123
      456
▲ ▼

参考リンク
リロード   差分   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: Tue, 11 Mar 2014 20:20:22 JST (3699d)