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

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

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

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

CSSの小技(9)

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

ちなみに、サムネイルというのは、複数の画像を小さめにして、四角いタイルのように並べて表示することをいいます。

一般的に、その小さい画像をクリックすると、元の大きい画像が表示されるような仕組みです。

多数の写真を、ブログにきれいに並べて掲載したい人などに、役立つのではないかしら。

サムネイルは、親指の爪(thumb nail)という意味です。親指の爪くらいの小ささで表示するということみたいですね。


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

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

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

サムネイル画像をきれいに並べる

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

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


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

1:ソースコード

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

2:ポイント解説

リスト(ul)タグにて、リンク(a)画像(img)を指定しています。(imgの方に小さい画像、aの方に大きい画像です)

CSSは、リストタグにかけています。classで「thumbnail」と「clearfix」の 2つです。

「thumbnail」のポイントは、<li>に「float: left;」をして、回り込みを行っていることです。以下、コメント付きのソースも掲載しておきます。

3:clearfixとは?

「clearfix」は、floatによる回り込みを解除(clear: both;)したり、意図しない状態(親要素からはみ出す)を解決するために使用します。

定型の内容があるわけではなく、人によって少しずつ書く内容が違ったりします。その状況に応じて、内容を加減するのが良いようです。

それでは、いくつか clearfixをご紹介したいと思います。お好きなものをご利用くださいませ。

(1)Tony Aslettさんの clearfix

Tony Aslettさんが考え出した clearfixです。(名著『現場のプロから学ぶ XHTML+CSS(P284)』から引用)

(2)d-spicaさんの clearfix

d-spicaさんが紹介していらっしゃる clearfixです。(以下引用、当ブログでも利用させていただいています)

(3)Tytoさんの clearfix

Tytoさんが紹介していらっしゃる clearfixです。今回、この記事で利用させていただきました。(以下引用です)

2009/05/10、改訂版あり。『最初に指定しておくCSSを修正しました。』今後も改善され続けるようです。

(4)Perishable Pressさんの clearfix

Perishable Pressさんが紹介していらっしゃる clearfixです。(以下引用です)

前の記事へ
次の記事へ

次回予告

次回は、今回のサムネイル画像の下に文字を記載する形で並べる CSSの小技をご紹介します。


関連記事

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

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

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

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

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

htmlソースについて

本日二度目のコメントすみません…
私のブログは、主に自分の作品の発表の場にしたいと考えています。くまくろさんのように可愛くて、分かりやすいサイトにするのは夢のまた夢…。コンピュータ音痴だし、まだ立ち上げたばかりなので、とりあえず見やすくしたいなあ…と思っています。。
そこで、画像のサムネイルを並べて作品を見やすく表示したいと思い、このサイトで方法をみていたのですが、記事のソースはどこで開いてどこでいじればいいのでしょうか…。テンプレートの編集などはやっているのですが、記事のcssやhtmlはどこをひらけば…?そもそも悩んでる論点ずれてますか?ごめんなさい…ここなら基本的な質問もできると思ってこんな質問をm(。_。)m

kuma crowさんのページごとのイラストいちいち可愛くてキュンキュンします☆

記事をHTMLソースで書きたい場合

なっちろりんさん、こんばんは!
コメントありがとうございます。

記事のソースは、高機能テキストエディタモードを使っていなければ、
いつも使っている入力欄でOKです。(同じです)

ただ、設定を変更する必要があります。

記事を書くページの下の方に、
「改行の扱い」という箇所があります。

ここで「HTMLタグのみ」を選択して、
記事を保存しなければいけません。


また、毎回、記事をHTMLソースコードで入力したいのであれば、
「環境設定の変更」で設定しておくと楽になります。

[環境設定の変更]-[ブログの設定]-[投稿設定]-[自動改行]です。


うーん、いちいちHTMLソースコードとかうつのは
面倒くさいな~という場合は、次のような方法もあります。

FC2ブログでサムネイル画像を作成する方法
 →http://kumacrow.blog111.fc2.com/blog-entry-665.html

FC2ブログで複数の画像をサムネイル表示する方法
 →http://kumacrow.blog111.fc2.com/blog-entry-666.html

ひながた

ありがとうございます(´`*)

いえ!決してHTMLソースから書きたいわけでは!
できるだけラクにやりたいのですが「サムネイルをきれいに並べる」というキーワードを見て、「どれどれ…」と参考にしようとしたらソースから作っていそうだったので(。_。;)
でも全然わからなくて…

私1「ぇ。ところでその方法にいく場所にも辿りつかないくない?」
私2「どうする?聞いてみる?!」
私1「コメントなんてしたことないよー!こわいよー++」
私2「でも親切そうだよ?」
私1「失礼じゃないかなあ…無視されないかな…」
私2「すごい長いコメントの人にも返してくれてるからきっと大丈夫だよ!」
私1「でも面倒かけちゃうのはちょっと…レッスン料とか払ってないのに(>_<)」
私2「でもできないと進まないよ?」
私1「…。」


って次第だったのです(^^:)

高機能エディタ?というもの初めて開きました!

ひな型としてテーブルのセルを使って並べる方法で、作品集ページだけつくってみました…(´v`)☆
記事をだらだら下に羅列するよりは見やすいものができた気がします…


ありがとうございました!!

わからなくなったらまた頼らせてください(>_<)

書作品ページ

なっちろりん先生、こんにちは!
コメントありがとうございます。

情報が煩雑にそこここに転がったままになっているので、
検索しても見つかりそうにない場合は、

聞いていただいた方が早いかと思います。
コメントはお気軽に。

きれいに書作品ページができていましたね。

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/493-1ac32b9e
 | トップページ | 

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
ありのごとくあつまりて