ベストアンサー

画像ははみ出すけど文字ははみ出さないtable

2011/09/01 15:00

こんにちは tableでwidthを６００に設定すると、６００まで行ったら自動改行されますが、そのテーブルの中に幅が６００を超える画像を入れると、画像がはみ出して文字も画像の横幅に合わせて改行してしまいます。これを、画像は６００を超えるとテーブル枠をはみだしますが、文字はそのまま６００の位置まで来たら改行されるという風にしたいのです。つまりブログみたいな形にしたいです。 tableでなくてもかまいません。よろしくおねがいします。

310ao
お礼率86% (303/349)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/01 19:54 回答No.1

配置のためにtableを使用するのは間違いです。また、HTMLを作成する上でインライン要素・ブロック要素・置換要素(・匿名ボックス・匿名インラインブロック・・・これは知らなくてもよい)は、最も重要な知識ですから、まともなマニュアルなら最初に書いてある。　画像は置換インライン要素ですから、その大きさは画像サイズによって伸縮します。tableのセルはブロック要素ですから内容の大きさに合わせて伸縮します。特にtableの描画(整形)は、ややこしいですが理解しておく必要があります。 11.3 視覚系ユーザエージェントによる表の整形 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3 ) 　この場合は、そもそもtableで配置するのが間違い(たぶん)ですから、次のようにします。HTMLは文書構造にしたがってstrictで書く。デザインはスタイルシートで行うと、大抵のしたいことは出来る。ウィンドウ幅を変えて御覧なさい。 ★下記ソース中、タブは＿に置換してあるので、タブに戻すこと。 ★同様にシステムの都合で、http://は、http：//に書き換えてあるので戻すこと(全角：を半角:に戻す) ☆HTML4.01strictで書かれています。　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　でチェック済み ☆CSSは2.1です。　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　でチェック済み <!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"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="section"> ＿<h1>画像ははみ出すけど文字ははみ出さない</h1> ＿<p>段落・・ここに文章が入る</p> ＿<p>こんにちは</p> ＿<p>tableでwidthを６００に設定すると、６００まで行ったら自動改行されますが、そのテーブルの中に幅が６００を超える画像を入れると、画像がはみ出して文字も画像の横幅に合わせて改行してしまいます。</p> ＿<p>これを、画像は６００を超えるとテーブル枠をはみだしますが、文字はそのまま６００の位置まで来たら改行されるという風にしたいのです。</p> ＿<p>つまりブログみたいな形にしたいです。</p> ＿<p>tableでなくてもかまいません。</p> ＿<p>よろしくおねがいします。</p> ＿<h2>画像サンプル</h2> ＿<h3>小さな画像の場合</h3> ＿<p>ウィンドウ幅を小さくしてください。狭くなるとはみ出す。</p> ＿<p class="figure"><img src="http：//upload.wikimedia.org/wikipedia/ja/thumb/6/62/Charonda_Hokkaido_Japan.JPG/751px-Charonda_Hokkaido_Japan.JPG" width="500" height="400" alt="オオムラサキのオス"><br> ＿<a href="http：//ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Charonda_Hokkaido_Japan.JPG">ファイル:Charonda Hokkaido Japan.JPG - Wikipedia</a>より</p> ＿<h3>伸縮させる</h3> ＿<p>幅に合わせて伸縮させる場合は、インライン要素である画像をブロック要素に変える</p> ＿<p class="figure type2"><img src="http：//upload.wikimedia.org/wikipedia/ja/thumb/6/62/Charonda_Hokkaido_Japan.JPG/751px-Charonda_Hokkaido_Japan.JPG" width="500" height="400" alt="オオムラサキのオス"><br> ＿<a href="http：//ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Charonda_Hokkaido_Japan.JPG">ファイル:Charonda Hokkaido Japan.JPG - Wikipedia</a>より</p> ＿<h3>大きな画像</h3> ＿<p>画像は置換インライン要素なので画像の大きさになるが、段落<p>は非置換ブロックなのでコンテナブロックの大きさに合わせて伸縮するのでこの様に改行される。</p> ＿<p class="figure"><img src="http：//upload.wikimedia.org/wikipedia/ja/thumb/6/62/Charonda_Hokkaido_Japan.JPG/751px-Charonda_Hokkaido_Japan.JPG" width="751" height="600" alt="オオムラサキのオス"><br> ＿<a href="http：//ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Charonda_Hokkaido_Japan.JPG">ファイル:Charonda Hokkaido Japan.JPG - Wikipedia</a>より</p> </div> </body> </html>

質問者