<目次> @画像を表示する
画像を表示するには img タグにsrc属性をつけて画像のファイル名を指定します。
A画像のサイズを指定する
B画像の表示位置を指定する
C画像に枠をつける
D間隔を空けて画像を表示する
Eサムネイル画像をクリックして画像拡大表示する
F画像をぴったりとくっつけて2段で表示する
画像の表示
@画像を表示する
このとき、画像ファイルのあるフォルダ名を「絶対パスと相対パス」を参考にして正しく指定してください。
画像のサイズを指定するには、width属性(横幅)とheight属性(高さ)を使います。
ピクセル値又は画面に対する割合(%)でそれぞれの大きさを決めます。
画像を回り込ませるには、align属性を使います。
align="left"と記入すれば、画像を左に配置し文字を右側に回り込ませることができます。
align="right"と記入すれば、画像は右側に配置され、文字は左側に回り込みます。
画像に枠をつけるにはborder属性を使います。
枠線の太さはピクセル値で指定します。
注意しなければならないのは、枠線の色は指定できませんので、ブラウザの既定の色になります。
それと、画像を使ってリンクを貼った場合通常は枠が表示されますが、border="0"というようにborder属性の値に0を指定すれば、枠を消すことが出来ます。
一定の間隔を空けて左側から画像を並べて表示するには、style属性のmarginを使います。
間隔の幅はピクセル値で指定します。
「サムネイル画像をクリックして拡大表示する方法を紹介します。
ホームページにサムネイル画像を掲載して、その画像をクリックしたときに、ページ移動することなしに拡大画像を表示できます
★参考にしたWebサイト ⇒ http://www.htmq.com/csskihon/401.shtml
「Lightbox Plus」の初期設定では、拡大画像の左上に拡大縮小ボタンが表示されるようになっています。
この拡大縮小ボタンを非表示にするには、「lightbox_plus.js」ファイルの終わりから4行目の resizable:true を false にします。
画像をぴったりとくっつけて2段で表示するる方法を紹介します。
サムネイル画像をぴったりとくっつけて、横3枚、縦2段で表示してみました。