- ベストアンサー
CSSで下揃えにするには
- みんなの回答 （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)
テーブルをつかわないでという意味ですか？
補足
ありがとうございます。 おっしゃるとおりです;; テキストの高さの一番下に、画像がくるというものを、テーブルを使わずに表現する方法が思い浮かびません。。テーブルなら簡単なのですが。。
関連するQ&A
- 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。
どちらも<table align="center">を用いています。 ですが、タグ１は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ２のセルの中身は、中央ぞろえになってしまいます。 タグ１のように、<table align="center">を用い、セルを左詰め指定（<align="left">）をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ１------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10"> </td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ２------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td> </td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td> </td> <td> </td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。
- ベストアンサー
- HTML
- IE セル間に隙間が・・・
HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td> ------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
- テーブルのセル内で、あるものは上辺寄せあるものは下辺寄せにしたい
下記のようなソースを表示させた際に 「ＡＢＣ」文字列が、10行でも100行で1000行になっても、 あいうえおのテーブルはvalign=topのようにボーダーの上に常に吸着し、かつ img.gifをvalign=bottomのようにボーダーの下に常に吸着させる方法を 教えてください。 <html> <body> <table border="1"> <tr> <td>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ</td> <td> <table border="1"> <tr> <td>あいうえお</td> </tr> </table> <img src="img.gif"> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 背景画像に任意の位置でテキストを配置する
CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか？ もっとスマートな方法はないんでしょうか？ CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>
- ベストアンサー
- CSS
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- CSSでdiv内を下揃え
CSSでdiv内を下揃えは出来ないものでしょうか? テーブルを使った時の以下の表現をCSSで表現したいです。 <TABLE border="0" height="200"> <TR> <TD>ここは上から●pxに画像配置</TD> </TR> <TR> <TD valign="bottom">ここを下揃えで画像表示</TD> </TR> </TABLE> テーブルならすぐできるのですが… 下揃えの方法があれば教えてください。
- ベストアンサー
- CSS
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- cssで商品を並べる時、テーブルを使わないでできる？
cssとっかかったばかりの初心者ですのでわけのわからない質問ばかりしてしまいますが、よろしくお願いします。 cssを使ったページに商品を並べる場合、テーブルを使ってレイアウトするのが楽と思いますが、テーブルを使わないで2列、3列というようにできますか？ 普通にテーブルを使ったら <table> <tr> <td>item1</td> <td>item2</td> <td>item3</td> </tr> <tr> <td><img src="img/01.jpg" width="100" height="100"></td> <td><img src="img/02.jpg" width="100" height="100"></td> <td><img src="img/03.jpg" width="100" height="100"></td> </tr> </table> ですが、テーブルタグをつかわず、cssで列を指定ってできますか？ それとも、商品ラインナップの場合はテーブルで入れるのが普通ですか？？？ いろいろやってみたんですが、わからなくなったので、質問します。 よろしくお願いします。
- ベストアンサー
- XML
- tableがずれる理由がわかりません
上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう？？ 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSで左に画像、右にテキストを並べたい。
CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。 （●=画像 ▲=テキスト） 現在の表示は ●▲ となっているのですが、これを ● ▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか？ 色々試したのですが、どうしても下のように改行してしまいます。 ● ▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。
- ベストアンサー
- HTML
お礼
ありがとうございます。 高さや横幅を自動調節させるレイアウトをリキッドレイアウトというのでしょうか？勉強になります。 やはりテーブルを使うものなのでしょうかね。。