画像を貼り付けたい img

画像を貼り付けたい

多くのWeb ページを見てみると、素敵なロゴや、可愛いキャラクターなど「画像」を利用して様々な演出をしています。

画像フォーマットについて

ブラウザ上では表示される「画像」フォーマットには次の3 種類があります。

「jpeg（ジェイペグ）」画像

風景画や肖像画などの自然画を圧縮するための画像形式。圧縮率は高い。

「gif（ジフ）」画像

256 限定色で、イラストやアイコンなど色数の少ない画像を高圧縮率で圧縮するのに適している。「透過」「アニメーション」なども可能。

「png/MNG（ピング）」画像

フルカラー画像の可逆圧縮で画質を全く落とさずに中程度の圧縮を実現する。

注意
PNG は「HTML」の規格を策定しているWorld Wide Web Consortium（W3C）が推奨する画像フォーマットであり、世界標準的な画像形式です。

しかし、米 UNISYS の所有していたGIF特許が日本では2004年6月20日に切れ、標準形式が見直される可能性があります。

画像フォーマットには多くのものが存在しますが、他のフォーマットは、ブラウザ上では表示されないので、フォーマット変換をする必要があります。

画像の入手先について

問題は貼り付ける「画像」をどのように入手するかです。大まかに３通りあります。

自分で「画像」を作成する
- これができれば問題ありませんが、そのためには「画像ソフト」を手に入れる必要があります。また周辺機器の購入も必要になってきます。
Web ページ「素材集」を購入する
- お金は多少かかりますが、何百種類の素材がありますので便利だと思います。
フリーの「画像」サイトから入手する
- お金もかからず、欲しい画像が簡単に手に入ります。しかしながら規約がある場合もあり注意が必要です。

本来、画像の権利は製作者にあります。Web ページ上の画像を無断で転用するのは違法行為です。

特に「3」番目については注意が必要です。

著作権についての詳細は「著作権について」を参照してください。

画像の「取り込み」とWeb ページへの「貼り付け方」

まず、利用したい画像上にマウスを合わせます。

マウスを右クリックすると、次の項目が表示されます。ここで「名前をつけて画像を保存(S)」を選びます。

取りこんだ画像のファイル名を仮に「bn_ugu.gif」とすると、次のimg要素を利用することで画像を埋め込むことが可能です。
<img src="bn_ugu.gif">

実行例は次のようになります。

また、img要素には、width属性とheight属性が存在します。これは、画像の幅や高さを指定することができます。
<img src="bn_ugu.gif" width="95" height="23">

たとえば、上のように横幅「95」画素、縦幅「23」画素で指定すると、次のようになります。

なお、これは「jpg」「png」形式でも同じです。

Web ページへの背景に用いる方法

<body>タグの中に、次のように backgound 属性を追加しましょう。
<body background="○○○○.gif">

これで、ブラウザの「更新」を押せば、視覚系ブラウザでは指定した画像が背景として表示されます。

なお、画像サイズがブラウザ画面より小さい場合、ブラウザ上では画像が敷き詰めらて表示されます。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「body要素の属性（background・bgcolor）」は今後廃止予定となっています。これらの要素・属性はスタイルシートで代価することが推奨されています。

画像を貼り付けたい img