サムネイル画像をきれいに並べる(2):CSS小技

ブログが作りたい!CSSの小技 > サムネイル画像をきれいに並べる(2):CSS小技

サムネイル画像をきれいに並べる(2):CSS小技

サムネイル画像をきれいに並べる(2):CSS小技

CSSの小技(10)

今回も、サムネイル画像をきれいに並べる CSSの小技です。

前回のサムネイル画像の方法との違いは、画像の下にちょっとした文字を入れていることです。


文字付きサムネイル画像をきれいに並べるとは?

文字付きでサムネイル画像をきれいに並べるというのは、次のような形で写真を表示することです。

※:次の画像は表示用なので、クリックしても何も起こりません。

文字付きでサムネイル画像をきれいに並べる

イメージし難い人もいらっしゃるかもしれないので、サンプルを用意しました。(サンプルをご覧ください

小さい画像(120×90)をクリックすると、大きい画像(640×480)が表示される仕組みです。

また、文字にも大きい画像を表示するリンクを付けておけば、ネットリテラシーの低いユーザにも、分り良くなるかもしれません。


文字付きサムネイル画像をきれいに並べる方法

1:ソースコード

(1)HTMLコード
(2)CSSコード
(3)CSSコード(clearfix部分)

2:ポイント解説

ポイントは、定義リスト(dl)タグにて、<dt>と、<dd>を<div>タグで囲んでいることです。

そしてその<div>タグに「float: left;」をかけて、回り込みを行っていることです。以下、コメント付きのソースも掲載しておきます。

「clearfix」については、前回の記事で書いているので、割愛いいたします。(同じです)

前の記事へ
次の記事へ

次回予告

次回は、おそらく画像を大きく表示する CSSの小技をご紹介するような、そんな気がします。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2009/04/26 更新日:2009/04/26

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

Clearfixですか!
参考になります。
画像をメインでやっているサイトとかだと、見せ方とか工夫して
いるサイトが多いですよね。
でもついついFlash使っちゃったりして(^^;)

clearfixッス

fuminchuさん、こんばんは!(・∀・)/ぐいぶにん
コメントありがっとうございまっす。


そうです。clearfixなのです。

実は、けっこう最近まで、
面倒くさがって使っていなかったんですが、
やっとこ使うことにしました。(´Д`;)テヘッ

やっぱ楽ッスね。
余計なHTMLタグを書かなくて済むし。


そうですねー、写真ブログってほんと多いですよね。
あ、イラストブログも、そうだわ多い。

で、これがまた、プロみたいな人が、すごく多い。
何だかもったいないですよね。


Flashは、まだSEO的にあれなんで、
本当の潮流は、もう少し先になるかもしれませんね。

おらもやってみたいなー。ヽ(´ー`)ノ

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/494-a983df4d
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて