アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：310ao
  • 質問日時：
  • 回答数：2件

こんにちは

tableでwidthを６００に設定すると、６００まで行ったら自動改行されますが、
そのテーブルの中に幅が６００を超える画像を入れると、画像がはみ出して文字も画像の横幅に合わせて改行してしまいます。

これを、画像は６００を超えるとテーブル枠をはみだしますが、
文字はそのまま６００の位置まで来たら改行される
という風にしたいのです。

つまりブログみたいな形にしたいです。

tableでなくてもかまいません。
よろしくおねがいします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

配置のためにtableを使用するのは間違いです。


また、HTMLを作成する上でインライン要素・ブロック要素・置換要素(・匿名ボックス・匿名インラインブロック・・・これは知らなくてもよい)は、最も重要な知識ですから、まともなマニュアルなら最初に書いてある。
　画像は置換インライン要素ですから、その大きさは画像サイズによって伸縮します。tableのセルはブロック要素ですから内容の大きさに合わせて伸縮します。特にtableの描画(整形)は、ややこしいですが理解しておく必要があります。
11.3 視覚系ユーザエージェントによる表の整形 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　この場合は、そもそもtableで配置するのが間違い(たぶん)ですから、次のようにします。HTMLは文書構造にしたがってstrictで書く。デザインはスタイルシートで行うと、大抵のしたいことは出来る。ウィンドウ幅を変えて御覧なさい。

★下記ソース中、タブは＿に置換してあるので、タブに戻すこと。
★同様にシステムの都合で、http://は、http：//に書き換えてあるので戻すこと(全角：
を半角:に戻す)

☆HTML4.01strictで書かれています。
　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
　でチェック済み
☆CSSは2.1です。
　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　でチェック済み

<!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>画像は置換インライン要素なので画像の大きさになるが、段落&lt;p&gt;は非置換ブロックなのでコンテナブロックの大きさに合わせて伸縮するのでこの様に改行される。</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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

まるまるコピペしてみたのですが、画像はウィンドウズ幅を変えても最初に表示される大きさからかわらないですし、文字も画面のはじまで表示されていますよ？？？
まるまるコピペではダメでしたか？

通報する
お礼日時：2011/09/02 08:28

No.2

  • 回答者： ORUKA1951
  • 回答日時：

＞まるまるコピペではダメでしたか？



★下記ソース中、タブは＿に置換してあるので、タブに戻すこと。
★同様にシステムの都合で、http://は、http：//に書き換えてあるので戻すこと(全角：
を半角:に戻す)

　添付図のようになるはず、スタイルシートは有効になってますか？
「画像ははみ出すけど文字ははみ出さないta」の回答画像2
    • good
    • 0
    • 件
通報する
この回答へのお礼

わ、ごめんなさい：だけ直してました
そしてできました！！
ほんとにありがとうございます！！

通報する
お礼日時：2011/09/02 09:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報