HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード
HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)

HTMLタグボードトップ >> ゼロから始めるホームページ作成講座 >> 実際に作ってみよう >> 画像を挿入する
お問い合わせはこちら サイトマップはこちら

実際に作ってみようメニュー
1.初期設定をする
2.ファイルの新規作成
3.背景を設定する
4.文字に変化を与える
5.表を作成する
6.画像を挿入する
7.リンクを指定する
8.ファイルを保存する

画像を挿入する [タグ編]

[ ソフトで編集 ] [ 直接タグで編集 ]

画像を用意する

まずは、挿入したい画像を用意します。画像の保存場所は前述の作業フォルダ「マイドキュメント\web\img」の中に保存してください。


画像の種類を見極める

一口に画像と言っても、インターネットで扱える種類は数種類あります。ここで確認しておきましょう。


種類 最大色数 圧縮方法 特徴
GIF 256色 可逆圧縮

画像を透明化できる。最大色数が少ないが、その分容量を抑えられる。多くの色数を必要としないイラストなどに向いており、WEBサイト用として最適で、一番使用されている。

JPEG 1677万色 不可逆圧縮

最大色数が多いながら、画像の圧縮率が高い。多くの色数を必要とする写真などに向いている。圧縮率が高いと画像が荒くなるところが欠点。

PNG 280兆色 可逆圧縮

鮮明な画像を表示できる反面、容量が大きい。ブラウザによっては対応していないので、WEBサイトには不向き。

※詳しくは「WEB画像について - HTMLクイックリファレンス」

以上より、WEBサイトにはGIF、JPEGを使用するようにしましょう。


画像を挿入する

それでは、実際に画像を挿入してみましょう。ここではタグで直接編集する方法を紹介します。


完成例
トップロゴ

画像の回り込みは右寄せ。


操作手順

デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。
起動したら、以下の文字を入力するか、コピーして貼付(コピー&ペースト)をする。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta
http-equiv="Content-Style-Type" content="text/css">
<title>画像を挿入しよう</title>
</head>
<body>

<!--画像の挿入タグ例-->
<img src="./logo.gif" width="140" height="53" border="1" hspace="5" vspace="5" align="right" alt="トップロゴ">画像の回り込みは右寄せ。
<!--ここまで-->

</body>
</html>

記述手順

黒字で表示している部分が、今回の画像の挿入を表すタグです。<img>というタグに注目してください。タグは基本的に最後に</...>で閉じる必要がありますが、IMGタグは閉じません。また、「src=""」の中は画像の場所を指定します。用意した画像へのリンクを相対パスまたは絶対パスで指定します。
さらに、画像の説明のための属性は「alt=""」で指定します。これは必ず記入するようにしてください。


※各属性について詳しくは
リンクタグ:HTMLタグ辞典を参照してください。

※画像へのリンクの記述方法について詳しくは
画像にリンクをつける:HTMLタグ辞典を参照してください。


☆ココがポイント!

「位置揃え(align)」の指定を変えると、画像に対する文字の表示位置が変わります。
さらに、枠を表示したくない場合は、「border="0"」とします。
なお、代替テキスト(alt)に記入した説明文は画像の上にマウスを乗せると表示されます。


<< 前のページ 1 2 3 4 5 6 7 8 次のページ >>

画面のトップへ戻る

こんな時どうする?

画像の仕組みをもっと知りたい

画像の仕組み (紹介サイトへ)

WEB画像について - HTMLクイックリファレンス
画像のデジタル化 - 情報化機器と情報社会


こんな時どうする?

画像を背景に使用するには?

背景画像を指定する

実際に作ってみよう:背景を挿入する - HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

画面のトップへ戻る

ゼロから始めるホームページ作成講座のトップへ

必要なものを揃えよう
伝えたい情報を考えよう
仕組みを理解しよう
実際に作ってみよう
作ったファイルを公開しよう
製作にあたり注意すべきこと
練習問題にチャレンジ!

訪問者優位のWEBデザインTipsのトップへ

インターネットで小遣い稼ぎのトップへ

今すぐ使える!便利ツールのトップへ