- ベストアンサー
テーブルとDIVとCSSについての質問
- テーブルとDIVとCSSについて質問です。テーブルタグのtdにdivで写真を入れたい方法や、文字の配置に関する問題について教えてください。
- 質問内容は、テーブルタグのtdにdivで写真を入れたい方法と、文字の配置に関する問題です。
- テーブルとDIVとCSSについての質問です。テーブルタグのtdにdivで写真を入れたい方法や、文字の配置に関する問題があります。
- その他（インターネット・Webサービス）
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
また記述ミスが・・・ずびばぜん 自分で言いながらｐのフォントサイズと領域がずれてました。 あとpタグ閉じてなかったり。 これにwidth=300 height=200の写真差し込んだらIEでもfirefoxでも 反映されました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- *{ margin:0; padding:0; } img{ vertical-align:bottom; } table{ width:auto; height:auto; border:5px double #000; border-collapse:collapse; } table p{ color:#000; background-color:#999; font-size:14px; height:60px; text-align:center; } h2{ border:3px dotted red; text-align:center; } td{ width:auto; border:1px solid blue; } --> </style> <title>無題</title> </head> <body> <table> <tr><td><h2><img src="test.jpg" width="300" height="200" alt="写真左"></h2><p>あいうえお<br>かきくけこ<br>さしすせそ</p></td> <td><h2><img src="test.jpg" width="300" height="200" alt="写真右"></h2><p>あいうえお<br>かきくけこ</p></td></tr> </table> </body> </html>
その他の回答 (4)
- wanwan-gao
- ベストアンサー率100% (1/1)
すみません。 記述6行目の<link rel="stylesheet" type="text/css" href="css/style.css">は 抜いといてください。 自分のタグから適当にひっぱってきたので、外部ＣＳＳへのhrefが無駄に入ってました。
- wanwan-gao
- ベストアンサー率100% (1/1)
テーブルで横に並べた写真の位置が、各写真の下にある文字列数によって ずれるということですよね？(理解力なくてすみません) 自分もテーブル苦手なので、専門の方が見たらダメ出しされると思いますが 何となく書いて見ました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <style type="text/css"> <!-- *{ margin:0; padding:0; } img{ vertical-align:bottom; } table{ width:auto; height:auto; border:5px double #000; border-collapse:collapse; } table p{ color:#000; background-color:#999; font-size:14px; height:40px; text-align:center; } h2{ border:3px dotted red; text-align:center; } td{ width:auto; border:1px solid blue; } --> </style> <title>無題</title> </head> <body> <table> <tr><td><h2><img src="#" width="300" height="200" alt="写真左"></h2><p>あいうえお<br>かきくけこ<br>さしすせそ<p></td> <td><h2><img src="#" width="300" height="200" alt="写真右"></h2><p>あいうえお<br>かきくけこ<p></td></tr> </table> </body> </html> 宣言文など(この場合html4.01を使用してます)を しっかり書いてからアスタリスクの全称セレクターで外余白中余白を0にして imgのvertcal-alignで写真挿入時隙間が入らないようにし tableのborderをcollapseで隙間を無くして 今回はテーブルの幅とかオートで自由にしてます 画像の高さと幅をhtmlで指定して挿入し、その下に文字を挿入 そこで、「二行と三行で起こる画像の位置ずれ」について 文字は<p>タグで書いてますので<p>タグの高さをCSSで決めてあげました。 これで、左のtdも右のtdも領域の条件が全く同じになるんじゃないかなーと思います。 ※<p>の文字サイズが大きくなるなら<p>のheightも収まる高さにしないと崩れます そして<p>自体にtext-align:center;をCSSで記述しました。 で、画像はh2で入れてるのでcssを使いh2の枠を装飾しました。 写真を一回り小さくtdの中に入れたい場合は、 写真の下にくる文字領域を計算した上で 例えば tdのwidth:300px; height:500px; その中に入る h2のwidth:300px; height:300px; pのwidth:300px; height:200px;で htmlでh2の画像width=250 height=250など入れると 画像のh2にもtext-align:center;かければ写真も中央にくるはずです。 高さの中央揃えもheight:auto;かmargin:25px 0;で合うんじゃないかと。 その際、borderなどを入れる時はそれも踏まえた計算をしてください (でもtableは高さとかガチガチに指定したり 装飾アイテムとして考えないほうが良いらしいです。) 当方も勉強中なので、的外れだったらすみません。
- yui-magic
- ベストアンサー率62% (20/32)
#1です ＞＞<img scr="img/photo.jpg" align="middle">でできないのです 左右をそろえる場合はalign=centerです。
お礼
centerでも、できなかったのですが、 テーブルの中だからいけないのかもしれません。 もう少し研究してみます。 何度もありがとうございました。
- yui-magic
- ベストアンサー率62% (20/32)
いまいち状況がつかめてないのですが、cssでtdに対して 横幅を指定したらどうでしょうか？ ちなみに 「text-align="center"」というcssはありません。 正しくは「text-align:center」です。 さらにいうと、<div>などのブロック要素は、ブラウザによっては 「text-align:center」でセンタリングできない場合があります。
お礼
ありがとうございました。 説明がわかりずらくてすみませんでした。 できれば補足のほうも、お願いできませんか？
補足
＞text-align:center」 はい、間違えました。 ＞cssでtdに対して 横幅を指定したらどうでしょうか？ なるほど、ちょっと状況が違うのですが、それをヒントに、 ｃｓｓでdivをtdの常に上に固定させればいいと思いました。 その場合は、どう指定したらいいか、教えてもらえると助かります。 ついでに、tableの中の画像を左右の中央にしたいのですが、 <img scr="img/photo.jpg" align="middle">でできないのですが、 正しい方法を教えてくれるとありがたいです。 お手数ですがよろしくお願いします。
お礼
何回も丁寧に、ありがとうございました。 色々工夫した結果、まぁまぁできました。 けど、ブラウザ変えたらわからないし、正しいかわからないので、 参考に再度やってみたいと思います。 ありがとうございました。