にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

画像を右端に寄せた上で本文と適度に間隔を取るCSS [イメージ,余白]

画像を右端に寄せて余白を設ける図ウェブページの左右端に、本文に対する「挿絵」のように画像を表示させたいことがあります。本文のテキストは左側が揃っている方が読みやすいので、挿絵画像は右端に表示させるのが良いでしょう。画像だけで1行を使ってしまうのはスペースの無駄なので、右端に寄せた上で、本文を左側へ回り込ませる装飾が必要です。この「端に寄せて回り込ませる」という装飾は、スタイルシートのfloatプロパティを使うだけで簡単に作れます。

しかし、単に右端に寄せるだけでは本文が読みにくくなる可能性があります。なぜなら、本文と画像との間隔が狭すぎるからです。floatプロパティを使って右端(または左端)に寄せただけでは、本文と画像との間隔が詰まってしまうのですよね。読みやすくするためには、本文と画像との間に適度な間隔を空けたいでしょう。(右上図参照)

そこで、画像にマージン(外側の余白)を加えます。floatプロパティで右端に寄せると同時にmarginプロパティで余白を設けると、うまい具合に読みやすく掲載できます。
例えば、以下のような感じでCSSソースを書きます。

img.sashie {
   float: right;
   margin: 0px 0px 0.5em 0.5em;
}

まず、floatプロパティに値「right」を指定することで、この画像(=sashieクラスのimg要素)は右端に寄せられます。つまり、後続の文字列は左側に回り込みます。
次に、marginプロパティで余白量を指定します。ここでは「0px 0px 0.5em 0.5em」のように値を4つ指定しています。marginプロパティに値を4つ指定した場合は「上・右・下・左」の順番で4辺の余白をそれぞれ指定したことになります。(※「上」から順に時計回りです。)

ここでは、画像を右端に寄せているので、必要な余白は「画像の左側」と「画像の下側」です。そこに0.5文字分の余白を設けています。この程度の空間を作れば十分でしょう。もちろん、好みに応じて「1em」(1文字分)や「9px」などを指定しても構いません。

小説棚このサンプル段落には、画像(写真)が右端に寄せて表示されているはずです。そして、今読んでいるこの本文は、画像の左側に回り込んで表示されているはずです。floatプロパティを使えばこのように簡単に画像を左右の端に寄せられます。さらに、本文と画像との間隔は0.5文字分ほど空いています。marginプロパティで(画像の)左側と下側に余白を設けているからです。この程度の間隔があれば、読みやすさを保ったまま画像を左右端に表示させられるでしょう。画像を挿絵のように左右端に寄せて本文を回り込ませたい場合には、常に「floatプロパティとmarginプロパティを併用」してデザインすることにしておけば、読みやすいページが作れるでしょう。

上記は、先ほどのCSSソースを使って画像付き段落を表示させてみた例です。だいたいこれくらいの間隔があれば、本文も画像も読みやすい(見やすい)でしょう。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---