HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > 初心者講座 > 画像をページに貼る。
様々なブックマークサービスがご利用頂けます。

■　画像をページに貼る。

本稿では、ページに画像を貼る方法と、画像ファイルと、その後にテキストがある場合、画像ファイルとテキストとの位置関係について解説します。
⇒　画像ファイルの貼り方の詳細説明ページ
■ img要素
ソース  ソース
<img src="img/jw0001.jpeg" alt="犬の写真" width="100" height="75">
表示  表　示
犬の写真
画像ファイルを、ページ上に表示するには、img 要素 を使い、src属性の値に、画像ファイルの場所とファイル名を、相対URI 又は絶対URI で指定します。
ここでの相対URIとは、画像を貼るHTMLファイルから、画像ファイルの置いてある場所までを相対的にパスを指定する方法で、絶対URIとは、http://から、画像ファイルまでのパスを指定する方法を指します。
⇒ ファイルの場所、パスの指定
上記のサンプルソースでは、相対URIで指定しています。img フォルダにある、jw0001.jpeg ファイルを指定しています。絶対URIで指定する場合は、http://homepagelecture.web.fc2.com/imasara_html/img/jw0001.jpeg と記述します。
また、ホームページで使われる画像ファイルは、GIF、JPEG、BMP、PNG形式などが一般的です。
alt属性には、画像ファイルの代替テキストを指定します。
width属性、height属性には、画像ファイルの横幅( width )と高さ( height )を、ピクセル又は、パーセンテージ値( % )で指定します。ピクセルで指定する場合、単位の px は必要ありません。
ポイント alt属性
img要素をページに使用する場合、alt属性の指定が必須です。代替テキストとは、訪問者が、何らかの原因で、指定した画像ファイルが読み込めない、又は、画像の表示に対応していない環境でブラウジングする場合の、その画像ファイルの内容を代替する文章を指します。
また、意味を持たない画像(ホームページの装飾など、デザイン上に使用する画像)は、alt="" と、属性値を空にして、この画像は意味を持たない画像であることを定義する事が推奨されています。
ポイント width属性、height属性
width属性と height属性は必須の属性ではありませんが、指定するようにしましょう。
訪問者のブラウザがページを読み込む際、予め画像サイズを指定しておけば、画像の読み込みを待たずに、画像サイズ分の領域を開け、先に他の要素を読み込む事が出来ます。結果、ページ全体の表示体感速度が早くなります。
■ 画像に枠線を表示 border属性
画像に枠を表示します。border属性の指定が無い場合、通常、枠線は表示されませんが、画像にリンクを指定した場合、枠線が表示される事があります。この場合、枠線が必要無ければ、border属性値に『 0 』を指定します。
ソース  ソース
<img src="img/jw0001.jpeg" alt="犬の写真" width="100" height="75" border="1">
ポイントborder属性
border属性は、非推奨属性なので、スタイルシートの border-widthプロパティで代替指定する事が推奨されています。

■ 画像とテキストの回り込み
align属性値に、left right を指定する事で、テキストを回り込ませる位置を指定できます。
値
  • left (画像の右側からテキストが回り込む)
  • right (画像の左側からテキストが回り込む)
ソース  ソース
<img src="img/jw0002.jpeg" alt="" width="50" height="38" align="right">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
表示  表　示
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
※親要素に、width="300" を指定し表示しています。
スペース
■ clear属性
br要素に clear属性を指定することで途中で回り込みを解除することができます。
値
  • none (通常の改行)
  • left (align="left" の回り込み解除。指定後のテキストは画像の下の行に表示される。)
  • right (align="right" の回り込み解除。指定後のテキストは画像の下の行に表示される。)
  • all (align属性値 left、rightに関係なく回り込み解除。指定後のテキストは画像の下の行に表示される。)
ソース  ソース
<img src="img/jw0002.jpeg" alt="" width="50" height="38" align="right">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br clear="right">××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××
表示  表　示
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××
※親要素に、width="300" を指定し表示しています。
ポイント clear属性
clear属性は、CSS の clearプロパティで代替指定することが推奨されています。
■ 画像とテキスト align属性 値 上下位置
align属性値に、top middle bottom texttop absmiddle absbottom baselineを指定する事で、テキストと画像の上下方向の揃え方を指定できます。また、指定しない場合の初期値は bottom に設定されています。
値
  • top (テキストと画像を上揃え。)
  • middle (テキストと画像を中央揃え。)
  • bottom (テキストと画像を下揃え。)
  • texttop (同じ行の一番高い位置にあるテキストに上揃え)
  • absmiddle 
    (同じ行の一番高いテキストや画像の上端と、一番低いテキストや画像の下端の中央に画像の中央を合わせます。)
  • absbottom 
    (同じ行の一番低いテキストや画像の下端に画像の下端を合わせます。)
  • baseline (テキストをベースラインに揃えます。)
ソース  ソース
<img src="img/jw0002.jpeg" alt="" width="50" height="38" align="top">○○○○○○○○○○
表示  表　示
○○○○○○○○○○
ポイント align属性 上下方向位置
これらの属性値は非推奨のため、CSS の vertical-align プロパティで代替指定することが推奨されています。
■ 画像周辺の余白
hspace属性で、画像の左右の余白、vspace属性で画像の上下の余白を指定します。値はピクセルで指定しますが、単位の px は必要ありません。
ソース  ソース
<img src="img/jw0002.jpeg" alt="" width="50" height="38" hspace="10" vspace="10">
表示  表　示
ポイント hspace属性　vspace属性
これらの属性は、非推奨属性なので、スタイルシートの marginプロパティで代替指定する事が推奨されています。

Lesson1  >>  Lesson2 >>  Lesson3 >>  Lesson4 >>  Lesson5 >>  Lesson6 >>  Lesson7 >>  Last Lesson >>  Lesson 実践
(C) いまさらHTML CSS講座 2002-2008 All right reserved