==教えることは自分育て==

タグ:サムネイル ( 2 ) タグの人気記事
|TOPに戻る
サムネイル(1)
サムネイルとは、「親指の爪」の意から転じて縮小された画像のこと。通常は多数の画像を一覧表示するために使う手法です。小さい画像をクリックすると同じ画像が大きく拡大されて表示されます。

バラ


まず大きな画像を1枚UPします。(←この場合400×300)

最初は画像タグを書きます。
<img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"> (←幅と高さを小さく設定して、見かけを小さくします。縦・横の比率は変えないように。)
                 ↓
画像をリンクタグで挟みます。この時画像URLは同じものです。
                 ↓
<a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a>
                 ↓
中央寄せにしました。これで出来上がりです。
<center><a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a></center>
[PR]
by otomi7771 | 2007-06-18 13:07 | ├タグでサムネイル |TOPに戻る
サムネイル(3)
このサムネイルは<div>で枠を作っています。そして、その中に画像と文字を配置して画像はサムネイルにしています。p14の基本的な枠の最後に勉強します。

上・・・擬似タグとタグの混在。
下・・・タグのみ。 少し難しいですね。

b0063421_13562.jpg
月の輪椿
草野町椿ウォーキング
b0063421_22322939.jpg
岩根椿
草野町椿ウォーキング



月の輪

月の輪椿
草野町椿ウォーキング
月の輪

岩根椿
草野町椿ウォーキング



<div>の枠を二つ並べたいときは、スタイルに float:left; を付け加えます。
[PR]
by otomi7771 | 2007-06-18 10:04 | ├タグでサムネイル |TOPに戻る