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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
要素の幅をいろんな写真の幅に...
-
【Webサイト】画像が小さく表示...
-
iframe内をクリックさせない方...
-
IMGタグで画像の繰り返し使用は…
-
画像の上にテキスト配置で、拡...
-
クリッカブルマップの定義で、...
-
background-sizeの背景で最小値...
-
background-repeat CSS で切れ...
-
<ul>タグの上の空白って消せま...
-
HTMLのドロップダウンメニュー...
-
LightBoxの矢印の出し方
-
ブログで動画の広告を中央に配...
-
マウスオーバーで透明の白い幕...
-
かわいい文字にしたい!!
-
横長背景をページ読み込みの時...
-
<h1>などの見出しタグ 【SEO】
-
フッターの背景に色を指定した...
-
ドリームウィバー8(Dreamweaver...
-
HTML・CSSコーディングが上手く...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
IMGタグで画像の繰り返し使用は…
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
htmlかcssで背景の白い枠をなく...
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
LightBoxの矢印の出し方
-
コーディング中、右側に謎の余...
-
WEB上でディレクトリ内の画像を...
-
HP作成 作成した画像を動画の上...
-
ページごとに背景画像を変更し...
おすすめ情報