![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.1ベストアンサー
- 回答日時:
配置のために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を600に設定すると、600まで行ったら自動改行されますが、そのテーブルの中に幅が600を超える画像を入れると、画像がはみ出して文字も画像の横幅に合わせて改行してしまいます。</p>
_<p>これを、画像は600を超えるとテーブル枠をはみだしますが、文字はそのまま600の位置まで来たら改行される
という風にしたいのです。</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>
この回答へのお礼
お礼日時:2011/09/02 08:28
まるまるコピペしてみたのですが、画像はウィンドウズ幅を変えても最初に表示される大きさからかわらないですし、文字も画面のはじまで表示されていますよ???
まるまるコピペではダメでしたか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ画像 複数回使用
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
lightbox2で画像を天地左右中央...
-
background-repeat CSS で切れ...
-
リストビューのTextBackground...
-
PNGがうまく表示されない・・・。
-
CSSでの動画のマスク処理
-
WEB上でディレクトリ内の画像を...
-
CSS マウスオーバーでテキスト...
-
【Webサイト】画像が小さく表示...
-
LightBoxの矢印の出し方
-
dreamweaverでテンプレートを作...
-
要素の幅をいろんな写真の幅に...
-
htmlについて教えてください。 ...
-
IMGタグで画像の繰り返し使用は…
-
CSSで背景画像をランダムに表示...
-
PDFの保存ボタンが表示されません
-
ロゴマークだけを抜き取って貼...
-
透過背景画像のビットマップ形...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-sizeの背景で最小値...
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeでcontainする...
-
同じ画像 複数回使用
-
コーディング中、右側に謎の余...
-
particles.jsの背景の上にテキ...
-
背景画像が半分しか表示されない
-
htmlかcssで背景の白い枠をなく...
-
LightBoxの矢印の出し方
-
画像の上に
-
gif画像でたまに背景がグレーに...
おすすめ情報