CSSテクニックコミュのvertical-align: baseline;での下揃えについて

初めて書き込みさせて頂きます。
春からWEBの仕事に就き、
CSSについても、今いろんな本を見たりして勉強中のまだまだ初心者です。
ここの掲示板もいつもよくみさせていただいています。

前から思ってたのですが、
画像を左に持ってきて、その画像の下揃えにテキストを入れたい場合、どうしたらいいのでしょうか？
テキストがbrを使って複数行になると画像の下にテキストが流れるけど、
下揃えのままそろう方法ってないのでしょうか？
やはり、テーブルを使ってレイアウトして下揃えにするしかないんでしょうか？

それと、今回サイトを作るにあったってCSSでレイアウトしてみたのですが、
divでclass指定をした中の画像に対して
vertical-align: baselineと指定しても下揃えになってくれないんです。。
＜画像：一番左＞

divをはずすと下揃えにはなるのですが。。
brで改行するとやはり下にずれます。。
＜画像：真中＞

ソースは以下のとおりです。
//////////////////////
■ＨＴＭＬのソース

<div class="recstaff">

<h3><img src="img/recruit/matui.jpg" width="120" height="107" />本社営業部長　<br />
松井　孝</h3>
<p>大阪出身。・・・・・・・・<br />
「とにかく・・う！」</p>

</div>

■ＣＳＳ
/* 採用情報
---------------------------------------------------- */
.recstaff {
display: block;
width: 400px;
margin: 0.8em 0 0.4em 0;
padding: 0;
font-size: small;
}

.recstaff img {
　float: left;
　vertical-align: baseline;
margin: 0 10px 0 0;
}

.recstaff h3 {
color: #7d4d18;
font-size: small;
padding: 0;
margin: 0;
}

.recstaff p {
　clear: left;
border-top: 2px solid #7d4d18;
margin: 0.5em 0 0.4em;
}

///////////

結局、ｐ
clear: left; 　　をとって、h3の下に続くようにしました。

http://www.pageone-studio.co.jp/masaki/recruit.html

でも、IEだとレイアウトしてくれるけど、
ネスケ・Firefoxだとやはり崩れます。。

不勉強だったらすいません。
教えていただければすごくうれしいです。
よろしくお願いいたします。

コメント(26)

最初
全て
最新の40件

[1] mixiユーザー 08月20日 21:25

私は vertical-align って使ったことないんですが…。
あれって、テキストを同じ行の中で、"a" や "m" の下端に揃えたり、"y" や "j" の下端に揃えたりするのに使うんですよね…？（違いましたっけ？）
「画像の下揃え」っていうのがよくわからないんですけれど…。

とりあえず、

<img>
<div class="text">
<h3></h3>
<p></p>
</div>

img{
float: left;
display: block;
}
div.text{
float: left;
}

こんな感じじゃだめでしょうか…？
（←試してない人(笑)）

[2] mixiユーザー 08月21日 00:32

のーむさん
コメントありがとうございます！

画像もインライン要素として扱われるため、
テキストと並べて表示することができ、
vertical-align を使って画像を行のどこに揃えて表示するか指定できます。
（手持ちのXHTML+CSSスタンダードデザインガイドの本を参照してます）
で、このvertical-alignはインライン要素とテーブル要素に使用できるみたいです。

http://www.htmq.com/style/vertical-align.shtml
このページにあるように、画像とテキストを下揃えにしたいのです。

で、おっしゃるように右側のテキスト要素を
またdivで包めばいいのかな、とも思うのですが、
するとまた余分にソースが増えてしまうので、
何かいい方法はないかな、、って思ったんです。

でも、そうですね、のーむさんがおっしゃってる方法でも試してみます！

[3] mixiユーザー 08月21日 00:44

こんなんどうでしょう

*{
margin:0;
padding:0;
}
.imgBlock{
width:400px;
position:relative;
}
.img{
width:100px;
}
.text{
position:absolute;
width:300px;
left:110px;
bottom:0;
}

----------

<div class="imgBlock">
<div class="text">
<h3>heading</h3>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text </p>
</div>
<div class="img">
<img src="http://www.google.co.jp/intl/ja_jp/images/logo.gif" width="100" height="100" alt="">
</div>
</div>

テキストがimgの高さよりもでかくなると上にはみ出ますが。

[4] mixiユーザー 08月21日 00:45

これでどうですか？

<div class="recstaff">
<div class="person">
<img src="img/recruit/matui.jpg" width="120" height="107" alt="" />
<h3>本社営業部長　<br />
松井　孝</h3>
</div>
<p>大阪出身。・・・・・・・・<br />
「とにかく・・う！」</p>
</div>

■ＣＳＳ
/* 採用情報
---------------------------------------------------- */
.recstaff {
width: 400px;
margin: .8em 0 .4em 0;
padding: 0;
font-size: small;
}

.recstaff .person {
position:relative;
}

.recstaff .person h3 {
position:absolute;
right:0;
bottom:0;
width:270px;
color: #7d4d18;
padding: 0;
margin: 0;
}

.recstaff p {
border-top: 2px solid #7d4d18;
margin: 0.5em 0 0.4em;
}

[5] mixiユーザー 08月21日 00:46

↑
.text{
position:absolute;
width:290px;
left:110px;
bottom:0;
}

でした
ミス。

[6] mixiユーザー 08月21日 00:48

かぶったｗ

[9] mixiユーザー 08月21日 01:40

皆さん、コメント本当にありがとうございます！！
ずっと一人で悩んでたのですごくうれしい・・（泣）

Takazudoさん
まずは外を大きく imgBlock　で包み、相対位置で表示させて、
画像とテキストもそれぞれdivで括って、
絶対位置で表示させるっていうことですよね？
「bottom･････下からの配置位置（距離）を指定する」
こんなタグあるの気付きませんでした。。。
勉強になりました。
詳しく記述して頂いてありがとうございますっ

マッツさん
<div class="recstaff">の中に、
<div class="person"> を入れて、
下からの配置位置を指定するっていうことですよね？
ありがとうございます。後でやってみます！

イシザカさん
＞テキストを下揃えとしたいときは、text-bottom。
なるほど！

>HTML上、この画像とテキストは1つの行であって、その行の途中に<br />を入れているのですから、「改行させる」と理解して、回り込み解除するのは当然。
なるほど！！！　それで謎がとけました。
ずっと悩んでたら、もうなんでよっっ　て頭がぐるぐるしてきて…
ほんと、もっとHTMLをきちんと勉強しないとだめですね＾＾；；；

で、divを使ってブロックを沢山使ったら、
テーブルでレイアウトするみたいにタグが増えるけどいいのかな。。。
とか悩んでたけど。ありですよね？　こうゆう場合。

ほんとにありがとうございます！
一度皆さんのご意見で試してみます！！！

[10] mixiユーザー 08月21日 01:40

イシザカさんのは・・・それで動きますか？
追記がなければなんとか動いたのに・・・。

[11] mixiユーザー 08月21日 01:47

イシザカさん
さらにつけたしありがとです。
スマートに解決できて、レイアウトも思うどおりにって
なかなか難しいですね・・
でも、ずっとこうゆうレイアウトどうしたらいいだろうって思ってたんで、
光が見えてうれしいです。

あと、気になるのは、同じソースでもIEとネスケやfirefoxだと
解釈が違うんですね・・（写真右みたいに。。）
ほんと実際むずかしいんだって実感しました。
やっとCSSに少しなれて来たところで、
まだまだ環境の違いまで行ききれないですが、
少しずつがんばりますっ

[12] mixiユーザー 08月21日 02:00

マッツさん
コメントずれて見えてませんでした。。
そ、そうなんですか？？
会社からファイル、コピーして持って帰ってくればよかった。。
あー、早く試したいっ
（って、試すのは試せますね＾＾；；　今でも）

[13] mixiユーザー 08月21日 02:18

＞vertical-alignの初期値はbaselineです。
＞テキストを下揃えとしたいときは、text-bottom。
　
正しくは vertical-align:bottom です。

また、彼が提案した今回の手法の一回目では
vertical-align:bottom は必要ありません。

2回目の追記では width を指定しないことで
意図した表示は行われません。

[15] mixiユーザー 08月21日 03:00

>>イシザカさん
>text-bottomという値もあります。

これは失礼致しました。

[16] mixiユーザー 08月21日 06:00

こんなんでどうですか。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>下揃えテスト</title>
<style type="text/css">
/* 採用情報
---------------------------------------------------- */
.recstaff { /* 変更なし */
display: block;
width: 400px;
margin: 0.8em 0 0.4em 0;
padding: 0;
font-size: small;
}

.recstaff img { /* float やめた。vertical-align も。*/
margin: 0 10px 0 0;
}

.recstaff h3 { /* 相対配置でずらす */
line-height: 1.1;
position: relative;
left: 130px; /* 画像の幅 120px + マージン 10px */
bottom: 2.2em; /* 行の高さ 1.1em * 2 行分 */
color: #7d4d18;
font-size: small;
padding: 0;
margin: 0;
}

.recstaff p { /* マージン変更。clearやめ。 */
border-top: 2px solid #7d4d18;
margin-top: -1.7em; /* 空けたいマージン 0.5em - h3のズレ分 2.2em */
margin-left: 0.4em;
}
</style>
</head>
<body>
<div class="recstaff">

<img src="img/recruit/matui.jpg" width="120" height="107" alt="松井ﾀﾝ"/>
<h3>本社営業部長　<br />
松井　孝</h3>
<p>大阪出身。・・・・・・・・<br />
「とにかく・・う！」</p>
</div>
</body>
</html>

でもほんとは table 使った方が安全だと思います。
ソースいじりにくくなるのが嫌ならperlでもXSLTでも
使って機械的にtableタグを生成するとよいのでは。。。

[17] mixiユーザー 08月22日 21:54

皆さん、ありがとうございます！
皆さんの方法を試してみました。

Takazudoさんの方法で試すと、
左のようにはみ出てしまいました。。（画像：左）
そりゃimgよりかなり文字量多いですもんね＾＾；
なので、

<div class="imgBlock">
<div class="text">
<h3>heading</h3>
</div>
<p>dummy text dummy text dummy text </p>
<div class="img">
<img src="http://.gif" alt="">
</div>
</div>

と、<p>を<class="text">の外に出しました。
すると、pは画像とかの上に行きました。。。（画像：真中）
"text"がその親要素の"imgBlock"のbottomの位置に表示された為だと思います。

なので、また、少しタグの方法考えてみます。

マッツさんの方法で試してみたら、
全く同じソースなのに、
ネスケとIEで表示の仕方が違ってしまいました。
ネスケだとうまく表示されるのに、IEだと下にずれてしまうのです。（画像：右）
うーーーん。　なんでだろう・・・。

[18] mixiユーザー 08月22日 22:02

rna[456]さんの方法だと、
この画像のように、茶色のh3の部分はうまく表示できました！
でも下のP部分が下にさがってしまいました。。
.recstaff p　のマージンを変えても位置が変わってくれませんでした。。

でも、こうゆう方法もあるんですね！
で、一つ教えてほしいのですが。
.recstaff h3 { /* 相対配置でずらす */
bottom: 2.2em; /* 行の高さ 1.1em * 2 行分 */
}
ボトムから2.2emってしてるのに、なぜきちんと下揃えになるんですか？？
「行の高さ 1.1em * 2 行分」　は分かるけど、
下に揃うのがわからないんです。。
不勉強ですいません。。　

時間が足りなくなって、まだイシザカさんの方法試してないけど、
あとでやってきます！

ほんとうに皆さんありがとうございます！！
もう少し、どうしてなのか考えてみます！！！

[19] mixiユーザー 08月22日 22:38

申し訳ありません。
ボクの方法で、

/*\*/
* .recstaff .person {
height:1%;
}
/**/

上記をスタイルシートに足して下さい。
解決します。

これは Windows IE の時のみ、
.person に明示的な高さを指定するモノです。
Windows IE はこの height:1%; で解決する“バグ”が多いです。
挙動は他のブラウザと同一ですので心配はいりません。

が、他のブラウザには必要ないので
スターハックとMac IE避けハック？で、Windows IE のみに設定しています。

[20] mixiユーザー 08月22日 23:03

度々申し訳ありません・・・。
Mac IE でも問題が・・・。

先ほどの追加は破棄して頂き、以下を足して下さい。

* .recstaff .person {
height:107px;
/*\*/height:1%;/**/
}

これで Windows、Macintosh IE5 以上、Netscape 6 以上、firefox、Safari、Opera7以上、全てで同じ表示になります。

しかし、Mac IE5 用に画像と同じ高さが明示的に必要となるため、あまり汎用的ではなくなりました・・・。

忘れてください・・・(T_T)

[21] mixiユーザー 08月22日 23:35

あ、元々 h3 に width を指定してましたね。この時点で汎用性はないので、画像の大きさが全て同じであれば、今回の場合 OK じゃないでしょうか＾＾;

[22] mixiユーザー 08月24日 20:06

マッツさん
お返事遅れてしまって、すいません！！
他の業務に追われて、なかなか試せなかったのです。。。

でも！　マッツさんのおかげでうまくいきました！！！
http://www.pageone-studio.co.jp/masaki/recruit.html
すごい！感動！！！
ちゃんとIEでもネスケでも表示できました～☆

私、これがどういうものかも分からず、
このままコピらせて頂いたのですが。。。

* .recstaff .person {
height:107px;
/*\*/height:1%;/**/
↑
/*\*/　ってどういうことなんでしょうか？
エンマークをコメントにしてるんですか？
/**/ 　これも意味がわからなくて・・。

あと、
height:107px; って指定してても　height:1%って指定しないといけないんですね。

でも、ブラウザによるバグって、ほんと難しいですね。。。
ほんとに助かったし、すごく勉強になりました。

皆様ほんとにありがとうございます！！
これからも何かあったらよろしくです（ぺこり）

[23] mixiユーザー 08月24日 20:36

申し訳ありません。
画像の高さが固定で良ければ、以下で完成します。
.recstaff .person の height を画像の高さと同じにするだけです。

/* 採用情報
---------------------------------------------------- */
.recstaff {
width: 400px;
margin: .8em 0 .4em 0;
padding: 0;
font-size: small;
}

.recstaff .person {
position:relative;
height:107px;
}

.recstaff .person h3 {
position:absolute;
right:0;
bottom:0;
width:270px;
color: #7d4d18;
padding: 0;
margin: 0;
}

.recstaff p {
border-top: 2px solid #7d4d18;
margin: .5em 0 .4em;
}

[24] mixiユーザー 08月24日 21:20

http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

このページにもあるんですけれど、
/*\*/ と /**/ の間に挟まれた部分は、Mac IE は無視しちゃうんですよね。

ほんと、ブラウザのバグと戦うのって、疲れる…。

[25] mixiユーザー 08月25日 15:37

マッツさん
ほんとに何度も丁寧にありがとうございます。
すごく助かりました＾＾

のーむさん
初めてみました、そのページ。
早速お気に入りに追加しました！
バグってほんとわけわかんないですね・・。

ありがとうございました。これからもよろしくです☆

[26] mixiユーザー 08月27日 02:01

Takazudoです。
蛇足ですが直したものをば。
画像の高さ>画像の右の文章の高さ
な限り表示可能です。
対応：IE5+ MacIE5+ NN6+

<style>
*{
margin:0;
padding:0;
}
.imgBlock{
width:400px;
}
.imgBlock .headArea{
width:400px;
position:relative;
}
.img{
width:100px;
}
.imgDescription{
position:absolute;
width:300px;
left:110px;
bottom:0;
}
.bodyArea{
border-top:2px solid brown;
}
</style>

<div class="imgBlock">
<div class="headArea">
<div class="imgDescription">
<h3>heading</h3>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
</div>
<div class="img"><img src="http://www.google.co.jp/intl/ja_jp/images/logo.gif" width="100" height="100" alt=""></div>
</div>
<div class="bodyArea">
<p>hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge </p>
</div>
</div>

ログインすると、残り3件のコメントが見れるよ