HTML備忘録(3)
画像の設定

　

画像の挿入(挿入の留意点)

• 画像の大きさを決める。[width] [height]のピクセル数を決める。

• 画像に枠を付けるか、付けないかを決める。付ける場合枠の幅(border)を決める。
  付けない場合の指定も必要となる。

• 画像名を表示する位置を決める。
  　[top] [middle] [bottom]

• 　　[left] [right]

• 画像の余白を設定する。
  　　[hspace] [vspace]

• 画像挿入時の[絶対パス] [相対パス]の選択を誤らないようにする。
  　

  画像の挿入(画像を表示するタグ)

  画像を挿入するには、<img src>を使います。[img]は、[image(画像の略)]で、[src]は、[source(出典)]の意味です。タグの書き方は、<img src="写真.jpg">で、終了タグは要りません。フアイル形式には、[gif][jpg][png]などがありますが、一般的には[jpg]を使います。フアイルの指定方式には、[絶対パス]と[相対パス]があります。HTMLでフアイル名を指定する方法には[絶対パス]と、[相対パス]の二通りの方法があります。
  [パス]とは英語のPathの事で[道筋]又は[通り道]等の意味で、フアイルが有る場所への道筋という意味合いです。
  [絶対パス]は、URLを指定する方法です。[相対パス]は、自分のフオルダにあるフアイルを指定する場合に使いますが、指定しているフアイルと、指定されているフアイルの[相対的な位置関係]によって変化しますので、出来るだけ[参照元]のフアイルと、[参照先フアイル]を同じフオルダに保存しておくと、フアイル名を書くだけで指定できますのでこの方法がベターだと思います。

  画像挿入(画像のサイズ)

  画像を挿入するときには、幅[width]と高さ[height]を指定します。タグの書き方→<img src="写真.jpg" width="○○" height="△△"> (○○と△△にそれぞれピクセル数を書きます)。

  画像の挿入には<img src>を使います。<img>はImages(画像の略)、Sourceは（出典の略)です。

  画像の大きさを表わすには<width>(画像の幅)<height>(画像の高さ)を使います。

  大きさの単位にはPixel(ピクセル)を使います。
  

  ケーススタデー　画像の大きさを比較して見てください。

  
  

  左の画像はwidth 250px height150pxで挿入しました。

  タグの記入
  　<img src="tower bridge.jpg" width="250" height="150" align="left">
  下の画像はwidth 400px height 250pxで挿入しました。トップページを飾るには最低この程度のサイズが必要かと思います。
  

  
  

  画像の挿入(画像枠)

  画像の枠を指定するには[border]を使います。画像の枠の指定を省略(borderを書かない)場合は、<border="2">が指定されたものとして枠線が引かれます。その為、画像に枠線を引かないようにするためには<border="0">と明示する必要があります。

  枠の設定には<img src="写真.jpg" border="○○">と記入します。

  

  この画像の枠はPX5です。

  <img src="tower london.jpg" border="5">
  

  画像の枠はビクセルの数を変えることにより、枠の太さが変わります。タグはBORDERです。

  画像の挿入(画像名の表示)

  画像名の位置を指定します。位置はTOP・ MIDDLE・ BOTTOMの3通りです。この他にabsmiddle がありますが省略します。

  TOPのケース
  Luxembourg(ルクセンブルグ)
  

  <img src="Luxembourg.jpg" width="200" height="200" border="5" align="top">Luxembourg(ルクセンブルグ)

  MIDDLEのケース
  セーヌ川の遊覧船
  

  <img src="seine river.jpg" width="250" height="200" border="5" align="middle">セーヌ川の遊覧船

  BOTTOMのケース
  Le　Muse'e　Louvre(ルーブル美術館)

  <img src="louvre.jpg" width="250" height="200" border="5" align="bottom">Le Muse'e Louvre(ルーブル美術館)

  画像の挿入(文字の回り込み)
  

  通常画像を挿入すると画像の横に一行だけ表示されて後は画像の下に記述されます。画像の横に続けて説明文を記載したいときは<align>を使って文字の配列を指定します。

  画像の右側に文字を配列するケース。聖家族教会(バルセロナ)

  
  
  

  1882年フランシスコ・デ・ビヤールがネオゴジック様式で建築に着手、1891年からガウデイが引き継ぎ彼の死後も建築が続けられている。現在完成している東側の4本の塔は(イエスの誕生)がテーマーで高さが107 メートルもある巨大な建造物である。

  
  <記入例>
  <img src="seikazoku.jpg width="250" height="200" border="3" align="left"><b>

  聖家族教会(バルセロナ)</b><br><br>
  <b>1882年、フランシスコ・デ・ビヤールが(以下省略)

  
  
  

  画像の左側に文字を配列するケース。 オテル・デ・サンバリッド教会 この教会は[戦士の教会]とよばれており、第二次大戦や今次大戦で戦死した将軍達の霊が眠っている。この奥にナポレオンの廟がある。 <記入例> img src="kyokai.jpg" width="250" height="200" border="3" align="right"><b> オテル・デ・サンバリッド教会.

  文字を画像の下に配置するケース。 聖家族教会(バルセロナ) 現在の東側の4本の塔は高さが107メートルもある巨大な建造物である。 <記入例> <img src="seikazoku.jpg" width="250" height="200" border="3" align="left"><b>聖家族教会(バルセロナ)<br clear="all">

  画像の挿入(余白の設定)
  

  画像と画像、画像と文字の間の間隔を設定するには<img>を使います。左右の余白の設定には<hspace>を、上下の余白の設定には<vspace> を使います。 左右の余白を設定するケース Tower bridge 1884年、ビクトリア女王時代に建築された橋で、長さが約266ｍで中央が開閉式になっている。テームズ川に架かるゴシック様式の跳ね橋である。 この画面では画像と文字との間隔がありませんのでレイアウト上、不体裁なものとなっています。

  Tower bridge 1884年、ビクトリア女王時代に建築された橋で、長さが約266 ｍで中央が開閉式になっている。テームズ川に架かるゴシック様式の跳ね橋である。 この画面では画像の左右に30pxの間隔を設定しました。間隔はpxの数字で調整します。 <記入例> <img src="tower bridge.jpg" width="250" height="200" border="3" align="center" hspace="30">

  上下の余白を設定するケース 同じ画面で右の画像は左の画像に比べて上下20pxの間隔を設定しました。 <記入例> <img src="middle tower.jpg" width="250"height="200"border="3"align="center"vspace="20">