PCでのHTMLタグのバナー

Question

現在PCトップページにてブランドバナーを目玉カテゴリで並べていますが、限度があるため増やすことができません。
HTMLタグでバナーを並べたいのですが、PC画面で705ピクセルに4つのバナーをぴったりと
並べたいのです。
（画像参照）

テーブルのタグはわかりますが、そのwidthの数字がわかりません。
widthはそれぞれ705を4で割った数字をいれるのでしょうか？
それとも"％"でいれるのでしょうか？

宜しくお願い致します。

Answer

ECマスターズの田中です。

一番上のタグに、CSSで
「table-layout: fixed;」の指定を適用させてください。
そうすることで、各列ごとの幅指定は不要になります。
（幅を指定していない列に対して、横幅が均等に割り振られます）


例）

↓



更に、「width: 100%;」の指定を加えることで、
タグ全体の幅を、親要素の幅一杯に拡げることができますので、
実際に適用させてお試しください。


例）

↓

Answer

いつもお世話になっております。

アップロードした画像のようになってしまいました。
タグが間違っているのでしょうね。
お手数ですが、間違っている個所教えて頂きたいです。

もう一点は、
バナー同士がくっついてしまいます。
少し間隔を開けたいのですが・・・。

Answer

ECマスターズの田中です。

＞お手数ですが、間違っている個所教えて頂きたいです。
各テーブルの要素を、 〜 で囲んでください。

タグは、１つの表を定義するタグであり、
 〜 タグで１つの行を、その中に入る 〜 タグで１つのセルを定義します。
そのため、各タグを正確に組み立てないと、
ブラウザがどのように表を作ればいいのかわからなくなり、誤表示の原因となります。

今回の場合、タグはすでにありますので、
その中のバナーを1つずつ、タグ と タグ で挟めば解決となります。

＞バナー同士がくっついてしまいます。
＞少し間隔を開けたいのですが・・・。
バナーをタグで囲んだ後、間に固定幅のタグを挿入してください。
中身は何らか記載する必要がありますので、全角スペース(　)をご記入ください。
タグの幅を指定しないと、バナーと同じ幅が割り当てられますので、
width="10" のように、幅をご指定ください。

最後に、バナー画像の表示幅を、セルの幅に合わせる必要がありますので、
各タグに width="100%" をご指定ください。

以上の修正を加えると、下記のようなHTMLタグになります。

Answer

いつもありがとうございます。
貼り付けることができました。
のちほど完成させたいと思います。