急いでいます！

HTMLコードを教えてください。写真の隙間を狭くするHTMLコードのことです。

解決済

質問者：godhappy
質問日時：2016/01/09 01:39
回答数：3件

よろしくお願いします。以前の回答者様ありがおうございます

HTMLコードを教えてください。写真の隙間を狭くするHTMLコードのことです。

下記URLに画像付きで説明しています。

http://nb-nobrand.chu.jp/

このURLのHTMLコードは下記です。配置位置も教えてください
よろしくお願いします

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.10.0 for Windows"><meta http-equiv="Content-Style-Type" content="text/css">

<script type="text/javascript"></SCRIPT>

<table>

<TR>

<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真.jpg ' )"><IMG src="写真..jpg " width="130" height="100"></A></TD>
<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真.jpg ' )"><IMG src="写真.jpg " width="130" height="100"></A></TD>
<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真.jpg ' )"><IMG src="写真.jpg " width="130" height="100"></A></TD>
<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真.jpg ' )"><IMG src="写真.jpg " width="130" height="100"></A></TD>

</TR>

<TR>
<TD colspan="4"><img src="写真.jpg " width="720" height="480" name="myBigImage"></TD>
</TR>
</table>
</body>

よろしくおねがいします

通報する

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

質問の本文を隠す

回答 (3件)

No.3

回答者：ごんじろう
回答日時：2016/01/09 13:01

htmlでは、デザイン的なことは触らないです。

デザイン的な事はcssで行います。
やり方ですが、<style></style>をhead内に挿入するやり方と、cssファイルを用意しheadから参照するやり方があります。多くのページを同じデザインにしたい場合には、参照するやり方がお勧めです。
どこの{何を:どうする}という書式になります。
tableの｛幅を:720pxにする;}という感じで
table{width:720px;}となります。htmlと違って単位は0以外は省略できません。

今回は、説明が楽なhead内に挿入するやり方を説明します。

大きなお世話1
アップする写真の比率は揃える方がいいですし、無駄に大きな写真は通信コストや表示速度の関係で控えた方が。
もし、比率が同じであれば、height:100px等としなくてもリキッドとなります。

大きなお世話2
サイトの表現技術は年々進化しています。古いソフトに頼るより、少し言語を学ばれるといいと思います。基本的なことを理解すれば、あてはめることのできる無料のライブラリーやプラグインが一杯でていますので、古いテーブルレイアウトは卒業されてはいかがでしょうか。

<head></head>の内側に以下を挿入してみてください。

<style>
table {
max-width: 720px;/*ここの720pxを100%とすると、画面の大きさに合わせて大きく表示します。ブラウザを大きくしたり小さくしたりしてみてください。*/
}
td {
width: 25%;/*4枚だったから1/4%*/
}
a {
width: 100%;
height: 100px;/*小さな写真の枠の高さを決めています。元写真の大きさを揃えたら消してください*/
display: block;
overflow: hidden;/*はみ出た部分は表示しない。元写真の大きさを揃えたら消してください*/
}
img {
width: 100%;
height: auto;
}
</style>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます　感謝します

通報する

お礼日時：2016/01/09 23:14

No.2

回答者： coba--coba
回答日時：2016/01/09 04:48

最も簡単な方法は、4つの画像の横幅（width）を130から177に変えることです。

もしCSSによるレイアウトを学ぶ気力があれば、他のやり方もできます。
例えば、まずは、ご質問のコードにある「width="130" height="100"」と「width="720" height="480"」を全て削除する。
そして、htmlの<head></head>タグの間に、以下のように書きます。

<style>
table {
max-width: 720px;
}
td {
width: 25%;
}
img {
width: 100%;
}
</style>

実はこれでは不十分ですが、まずは上記2つの方法をお勧めします。