![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
HTMLで色々テーブルなど作ってみているのですが
どのように記述したらいいのか分からなくなってしまったのでご存知でしたら教えてください。
画像を貼りその右側に一文を添えています
それが何段もあります。
画像の幅が同じ場合は分かったのですが、
画像の幅が変わった時に文章の始点を変える方法が(2)のような感じにする方法分かりません。
教えてください。
(1)画像が同じ大きさの場合(できました)
画像 文章
画像 文章
画像 文章
(2)画像の大きさは違い文章の始点も変わる
画像画像 文章
画像 文章
画像画像画像 文章
No.5ベストアンサー
- 回答日時:
No.2です。
>テーブルタグを使ったらイメージしていた方法に近づけるのではないかと思ってテーブルで表という表現を使いました。
初学者でしたら、HTMLの基本、「HTMLは文書構造をマークアップするもの、スタイルシートはプレゼンテーションを指定するもの」を、徹底的に叩き込んでおいてください。
★2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★2.3.5 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★11.1 表の概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
デザインするために、HTMLがあるのじゃない!!
私も10年前はデザインのために使ってました。
本題ですが、色々なサイズの写真を並べると実際のところ、とても見難いものになるので、通常は極力画像サイズを統一します(特に横幅は)から、「画像の幅が変わった時に文章の始点を変える方法が・・・」が起きないようにします。ですから、この様な難題に遭遇することは通常はありません。
しかし、出来ないわけではありません。IEなら、IE8以降および他のウェブ標準のブラウザでしたら、下記のようなシンプルなHTMLでできます。古いブラウザは対応していませんが、文書構造さえしっかりしていれば、できると言うことの見本として示しておきます。
いきなり、ここまでは難しいと思いますが、文書構造でHTMLをマークアップする意味はよくわかると思います。何年もして振り返ってみても、あるいは人が書いたものでも、そして検索エンジンも、このHTMLならなにを書いたか理解できるでしょう。
<div class="album">
<h2>汎用ブロックでマークアップ</h2>
<div>
<h3><img src="./images/sample1.jpg" width="240" height="169" alt="萩"></h3>
<div class="explanation"><!-- 説明(explanation) -->
<p>画像の説明が入ります。</p>
</div>
</div>
<div>
<h3><img src="./images/sample1_s.jpg" width="48" height="33" alt="尾花"></h3>
<div class="explanation">
<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
<p>ここに画像の説明が入ります。その説明は、このように画像に比べてとても長い場合もあります。</p>
<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
</div>
</div>
<div>
<h3><img src="./images/topBis.png" width="200" height="150" alt="葛花"></h3>
<div class="explanation">
<p>ときには、この文章のように、画像のとってもとっても長い説明が続く場合があります。</p>
<p>IE5.5以前は、センターによらない。</p>
<p>IE7以前は、floatとして処理されるので長い文章が画像の下に回りこむ</p>
<p>IE8以降などウェブ標準ブラウザだと、一つ一つのテーブルとして表示される。</p>
</div>
</div>
</div>
[実物]HTML4.01strictです。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★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">
<!--
div.album{width:60%;margin:0 auto;background-color:silver;}
div.album p{margin:0 1em;line-height:1.6em;text-indent:1em;}
div.album div,div.album hr{clear:left;}/* IE6以前 */
div.album hr{visibility:hidden;}/* IE6以前 */
div.album div div{clear:none;}/* IE6以前 */
div.album div h3 img{float:left;margin:5px 10px}
div.album div{display:table;}
div.album div h2,div.album div div{display:table-cell;background-color:rgb(200,200,200);vertical-align:top;}
div.album div div{padding-top:1em;}
-->
_</style>
</head>
<body>
_<h1>サンプル</h1>
_<div class="album">
__<h2>汎用ブロックでマークアップ</h2>
__<div>
___<h3><img src="./images/sample1.jpg" width="240" height="169" alt="萩"></h3>
___<div class="explanation"><!-- 説明(explanation) -->
____<p>秋の七草の筆頭に・・</p>
___</div>
__</div>
__<div>
___<h3><img src="./images/sample1_s.jpg" width="48" height="33" alt="尾花"></h3>
___<div class="explanation">
____<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
____<p>ここに画像の説明が入ります。その説明は、このように画像に比べてとても長い場合もあります。</p>
____<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
___</div>
__</div>
__<div>
___<h3><img src="./images/topBis.png" width="200" height="150" alt="葛花"></h3>
___<div class="explanation">
____<p>ときには、この文章のように、画像のとってもとっても長い説明が続く場合があります。</p>
____<p>IE5.5以前は、センターによらない。</p>
____<p>IE7以前は、floatとして処理されるので長い文章が画像の下に回りこむ</p>
____<p>IE8以降などウェブ標準ブラウザだと、一つ一つのテーブルとして表示される。</p>
___</div>
__</div>
__<hr>
_</div>
</body>
</html>
No.6
- 回答日時:
HTMLを変えていいならこれでもできますが。
<table>
<tbody>
<tr><td><img src="" align="left">あいうえお</td></tr>
<tr><td><img src="" align="left">かきくけこ</td></tr>
<tr><td><img src="" align="left">さしすせそ</td></tr>
</tbody>
</table>
なぜ同じデザインになるものに、たくさんの書き方があるのかというと、
HTMLタグにそれぞれ意味があるからです。
HTMLを勉強すれば、その意味は必ず勉強の範疇に入るはずですので、わざわざ言う必要はないと思うのですが、、、
タグ辞典を読んでください。全部、意味が書いてあります。
No.4
- 回答日時:
おっしゃっているのは、表ではない気もしますが、表現したいことはsyuwaruz さんにしかわからないので、表でも表現してみました。
●まずは表で
左右のn個をくっつけるにはcolspanを使います。
上下のn個をくっつけるにはrowspanを使います。例ではcolspan="2"、rowspan="2"としていますが、3でも4でも好きなだけ結合させてください。
<table>
<tr>
<th>時間</th>
<th>5時00分~12時00分</th>
<th>12時00分~18時00分</th>
<th>18時00分~25時00分</th>
<th>01時00分~5時00分</th>
</tr>
<tr>
<th>赤いステッカーの車両</th>
<td colspan="2">女性専用車</td>
<td>男女共ご利用いただけます</td>
<td rowspan="2">どなたもご利用になれません</td>
</tr>
<tr>
<th>黄色いステッカーの車両</th>
<td>小学生のみご利用いただけます</td>
<td colspan="2">制服着用の方のみご利用いただけます</td>
</tr>
<tr>
<th>青いステッカーの車両</th>
<td colspan="2">どなたでもご乗車いただけます</td>
<td>男性専用車</td>
<td>どなたでもお泊りになります</td>
</tr>
</table>
見にくい場合は</head>を
<style type="text/css">
table{border-collapse:collapse;border:solid #000 2px;}
td,th{border:solid #000 2px;text-align:center;}
th{background:#aaaaaa;}
</style>
</head>
としてみてください。表にスタイルシートを使ってデザインをつけました。
●表ではなくデザインとして画像横に文章をつける方法
【1】
<p>画像画像文章</p>
ではだめなの?表にしなければ、そのまま成り行き、画像はおおきな文字のように扱われると思います。そのまま並びませんか?
【2】
<div><p>画像画像</p><p>文章</p><div>
<div><p>画像</p><p>文章</p><div>
<div><p>画像画像画像</p><p>文章</p><div>
画像の役割がわからなかったので、段落である<p>としています。画像の段落と文章の段落を意味を持たないdivでまとめます。1まとまりとセットにすることで、他とわけます。
画像は、お好きな<img ~>にしてください。
そしてスタイルシートです。先ほどと同じ場所に入れてください。
<style type="text/css">
p{display:inline;padding:10px;}
</style>
</head>
【2’】
htmlは2と同じ。</head>を
<style type="text/css">
div{clear:left;}
p{float:left;padding:10px;}
</style>
</head>
以上4つの方法のソースでした。スタイルシートを学べば表現力がアップします。今回はわざと、現実の使用には耐えないかもしれないデザインにしています。今、出されている場所にはよくなっても、他の場所がおかしくなることが予想されますので、その時は、ご自分でcss(スタイルシート)の基本や、局所化(クラス等)を学ばれるといいと思います。
ありがとうございます。
色々な表現方法があるんですね。
表として使うというよりはレイアウトとしての枠?のような感じでテーブルを使ってました。
画像の隣に画像の説明文のようなモノを配置しようと思ってやっていたのですが、
画像の大きさが違うものになると横の文章との間隔が見栄えがヘンになるかなと思ってくっつけられたらどうなるのかなと思ったのです。
【1】ですが、一番簡単な方法ですが、元々テーブルでやっていたので全く思いつきませんでした。
その他の方法も出来ますね。こんなにも種類あるんですね。
スタイルシートなども勉強したいと思います。
No.3
- 回答日時:
見た目の調整はスタイルシート(CSS)を使用してください。
画像ではありませんが、以下のコードで(2)のようになりました。
DOCTYPEはXHTML1.0 Transitionalを指定しています。
WindowsXP、Safari5.1、IE8で確認しましたが、新しめのブラウザでないと、(1)のように表示されるかもしれません。
<style>
tr{
clear: left;
}
th, td{
display: block;
float: left;
width: auto; /* tdタグ属性などでwidthを指定してなければ消しても良いと思います */
height: auto;/* 横並びに直接関係ありませんので消しても良いと思います*/
}
</style>
<table>
<tbody>
<tr><th>アイウエオアイウエオ</th><td>あいうえお</td></tr>
<tr><th>カキクケコ</th><td>かきくけこ</td></tr>
<tr><th>サシスセソサシスセソサシスセソ</th><td>さしすせそ</td></tr>
</tbody>
</table>
ありがとうございます。
その記述でできるようです。
見れたり見れなかったり色々状況に変化が出てきてしまう可能性があるのですね。勉強になります。
No.2
- 回答日時:
それは表ですか?
★単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
の周辺をお読みください。
ただ、tableを二重に入れ子にすれば出来ますが、上記の理由でなしとすると、その画像と説明が何であるかという文書構造に従ったマークアップをしてスタイルシートでデザインします。
ありがとうございます。
一般的な表というよりもレイアウトでこうしたら出来るのではないかと試行錯誤の中で
テーブルタグを使ったらイメージしていた方法に近づけるのではないかと思ってテーブルで表という表現を使いました。
ですが、レイアウトのためには使うべきでは無いんですね。
HTMLをやっと覚え始めたばかりですがスタイルシートも勉強してみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
ブラウザによってテーブルのセ...
-
固定ヘッダーがある時のページ...
-
Tableタグ内のspan styleが適応...
-
テーブルの一部分のセルだけに...
-
TDタグ内での均等割付の仕方
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
td要素内のdiv要素をセンタリン...
-
cssで、テーブルのtdの中の文字...
-
trとtrの間
-
センタリングしたページの印刷
-
table内の画像を中央寄せ、のせ...
-
テーブルのtext-alignがきかな...
-
CSSで空けた文頭の全角スペース...
-
Visual Studio で CLR 開発でデ...
-
XHTMLに関する質問 順序が逆に...
-
CSS:横一列にリンクする文字の...
-
Tableタグで作成した表の縮小
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
divで囲んだ文字が消える
-
formのinputなどの幅100%指定
-
td要素内のdiv要素をセンタリン...
-
cssで、テーブルのtdの中の文字...
-
表とリスト(ulとtable)の違い...
-
Dreamweaver デザインビューの...
-
<img>タグにCSSのclass設定可能?
-
trとtrの間
-
Firefoxを使ってるのですがズー...
-
ブラウザによってテーブルのセ...
-
td width="180" と固定してるの...
-
vbscriptで時計を作りたい
-
テーブル内のテーブルの高さを...
おすすめ情報