TempNateトップへ > HP作成ノウハウ > 画像を表示する方法

画像表示タグ

<img> これは画像を表示するタグです。「.gif」「.jpg」でサーバーにある画像ファイルを指定します。その際は、かならず alt属性にキーワードを入れてください。

<img src="http://●●●" border="0" alt="画像のタイトル" / >

 

3種類の画像フォーマット

ホームページで使用する画像には、一般的に３つの種類があります。

.gif
.jpg
.png

 

ちなみに画像のサイズについてですが、1cmが何px（ピクセル）かについては、モニターによって変わってきます。基本的には、1cmだと、30～40ピクセル位になります。

 

 

画像にテキストを回り込ませたい

 

写真 画像の横にテキストを回り込みをする方法は、ホームページビルダーなどで、直接回り込みさせる方法です。（ img src="画像ファイル" align="left" hspace="15" vspace="5" ）など。


ただし、この方法は、Web標準レイアウトの観点からは推奨されていません。ですが、わかりやすいという場合は、この方法も１つの手だと思います

 

 

スタイルシートで回り込みを指定する方法

 

写真 こちらでは、スタイルシートで、画像の横にテキストの回り込みを指定しています。imgタグの中に、（ class="picture" ）を入れると、画像の横にテキストを回り込ませる事ができるよう指定しています。


テキストの最後に（ br clear="left" ）というタグが入っていますが、そちらを入れた所で、テキストの回り込みを解除できます。これを入れないと、下↓の見出しが、ずれます。

 

 

画像のサイズを指定する

<img src="" width="560" height="220" alt="" border="" />

画像を、横幅560ピクセル、高さを220ピクセルのサイズで表示されるように指定しています。

 

HTMLのカスタマイズ方法

HTMLとは？

DOCTYPE（文書構造の定義）

HTMLの詳細について（SEO内部要素）

フォントについて

画像表示タグ

リンク表示タグ （←次へ）

著作権リンクを表示する

メニューなどのリストを表示したい

テーブルについて

スタイルシートを指定する

 

CSS（スタイルシート）のカスタマイズ方法

スタイルシートについて

CSSの要素名について

CSSの構成について （画像で解説）

padding（内側の余白を指定する方法）

margin（外側の余白を指定する方法）

border（線の太さや、色を指定する方法）

wideth（ボックスの幅を指定する方法）

height（ボックスの高さを指定する方法）

background-color: #004080;　（ボックスの背景の色を指定する方法）

font-size （文字サイズを変更する方法）

text-align（行揃えを指定）

font-family（文字の種類を指定）

letter-spacing（字間や行間を指定）

color （リンクの色を指定する方法）

float（回り込みを指定する方法）

 

その他のホームページ基礎知識について

Webプログラミングの種類

人気のWebアプリケーションについて

インターネット広告の種類について

ホームページ運営上の注意点など

 

ホームページビルダーを使用した場合のHP作成方法

ホームページビルダーでのホームページ作成方法

ホームページビルダーのHPテンプレート編集方法

 

alpha Edit を使用した場合のHP作成方法

alpha Edit でのホームページ作成方法

alpha Edit のHPテンプレート編集方法

 

メモ帳などのエディターソフトを使用した場合のHP作成方法

メモ帳などのエディターソフトを使用した場合のホームページ作成方法