- ベストアンサー
CSSで下揃えにするには
下のような、画像をテキストに合わせて下付きにするようなレイアウトをCSSで作りたいと思っています。どなたかアドバイスを頂けないでしょうか？ <html> <table width=100%> <tr> <td>ほげほげほげ<br><br>ほげほげほげ<br><br>ほげほげほげ<br><br>ほげほげほげ<br><br>ほげほげほげ<br><br></td> <td valign="bottom"><img src="hoge.gif"></td> </tr> </table> </html>
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
いろいろと試してみましたが、完全な形で再現するのは無理かもしれません。 <div> <div style="float: left">hogehoge<br>hogehoge</div> <div style="float: left"><img src="hoge.gif"></div> </div> ここまでは出来ますが、下揃えにする方法がわかりません。 (text-align: bottom のようなプロパティがあれば実現できるのですが。) テーブルをCSSで代替する手法は簡易的なもので、完全な再現するわけではありませんから、 素直にテーブルを使うか、img要素を次の行に置くしかないのではないでしょうか。 「テーブルでレイアウトを取ってはいけない = 必ずCSSで代替可能」ではありません。 セルを使った表示技法はテーブル独自のものだと思います。 # セルの幅,高さを自動調整するという点において、table要素は優れています。 # 反面、描画速度が遅いという欠点を持っています。 CSSを基本にレイアウトを取る場合は、左揃え、上揃えを基本としてレイアウトを取ります。 何か事情がある時には floatプロパティ を使うことで、特別なレイアウトを取りますが、 私は出来るだけ使わないようにしています。 リキッドレイアウトを考えると、floatは使いづらいと思いますので…。
その他の回答 (4)
- amago001
- ベストアンサー率0% (0/1)
ちょっと訂正です。 テキストと画像の下部を揃えたいという事ですね！ ちゃんと読まなくてすいません。 下部をそろえる場合は、paddingはオールゼロでいいです。 （指示を入れなくて大丈夫です。）
- amago001
- ベストアンサー率0% (0/1)
<html> <div class="スタイル名"> ほげほげほげ<br><br> ほげほげほげ<br><br> ほげほげほげ<br><br> ほげほげほげ<br><br> ほげほげほげ<br><br> </div> </html> 外部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%という具合に指示します。 この方法では、画像を背景として表示する方法なので、リンクを貼ったりすることは出来ません。 ボックス領域より画像が大きい場合は、画像が切れて表示されてしまうので注意をしなくてはなりません。
- aqucent
- ベストアンサー率39% (78/200)
こんばんは。 > 高さや横幅を自動調節させるレイアウトをリキッドレイアウトというのでしょうか？勉強になります。 そうですね…。どんな大きさのウインドウサイズでもレイアウトが崩れない表示技法をリキッドレイアウトと言います。 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 } のように、指定することが出来ます。 > やはりテーブルを使うものなのでしょうかね。。 このような表示を希望されるなら、テーブルを使うのが一般的だと思います。 個人的には、テーブルは使いにくいのでレイアウトの方を変えてしまいますが、 クリエイターの考え方次第だと思います。
- yambejp
- ベストアンサー率51% (3827/7415)
テーブルをつかわないでという意味ですか？
補足
ありがとうございます。 おっしゃるとおりです;; テキストの高さの一番下に、画像がくるというものを、テーブルを使わずに表現する方法が思い浮かびません。。テーブルなら簡単なのですが。。
お礼
ありがとうございます。 高さや横幅を自動調節させるレイアウトをリキッドレイアウトというのでしょうか？勉強になります。 やはりテーブルを使うものなのでしょうかね。。