- ベストアンサー
画像ははみ出すけど文字ははみ出さないtable
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
配置のために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"> <!-- ＿body{background-color:gray;} ＿p{line-height:1.5em;text-indent:1em;margin:0;} ＿p.figure{text-align:center;text-indent:0;line-height:1em;} ＿div.section{width:60%;min-width:400px;max-width:800px;margin:0 auto;background-color:white;padding:5px;} ＿p.type2 img{display:block;width:100%;height:auto;} --> ＿</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>
関連するQ&A
- テーブルの枠自体を折り曲げる
tableタグの事で質問です。 まずは画像をご覧になって欲しいのですが、横に長い表をブラウザの幅に合わせて画像のようにテーブルの枠自体を改行 したいのです。(テーブルの中の文字を改行するのではなく枠を tableタグの事で質問です。 まずは画像をご覧になって欲しいのですが、横に長い表をブラウザの幅に合わせて画像のようにテーブルの枠自体を改行 したいのです。(テーブルの中の文字を改行するのではなく枠ごと改行したいのです。 表の中には自動でプログラムされた値が入るようになっているらしく、TRタグはつかえません。(普通だと折り曲げてはいけないそうですが)この横長の表をHPに掲載すると横のスクロールバーが出るのが嫌なのと iframeで表示させねばならず、スペース的に画像であらわしいたように折り曲げたいのです。 http://okwave.jp/qa/q3312100.html ←このjavascriptが近いかと思うのですが、この例は１行の表の例なので 2行まとめて折り曲げる方法がわかりません。(javascriptがわかりません) どなたか上記のように表現する方法をご存知ではないですか？大急ぎでお願いします。
- ベストアンサー
- CSS
- HTML テーブルに画像を貼り付けるときのサイズ
ページいっぱいに広がるテーブルをひとつ用意し、 それを横に3等分して、それぞれのセルの下部に画像を表示しようと思いました。 しかし、表示してみると、テーブルは画面の横幅よりも広がってしまい、思うとおりに表示できません。 画像の代わりに文字を表示してみると、思った位置に表示できているのですが・・・。 画像を、画面の横幅を3等分したセルいっぱいに表示するにはどうしたらよいのでしょうか？ 現在のソース： <TABLE WIDTH="100%" HEIGHT="100%"> <TR ALIGN="center" VALIGN="bottom"> <TD WIDTH="33%"> <IMG SRC="～～" WIDTH="100%"> </TD> <TD WIDTH="33%"> <IMG SRC="～～" WIDTH="100%"> </TD> <TD WIDTH="33%"> <IMG SRC="～～" WIDTH="100%"> </TD> </TR> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブルの幅固定について
テーブルの幅固定を以下のように行っているのですが文字が指定した幅を超えると、 幅を指定してるにも関わらず、文字が改行せずに幅が伸びてしまいます。 自動的に改行になるとばかり思っていました。 <br>での改行は考えていないので、テーブルの幅を絶対的に固定する方法ありますでしょうか？ <table width="50" border="0" style="background-color: #cecece"> <tbody> <tr> <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- テーブル枠と文字
DreamWeaverでＨＰ作成中です。 たびたび質問させていただいていますが、テーブルの大きさがどうしても合いません。 【Ａ】<table width="100%" height="100%">という大きなテーブルの中に ３つ入れ子しています。 <tr><td> 【１】<table width="710" height="55"> 【２】<table width="710" height="15"> 【３】<table width="710" height="400"> </td></tr></table> これをベースに、【１】【２】のテーブルにはボタンを入れ、各ページにリンクさせています。 【３】のテーブルにインラインフレームを入れて、各ページ枠組と背景は同じのものを作っています。 【３】のインラインフレームを外しFlashファイルをはめこんだりすると、他のページと枠の大きさが変わってくるのですが、理由がわかりません。 もしかして、テーブルの枠自体に高さや幅があるのでしょうか。 例えば<table border="0">としていても、少し高さがあったりするために、全体の大きさが微妙に変わってしまう等。 もしくは、<td height="5">と設定しているのに、文字の大きさがそれ以上の高さを持っているため等。 文字の大きさはブラウザの設定等にも依存するのでしょうが、大体高さはどのくらいに設定すればよいのでしょうか。 それから、例えば【３】<table height="400">の中が<table height="380">と<table height="15">の２つだとするとまた大きさが変わってしまうのでしょうか。 とんちんかんなことを言っていますが、教えてくださいー。
- ベストアンサー
- HTML
- tableの幅をがっちり固定
<table width="500"> <tr> <td> 長い文字列長い文字列長い文字列長い文字列長い文字列.... </td> ... の場合、widthで500ピクセル幅を指定しているにもかかわらず横幅が500以上に成ってしまいます。 文字列に改行を加えればいいのですが、改行をしない方法で指定した500px内に納めることはできないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルの幅を固定するとnowrapがきかなくなるのですが・・・
いつもお世話になっております。どなたか教えて下さい。 テーブルの幅を”width=***”で固定しました（tableタグもｔｄタグも両方）。文字列を改行したくないので”nowrap”を書いて改行不可にしたら、改行は回避できたものの、幅が固定されずに文字の長さに合わせられてしまいました。 そこでこのサイト内で方法を模索していると”style=table-layout:fixed”で固定できると書いていたので追加すると幅の固定は出来たのですが、今度は文字列が改行されてしまいました。 どうすれば幅を固定し、改行も回避できるのでしょうか？ 文字列が長すぎるものは途切れていてもＯＫなので、枠をとにかく固定したいのです。 どなたか回答御願い致します。 ブラウザはIE５か６です。
- 締切済み
- HTML
- テーブル内に画像を表示したい。
テーブル内に画像を1枚表示したいです。 下記のようにIMGタグを用いると、画像が表示されますが、 横幅が100％の時の大きさで枠が表示 されます。横に余白があります。 この余白を無くして、テーブルの枠線が画像をピッタリ 囲む様にしたいです。 どなたか、ご教授願います。初心者なので詳しくお願い します。 ---------------------------------------------- <table border=1> <tr> <td > <img src='./test_size/image2.jpg' width='50%' > </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルの自動改行について
こんにちは。 現在HP作成をしているのですが、3行3列のテーブルで2列目の横幅を指定したいのですがどうやっても出来ません。 □■□ □■□ □■□ ■の部分の横幅を指定したいのです。 文字数が非常に多いために、タグで指定していくのが辛いので自動改行にしたいのですが自動改行からマニュアル改行へは検索で出てきたのですが逆のやり方が載っていなくて。。。 わかる方教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- dreamweaver8/テーブルの列幅
初心者です。よろしくお願いします。 ガイド本を読みながらその中の例題にしたがって勉強しているところです。 画像と文章入りのテーブル作成で、１行５列のテーブルをつくります。 １列目：スペーサーイメージ（横幅２０ピクセル） ２列目：画像 ３列目：スペーサーイメージ（横幅１０ピクセル） ４列目：文章 ５列目：スペーサーイメージ（横幅２０ピクセル） というようなテーブルなのですが、幅がめちゃくちゃです。ガイド本には、「１列目を入れた時点では正しく表示されませんが、他の列にコンテンツを挿入した時点で、正しく表示されます。」とか、「すべての列に入力が終わると、列幅が正しく表示されます。」と書いてあるんですが、全て同じように入力しても本の通りにならず、４列目の文章なんかは５文字ぐらいで次の行に改行されてしまい、長文が次々改行されありえない形のテーブルになってしまってます。 初心者なのでどこか見落としがあるのかもしれませんが、どうすれば列幅が正しく表示されるようになるでしょうか？
- ベストアンサー
- ホームページ作成ソフト
お礼
まるまるコピペしてみたのですが、画像はウィンドウズ幅を変えても最初に表示される大きさからかわらないですし、文字も画面のはじまで表示されていますよ？？？ まるまるコピペではダメでしたか？