[イメージ]ウェブ上で画像を縦横に並べたいとき、画像単体だけではなく「画像にキャプション(題名)を加えた『画像ボックス』」を縦横に並べたい場合も多々あります。そのような、キャプション(題名)付きの画像を縦横に等間隔で並べる方法として、「HTML5では専用のfigure要素・figcaption要素を使う」方法と「単にspan要素を使う」方法、CSSの「inline-blockで並べる」方法と「floatで並べる方法」をそれぞれ解説します。単純にimg要素にspan要素を併記する方法で、キャプション付き画像を作る方法キャプション付き画像を縦横に並べるCSSの書き方(inline-blockを使う場合)キャプション付き画像をHTML5(figure要素・figcaption要素・img要素)で書いた場合のCSSキャプション付き画像を単純にimg要素にspan要素を併記する方法で書いた場合のCSSキャプション付き画像を縦横に並べるCSSの書き方(floatを使う場合)キャプション(題名)付きの画像を縦横に等間隔で並べるHTMLとCSSの書き方ウェブ上で画像を縦横に並べたいとき、画像単体だけではなく「画像にキャプション(題名)を加えた『画像ボックス』」を縦横に並べたい場合も多々あります。そのような、キャプション(題名)付きの画像を縦横に等間隔で並べる方法を解説してみます。画像にキャプションを加えるには、従来は単に「画像(img要素)の付近にspan要素などの適当な要素を使ってキャプションを記述する」くらいしか方法がありませんでしたが、HTML5では専用のfigure要素・figcaption要素が使えます。どちらも似たような記述で使えますし、適用するスタイルシートもほぼ同じですが、HTML5の書き方の方が画像とキャプションとを1対1で結びつけられるので望ましいでしょう。以下に、両方の書き方を掲載します。キャプション付きの画像ボックスを縦横に並べる表示例:キャプション1キャプション2キャプション3キャプション4キャプション5キャプション6キャプション7キャプション8キャプション9キャプション10横方向にいくつ並ぶかは、描画領域の幅次第です。画像にキャプションを加えるHTMLの書き方HTML5の書き方を使うにしても、HTML4以前の書き方を使うにしても、画像をimg要素で記述する点は同じです。HTML5未対応の古いブラウザでの表示を気にするなら後者の方法で書いておく方が無難ですが、古いブラウザを切り捨てて構わないならHTML5の書き方(figure要素とfigcaption要素)を使うと良いでしょう。HTML5の書き方であっても、画像そのものの表示にはimg要素が使われるので、古いブラウザでも画像の表示そのものに問題はありません。▼HTML5で追加されたfigure要素とfigcaption要素を使って、キャプション付き画像を並べる方法HTML5では、画像にキャプションを加える目的でfigure要素とfigcaption要素が使えるようになりました。書き方は簡単で、下記のように「画像とキャプションの全体」をfigure要素で囲み、画像はimg要素で記述し、キャプションはfigcaption要素で記述するだけです。<figcaption>キャプション</figcaption></figure>この方法だと、figcaption要素(3行目)で記述した文字列が、img要素で指定した画像(2行目)に対するキャプションだと明示できまから、後述の方法(HTML4までの方法)よりも望ましいでしょう。▼単純にimg要素にspan要素を併記する方法で、キャプション付き画像を並べる方法HTML4以下では特に画像に対するキャプションを指定する記述方法はないので、単にimg要素に続いてキャプションをテキストで書き、全体を何らかの要素で囲んで1セットにするくらいしかありません。class="caption">キャプション</span></p>ここでは、全体をp要素で囲んだ上で、画像(img要素)の直後にspan要素を使ってキャプションを記述しています。後からスタイルシートで装飾を加えるために、適宜class属性を使ってclass名を付加しています。HTML5とHTML4以下での書き方を並べて紹介しましたが、どちらの記述方法でも記述量はほぼ同じですし、どちらでも以下のスタイルシートで同じように表示ができます。キャプション付き画像を縦横に並べるCSSの書き方(inline-blockを使う場合)さて、HTMLソースが書けたらスタイルシートを適用しましょう。HTMLソースをHTML5で記述したのかHTML4で記述したのかによってセレクタの書き方が異なりますが、CSSそのものの中身は同じです。複数のブロックを縦横に並べたい際には、1つ1つのブロックを構成する要素を「インラインブロック(inline-block)」にしてしまう方法が楽です。インラインブロックにすると、ブロックレベル要素をインライン要素のように配置できます。▼キャプション付き画像をHTML5(figure要素・figcaption要素・img要素)で書いた場合のCSSまず、「キャプション付き画像」全体を囲むfigure要素をインラインブロック化して余白や背景色などの装飾を加えます。img要素の余白を調整するにはimg要素自体を明示的にブロックレベル要素にしておく方が楽です。最後にキャプションを作るfigcaption要素に対しても文字サイズの装飾を加えています。*/}このサンプルでは特にclass名などを付加していませんが、実際に使用する際には適当なclass名を付加する方が使いやすいかも知れません。インラインブロック化する3行目以外は好きなように変更して下さい。▼キャプション付き画像を単純にimg要素にspan要素を併記する方法で書いた場合のCSSまず、「キャプション付き画像」全体を囲むp要素(class名はimagebox)をインラインブロック化して余白や背景色などの装飾を加えます。img要素の余白を調整するにはimg要素自体を明示的にブロックレベル要素にしておく方が楽です。最後にキャプションを作っているspan要素(class名はcaption)に対しても文字サイズの装飾を加えています。*/}以上のHTMLとCSSを使って表示すると、以下のように見えます。キャプション付きの画像ボックスを並べる(display:inline-block使用):キャプション1キャプション2キャプション3キャプション4キャプション5キャプション6キャプション7キャプション8キャプション9キャプション10上記のようにインラインブロック化して並べる方法だと、回り込みの解除などの余計な処理が不要ですし、(インライン要素のように装飾可能なので)右寄せや全体のセンタリングも簡単です。HTMLソース内でボックス間に空白や改行がある場合は、ボックス間に半角スペースが1つ挿入されるため、横方向には若干の余計な空白が付加されます。「キャプション付き画像」群の間隔をもっときっちり指定したい場合は、後述のfloatプロパティを使う方が良いかも知れません。キャプション付き画像を縦横に並べるCSSの書き方(floatを使う場合)先程はdisplayプロパティを使ってインラインブロック化(inline-block)して並べましたが、floatプロパティを使って並べる方法もあります。floatプロパティの方が古くから使えたので、こちらの方がむしろ使用数は多いかも知れません。「最後に回り込みを解除しないとレイアウトが崩れる」という問題点さえクリアすれば簡単に使えます。:</div>以下のようにCSSソースを記述します。block;}まず、figure要素にfloatプロパティを加えて値に「left」を指定することで、figureプロパティを左寄せで並べています。することで、後続のあらゆる要素が(描画空間がある限り)横方向に並ぶようになります。この方法だと、「キャプション付き画像」群が終わったあとの要素も右側に回り込んでしまうため、最後に「回り込みの解除」が必須です。それが14行目~18行目の部分です。after疑似要素にClearfixを加えることで、回り込みを解除しています。(回り込みの解除方法は他の手段でも構いません。)表示例は以下の通りです。キャプション付きの画像ボックスを並べる(float:left使用/7px間隔):キャプション1キャプション2キャプション3キャプション4キャプション5キャプション6キャプション7キャプション8キャプション9キャプション10このように、floatを使って並べると末尾に回り込みの解除処理が必須なため、CSSソースの記述量が若干増えます。その代わり、縦横の空白をきっちり調整しやすいメリットがあります。上記では縦横共に7px間隔になっています。等間隔で並べたい場合にはfloatを使う方が楽かも知れません。いうわけで、キャプション(題名)付きの画像を縦横に等間隔で並べる方法でした。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。下記の電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:例えばデザイナーである貴方が作成なさったデザイン物のHTML+CSSでの実装作業など、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。▲同じデザインでもCSSの書き方には多数の方法があります。どんな書き方を選択すればメンテナンス性の高いCSSソースになるのかがよく分かってお勧めです。▲PCだけでなく様々なサイズのモバイル端末に対応させるためのCSSの書き方などについて、カラーで見やすく解説されていて分かりやすいです。▲ユーザビリティとは何なのかを分かりやすく解説した本。読み物としても面白いです。■だから、そのデザインはダメなんだ。良い・悪いが比べてわかる▲何が原因で分かりにくくなってしまうのかを列挙したサンプル集。「こういうデザインだけは避けておこう」というマイナス回避の手段としても。知らないと困るWebデザインの新ルール4▲最近よく使われている様々なデザインパーツについて、それぞれの実現方法としてHTML+CSSソースの書き方を紹介しているTips集。カラーで見やすいです。掌田津耶乃さんによるBootstrap解説書。現場の新標準ガイド(マイナビ出版/368ページ)CSS(スタイルシート)に関する解説書は、HTMLを書く知識がどれくらいあるのかの前提が様々なので、自分に合う解説なのかどうかをプレビューなどで確認したり、目次から大まかな内容はチェックしておいた方が良いと思います。»スタイルシートTipsふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(7)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。▼当サイト内外で関連しそうな記事などが自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。