ベストアンサー

ホームページに表を挿入、列幅の固定方法

2011/12/12 21:04

ホームページに表を挿入（列：2　行：2）し、そこへ画像を入れると列幅が広がってしまいます。列幅を指定、挿入した画像が列幅に合わせて縮小表示される方法はあるでしょうか？。作成にはホームページビルダー15を使っています

dawn2dusk
お礼率50% (106/210)

ホームページ作成ソフト
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2011/12/12 21:57 回答No.1

画像を縮小出来るけどブラウザによっては画像がボケるから本来は縮小したサムネイル画像を作った方が良いのですが、（例：枠を100pxにする場合） width="" height=""を好きに変更すると画像は強制的に縮小拡大します。 <img src="example.jpg" width="100" height="100" alt="*" /> 画像を　width="100" height="100"　のようにすれば良い。毎回画像のwidth="" height=""を変更するのも面倒というなら CSSでどうでしょう。（画像.imgのみ入れ替えてみる） <html> <head> <style type="text/css"> td{ width:100px;} .table1 td img{ width:100px; height:100px;} .table2 div{ width:100px; height:100px; overflow:hidden;} /* または、overflow:hidden; を→ overflow:auto; */ </style> </head> <body> <div> <table class="table1" border="1"> <tr> <td>1</td> <td><img src="example.jpg" width="260" height="260" alt="*" /></td> </tr> </table> <table class="table2" border="1"> <tr> <td>2</td> <td><div> <img src="example.jpg" width="260" height="260" alt="*" /> </div></td> </tr> </table> </div> </body> </html>

質問者

お礼 2011/12/13 13:09

ありがとうございます。やってみます

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/13 13:37 回答No.3

あくまで表だとして・・ tableに適当なクラス名(たとえばtest)をつけて、セル幅をwidth="300" とか指定してあると・・スタイルシートに、 table.test tr td img{display:block;width:100%;height:auto;} と書き加えれば、どんな画像を入れようと・・　画像はインライン要素ですが、スタイルシートでブロックに変換すると、それが含まれる親コンテナブロックのサイズを参照することが出来ます。 ★あくまで表だとして・・　デザインのために表を使うのは、「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」と明確に否定されています。　特にビルダーには「テーブルレイアウトを推奨しないウェブ標準に基づくHTML本来の使い方からかけ離れている、 ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC#.E6.A8.99.E6.BA.96.E3.83.A2.E3.83.BC.E3.83.89 )」と問題点も多いので気をつけてください。

質問者

お礼 2011/12/14 09:46

皆さん大変詳しくて感服しております。ありがとうございました

ログインすると、全ての回答が全文表示されます。

Calm Trip（@CalmTrip）
ベストアンサー率41% (511/1244)

2011/12/13 10:13 回答No.2

単に、画像を指定 <IMG src="samp_01.jpg" border="0" alt="samp_01"> に、幅を指定＜width="256"＞すれば、上手くいくと思います。 ※ 高さを指定しないと、幅と同率で、縮小・拡大します。 <IMG src="samp_01.jpg" width="256" border="0" alt="samp_01">

質問者