CSSで下揃えにするには

Question

下のような、画像をテキストに合わせて下付きにするようなレイアウトをCSSで作りたいと思っています。どなたかアドバイスを頂けないでしょうか？

ほげほげほげ

ほげほげほげ

ほげほげほげ

ほげほげほげ

ほげほげほげ

aqucent · Accepted Answer

いろいろと試してみましたが、完全な形で再現するのは無理かもしれません。

hogehoge
hogehoge

ここまでは出来ますが、下揃えにする方法がわかりません。 (text-align: bottom のようなプロパティがあれば実現できるのですが。) テーブルをCSSで代替する手法は簡易的なもので、完全な再現するわけではありませんから、素直にテーブルを使うか、img要素を次の行に置くしかないのではないでしょうか。「テーブルでレイアウトを取ってはいけない = 必ずCSSで代替可能」ではありません。セルを使った表示技法はテーブル独自のものだと思います。 # セルの幅,高さを自動調整するという点において、table要素は優れています。 # 反面、描画速度が遅いという欠点を持っています。 CSSを基本にレイアウトを取る場合は、左揃え、上揃えを基本としてレイアウトを取ります。何か事情がある時には floatプロパティを使うことで、特別なレイアウトを取りますが、私は出来るだけ使わないようにしています。リキッドレイアウトを考えると、floatは使いづらいと思いますので…。

amago001 · Answer

ちょっと訂正です。
テキストと画像の下部を揃えたいという事ですね！
ちゃんと読まなくてすいません。
下部をそろえる場合は、paddingはオールゼロでいいです。
（指示を入れなくて大丈夫です。）

amago001 · Answer

ほげほげほげ

ほげほげほげ

ほげほげほげ

ほげほげほげ

ほげほげほげ

外部CSSファイルへ .スタイル名{ width : 100% ; padding : 0px 0px ●px 0px ; text-align : left ; background-image : url("画像ファイル名") ; background-repeat : no-repeat ; background-position : 0% 100% ; } ●には、画像ファイルの高さ以上の値を入力 background-position : 0% 100% ;の指示では 0%は左側からの表示位置、100%は上からの表示位置を指示しています。テキストを表示するボックス領域が画像より大きい時に、左によせて表示する時は0%・中央に表示する時は50%という具合に指示します。この方法では、画像を背景として表示する方法なので、リンクを貼ったりすることは出来ません。ボックス領域より画像が大きい場合は、画像が切れて表示されてしまうので注意をしなくてはなりません。参考URL：http://css.marutoku-navi.com/602_04.php

aqucent · Answer

こんばんは。

> 高さや横幅を自動調節させるレイアウトをリキッドレイアウトというのでしょうか？勉強になります。
そうですね…。どんな大きさのウインドウサイズでもレイアウトが崩れない表示技法をリキッドレイアウトと言います。
CSSの場合、ブロックレベル要素の高さは内部の要素に応じて自動調節されますが、
テーブルのように2つのブロックレベル要素(テーブルにおいては、セル)を横並びにしたときに、同じ高さにすることが出来ません。
ですので、#2のソースでの「左側にあるブロック」と「右側にあるブロック」の高さを統一できないんです。
heightプロパティで高さを指定すれば、当然同一になりますが、自動調整の利点は失われます。
そういう性質から、セルを使ったレイアウトを完全に再現できないんです。
(#2 では、div要素を入れ子にしているので、内部の2つのdiv要素の大きさが同一でなくてもレイアウトは崩れません。)

CSSには下揃え用に vertical-alignプロパティが用意されているので、これが使えるかと思いましたが、ブロックレベル要素には作用しないようでした。

<div>
hogehoge<br>hogehoge
<img style="vertical-align: bottom" src="hoge.gif">
</div>

上記では、意味がないでしょう…。

# ちなみに、vertical-align はtd要素にも指定できるようです。
# td { vertical-align: bottom } 又は td.bottom { vertical-align: bottom } のように、指定することが出来ます。

> やはりテーブルを使うものなのでしょうかね。。
このような表示を希望されるなら、テーブルを使うのが一般的だと思います。
個人的には、テーブルは使いにくいのでレイアウトの方を変えてしまいますが、
クリエイターの考え方次第だと思います。

hogehoge
hogehoge

上記では、意味がないでしょう…。 # ちなみに、vertical-align はtd要素にも指定できるようです。 # td { vertical-align: bottom } 又は td.bottom { vertical-align: bottom } のように、指定することが出来ます。 > やはりテーブルを使うものなのでしょうかね。。このような表示を希望されるなら、テーブルを使うのが一般的だと思います。個人的には、テーブルは使いにくいのでレイアウトの方を変えてしまいますが、クリエイターの考え方次第だと思います。

yambejp · Answer

テーブルをつかわないでという意味ですか？

CSSで下揃えにするには

いろいろと試してみましたが、完全な形で再現するのは無理かもしれません。

ちょっと訂正です。

<html>

こんばんは。

テーブルをつかわないでという意味ですか？

この回答への補足

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング