ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ 画像とテキストを配置する ]

画像とテキストのレイアウト

フォントサイズを可変にすると気になるのが画像とテキストのレイアウトの関係だ。フォントサイズに関係なくレイアウトを決めるにはフロートを使うのが一番だ。

Apr.22,2006

引用とフロートのサンプル

まずはサンプルだ。グラビアや新聞の紙面のような割り付けをしたいなら、float(フロート)を使うと簡単だ。float を使って左に右にアクセントを付けてバランスの良いデザインを狙おう。

Ernest Che Guevara

Ernest Che Guevara

ゲバラを知っているか?

 日本を含む各国政府の“神殿”に、長髪にベレー帽、ヒゲに戦闘服のまま経済使節団長としてすがたをあらわしたゲバラの姿は、世界中を沸かせた。まだハイスクールにいたジョン・レノンは「あのころ世界で一番かっこいいのがエルネスト・チェ・ゲバラだった」と言っている。

 ゲバラはやがて国立銀行総裁ともなった。が、ゲバラ自身は、服装は気にしない、ヒゲは剃らない、美人には惚れる、毎日夜っぴいて朝6時まで仕事する、粗末なアパートに住む、贈り物はすべて施設に提供する、どこでも戦闘服で通す、葉巻はどこでもくゆらす、アメリカには文句をつける、インディオにはやさしい、そういう国立銀行総裁ぶりを続けた。ジョン・レノンならずとも誰もが惚れ惚れする男であった。こんな男はもういない。第一、革命家がもういない。

■松岡正剛の千夜千冊『ゲバラ日記』エルネスト・チェ・ゲバラより

長い文章を引用するときは<blockquote>を使い(「quote」は英語で「引用する」という意味)<body>と同様に要素の子要素も、 Strict ではブロック要素に限定されている。

引用文献や参照元を示すには cite を使うが、この cite には属性と要素の二種類がある。<blockquote> の中で cite 要素を使用するときは、 <cite> はインライン要素なので、以下のように記述する。

<p><cite>引用文献</cite></p>

この <blockquote> に title="タイトル" を挿入すると上記のように引用した文章全面を対象としてマウスポインタを重ねるとタイトル表示が出現するので、引用がより分かりやすいものになるだろう。引用させてもらうことへの敬意を示すため正しく記述することが大切だ。最後にリンクを張る。

<blockquote> と <cite> に関して、その使われ方のルールを模索したがきちんと定まっていないようだ。そこで、ウェブZYCO'Sでは以下のようなパターンにはめて今後は記述しようと思う。

<div id="guevara"><img src="images/guevara.gif" width="208" height="297" alt="Ernest Che Guevara">
  <p>Ernest Che Guevara</p>
</div>
<blockquote cite="http://www.isis.ne.jp/mnn/senya/senya0202.html" title="松岡正剛の千夜千冊『ゲバラ日記』エルネスト・チェ・ゲバラ" class="inyou">
  <h5>ゲバラを知っているか?</h5>
  <p> 日本を含む...と言っている。</p>
  <p> ゲバラはやがて...革命家がもういない。</p>
  <p><cite><a href="http://www.isis.ne.jp/mnn/senya/senya0202.html">■松岡正剛の千夜千冊『ゲバラ日記』エルネスト・チェ・ゲバラ</a>より</cite></p>
</blockquote>

レイアウトに関してはシンプルだ。画像とテキスト(パラグラフ)を<div>で囲みfloatを使って左に寄せて終わりである。こうすると、画像の下にキャプションが記述でき、見栄えが増す。

<style type="text/css">
<!--
#guevara{
  padding-top : 20px;
  padding-left : 20px;
  padding-right : 20px;
  padding-bottom : 20px;
  margin : 0px;
  width : 208px;
  float : left;  /*左に回り込み*/
}
-->
</style>

画像はCSSを使って中央寄せ(センタリング)する

キースリチャーズ

画像のセンタリングについてはCSSを使う。そうしないと、余白の制御をパーフェクトにこなせない。以下のように画像を<div>で囲み、marginを使ってセンタリングする。上下の余白の制御をコントールすれば思い通りの配置が可能だ。

<div class="centering2">
<img src="images/keeth.gif" width="72" height="119" alt="キースリチャーズ">
</div>

以下はCSSの設定の例。

<style type="text/css">
<!--
.centering2{
  margin-left:auto;
  margin-right:auto;
  padding-top : 15px; /*周辺の画像に合わせて余白調整*/
  width : 72px;    /*画像の幅*/
  height : 119px;  /*画像の高さ*/                    
}
-->
</style>

※<div>を使わないで画像に直接下記のCSSを設定してもセンタリングできる。

キースリチャーズ
<img src="images/keeth.gif" width="72" height="119" alt="キースリチャーズ" class="centering">
<style type="text/css">
<!--
.centering{
  margin-left:auto;
  margin-right:auto;
  display : block;       /*ブロック要素へ変更する*/                   
}
-->
</style>

画像とテキストを馴染ませる参考デザイン

画像の上にテキストが乗っかる場合、リストスタイルを使って、そのリストマークが画像ならしっくり馴染んでくれる。

こういうレイアウトの場合は、画像の上にまた画像が乗っかるから余白の制御がデザインの要になる。

わざわざ時間かけてレイアウトした甲斐がある見栄えだと思わない?

リスト画像を使って正しく表示する

プロフェッショナルの品質は高品質

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。