トップ画像

トップ画像
★HTML・CSSの基本
★JavaScript ライブラリ

 <目次> @画像を表示する
       A画像のサイズを指定する
       B画像の表示位置を指定する
       C画像に枠をつける
       D間隔を空けて画像を表示する
       Eサムネイル画像をクリックして画像拡大表示する
       F画像をぴったりとくっつけて2段で表示する

画像の表示

@画像を表示する

  画像を表示するには img タグにsrc属性をつけて画像のファイル名を指定します。
 このとき、画像ファイルのあるフォルダ名を「絶対パスと相対パス」を参考にして正しく指定してください。


↑頁トップへ

A画像のサイズを指定する

  画像のサイズを指定するには、width属性(横幅)とheight属性(高さ)を使います。
 ピクセル値又は画面に対する割合(%)でそれぞれの大きさを決めます。


↑頁トップへ

B画像の表示位置を指定する

  画像を回り込ませるには、align属性を使います。
 align="left"と記入すれば、画像を左に配置し文字を右側に回り込ませることができます。
 align="right"と記入すれば、画像は右側に配置され、文字は左側に回り込みます。


↑頁トップへ

C画像に枠をつける

  画像に枠をつけるにはborder属性を使います。
 枠線の太さはピクセル値で指定します。
 注意しなければならないのは、枠線の色は指定できませんので、ブラウザの既定の色になります。
 それと、画像を使ってリンクを貼った場合通常は枠が表示されますが、border="0"というようにborder属性の値に0を指定すれば、枠を消すことが出来ます。


↑頁トップへ

D間隔を空けて画像を表示する

  一定の間隔を空けて左側から画像を並べて表示するには、style属性のmarginを使います。
 間隔の幅はピクセル値で指定します。


↑頁トップへ

Eサムネイル画像をクリックして画像拡大表示する

「サムネイル画像をクリックして拡大表示する方法を紹介します。
 ホームページにサムネイル画像を掲載して、その画像をクリックしたときに、ページ移動することなしに拡大画像を表示できます

サムネイル画像をクリックで拡大






 ★参考にしたWebサイト ⇒ http://www.htmq.com/csskihon/401.shtml
「Lightbox Plus」の初期設定では、拡大画像の左上に拡大縮小ボタンが表示されるようになっています。
 この拡大縮小ボタンを非表示にするには、「lightbox_plus.js」ファイルの終わりから4行目の resizable:true を false にします。


↑頁トップへ

F画像をぴったりとくっつけて2段で表示する

画像をぴったりとくっつけて2段で表示するる方法を紹介します。
サムネイル画像をぴったりとくっつけて、横3枚、縦2段で表示してみました。








 <参考>border="0"で画像の枠線をなくせます。

孫娘が拾ってきた猫です。(画像を中央に配置)
↑頁トップへ

最近、母猫が勝手に侵入!!(画像を中央に配置)
↑頁トップへ