Nagai.AP TOP ■観光案内 ■行政案内 ■企業紹介 ■お店紹介
■イベント ■各種募集 ■会員紹介 ■サークル
ホームページの制作方法へBack

画像を入れよう
  • 使える画像形式
  • 画像の表示方法
  • 画像配置の基本
  • 画像配置の応用
  • 背景画像


    • 使える画像形式
    ホームページに張り付ける画像は、    GIF、または、JPEGを使用します。GIFには、通常のGIFとインターレースGIF、透過GIFがあります。また、JPEGには通常のJPEGとインターレースJPEGがあります。インターレースとは次第に表示される表示方法で、透過とは、画像のなかの１色を透かしてみる表示方法です。
    GIFはグラフィック対応のすべてのブラウザで表示することができます。1,677万色中、256色を表示し、256色以下のGIFも作ることができます。JPEGは圧縮効率が高く、1,677万色を扱える為、写真等色数の多い場合に適しています。下記に画像の例をあげてみましょう。

    通常のGIF

    インターレースGIF

    透過GIF

    透過インターレースGIF

    通常のJPEG

    インターレースJPEG


    画像の表示方法
    表示したい場所へ    <IMG SRC="画像の名前.拡張子">と入力します。この場合、HTML文書が同じディレクトリにある場合はこのままでかまいません。

    下層にディレクトリがある場合

    ディレクトリ

    　　　├─「gazou」

    　　　│　　　│

    　　　│　　　└─sample.gif

    　　　│

    　　　└─html文書（****.htm,****.html）

    このような場合は<IMG SRC="gazou/*****.gif">と入力します。

    また、階層が違うディレクトリの場合

    ディレクトリ

    　　　├─「gazou」
    　　　│　　　│

    　　　│　　　└─sample.gif

    　　　│

    　　　└─「base」　　　

    　　　　　　　│　　

    　　　　　　　├──home.htm

    　　　　　　　│

    　　　　　　　└──link.html

    この場合、 home.htm に sample.gif という画像を張り付ける場合は、<IMG SRC="../gazou/sample.gif">と入力します。「../」によって、上の階層であることを指示する為です。
    市販のホームページソフト
    ここに掲載しているのは市販のホームページ作成ソフトの一例です。なくても作れますが、より簡単に高機能なものを目指す場合は参考にしてみて下さい。雑誌の付録等で体験版を配っているものもあります。
    　ホームページビルダー　IBM
    　Golive　Adobe

    画像配置の基本
    <IMG SRC="ファイル名" ALT="テキスト">
    画像が表示されないブラウザのために代替テキストを入れておきます。

    記入例：<IMG SRC="****.gif" ALT="ホームアイコン">

    <IMG SRC="ファイル名" WIDTH=数字 HEIGHT=数字>
    表示される画像サイズを指定します。数字はピクセル数です。これを入れておかないと、画像を読み込むまでブラウザは文章を読み込みません。できるかぎりスムーズに表示する為にも、画像サイズを入れておくようにしましょう。

    たとえば、と表示する為には、

    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="BOTTOM" NATURALSIZEFLAG="3">と入力します。

    画像配置の応用
    画像に揃える配置
    画像の横の文章を、画像の上部揃えするには    <IMG SRC="ファイル名" ALIGN="TOP">
    これが例文です。

    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="TOP" NATURALSIZEFLAG="3">これが例文です。

    画像の横の文章を、画像の中心揃えするには<IMG SRC="ファイル名" ALIGN="MIDDLE">

    これが例文です。

    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="MIDDLE" NATURALSIZEFLAG="3">これが例文です。</P>

    画像の横の文章を、画像の下揃えするには<IMG SRC="ファイル名" ALIGN="BOTTOM">

    これが例文です。

    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="BOTTOM" NATURALSIZEFLAG="3">これが例文です。

    画像に揃える配置
    文章の右側に、画像を割り込ませる場合は下記を入力します。
    <IMG SRC="ファイル名" ALIGN="RIGHT">

    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="RIGHT" NATURALSIZEFLAG="3">これが例文です。このようにまわりこんで表示されます......

    これが例文です。このようにまわりこんで表示されます。ただし、見る側のブラウザの幅で大幅に表示が変わりますので、ブラウザの大きさを変えて、確かめてみた方がいいでしょう。

    <IMG SRC="ファイル名" ALIGN="LEFT"><IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="LEFT" NATURALSIZEFLAG="3">これが例文です。このようにまわりこんで表示されます......

    これが例文です。このようにまわりこんで表示されます。ただし、見る側のブラウザの幅で大幅に表示が変わりますので、ブラウザの大きさを変えて、確かめてみた方がいいでしょう。


    文章の回り込み解除
    回り込みを途中で解除したい場合は、    <BR CLEAR> を使います。以後の文章は画像の下に表示されるようになります。
    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="RIGHT" NATURALSIZEFLAG="3">これが例文です。このようにまわりこんで表示されます。

    <BR CLEAR>タグを入れてみました。

    これが例文です。このようにまわりこんで表示されます。
    タグを入れてみました。

    画像に枠をつける
    画像の外側に数字ピクセル分の枠をつけます。0は線がひかれません。
    <IMG SRC="ファイル名" BORDER="数字">

    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="2">

    <IMG SRC="im/i06.gif" WIDTH="200" HEIGHT="50" ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="10">

    画像のページ比表示する
    <IMG SRC="ファイル名" WIDTH=ページ幅対比 HEIGHT=ページ幅対比>
    画像のサイズを画面に比例した大きさで表示する場合に使用します。100％以上は画面からはみだしてしまいますので使用しない方がいいでしょう。またブラウザの大きさで左右されるので、イメージは変わりやすくなります。

    と表示するには、<IMG SRC="im/i06.gif" WIDTH="30%" HEIGHT="10%" ALIGN="BOTTOM" NATURALSIZEFLAG="0">と入力します。

    背景画像について
    背景画像は、<BODY>タグに「BACKGROUND="ファイル名」を付け加えて入力します。
    <BODY BACKGROUND="ファイル名">

    こちらも<BODY BACKGROUND="***.gif">として入力しますが、通常の画像と同じように、上の階層であれば<IMG SRC="../******/*****.gif">と入力するようにして下さい。

    ホームページの制作方法へBack　次へ
    Nagai.AP TOP ■観光案内 ■行政案内 ■企業紹介 ■お店紹介
    ■イベント ■各種募集 ■会員紹介 ■サークル