CSSとHTMLの編集について教えてください。

Question

お店を作っているのですが、幅の修正が巧くいきません。
(1)商品リストでは各商品に枠は無いので、いちおう黒枠で示したのが大体の商品テーブルだと思うのですが、画像から右端まで間隔があいてしまっています。これを枠いっぱいまできちんと表示させる方法を教えてください。

(2)枠の縦寸法が、各商品バラバラになってしまっています。これを統一する方法を教えてください。

(3)２行目の商品との間隔が広すぎます。これを狭める方法を教えてください。

(4)商品名と「ＮＥＷ」の位置を入れ替える方法を教えてください。

(5)商品名（４が完成した後はこの位置にＮＥＷがきている）と商品画像との間隔を狭める方法を教えてください。

ＣＳＳ部分は以下の通りです。
↓
http://oshietekudasai.web.fc2.com/

ORUKA1951 · Accepted Answer

スタイルシートのみです。

html,body{margin:0;padding:0;}
div.header,div.section,div.footer{
＿width:90%;margin:0 auto;
＿max-width:900px;min-width:640px;
}
div.section{position:relative;}
div.section:after{content:"";display:block;width:100%;clear:left;}
div.section div{margin:0;}
#merchandise{width:80%;margin-left:20%;}
#merchandise ol,merchandise ol li{
＿display:block;list-style:none;margin:0;padding:0;
}
#merchandise ol li{
＿width:220px;height:360px;overflow:hidden;float:left;
＿border:solid 1px gray;position:relative;margin:5px;
＿text-align:center;padding-top:5px;
}
#merchandise ol li ol li{
＿width:100%;height:auto;border:none;
＿position:static;margin:0;margin:5px;
}
#merchandise ol li ol li+li{
＿width:200px;text-align:left;text-indent:1em;margin-top:20px;
＿height:70px;line-height:18px;padding:2px 5px;
}
#merchandise ol li ol li+li+li{
＿text-align:right;text-indent:0;position:absolute;
＿bottom:5px;right:5px;border:none;height:auto;
}
#merchandise ol li ol li+li:hover{
＿position:relatve;height:106px;z-index:100;overflow:auto;
＿background-color:white;border:solid 1px black;
＿box-shadow:3px 3px 3px 2px rgba(0,0,0,4);
}
#merchandise ol li ol li+li+li:hover{height:auto;border:none;box-shadow:none;}
#merchandise ol li ol li+li:hover+li{z-index:-10;}
#merchandise ol li.new{padding-top:220px;text-align:right;height:145px;z-index:20;}
#merchandise ol li.new ol{position:relative;top:-216px;height:360;z-index:-10;}
#merchandise ol li.new ol li+li+li{
＿text-align:right;position:absolute;bottom:-340px;
}
#merchandise ol li.new:before{
＿content:"NEW";color:red;position:absolute;top:0px;
＿left:0;border:solid 2px red;padding:2px;z-index:10;
}
div.section div.tableContent{
＿position:absolute;left:0;top:0;width:20%;height:100%;
＿background-color:rgb(220,220,255);
}
div.section h2{line-height:2em;background-color:aqua;margin-bottom:10px;}

ORUKA1951 · Answer

　たぶん、オーサリングツールのテンプレートを使用されているのだと思います。スタイルシートがあれだけ複雑でややこしいということは、HTMLもとても酷いものです。HTMLを見ながら修正しないとなりませんが、とてもじゃないけど、相当な技量があっても無理難題ではないかと。　このような複雑なデザインをされる場合は、テキストエディタのほうが楽です。HTMLが下記サンプルのように極めてシンプルになりますから、デザインの自由度が上がります。===逆に言うと、どのようにもデザインできるということです。　少し時間が取れたので簡単な実例を書いて書きます。画像は商品ごとに200px×200px以上の正方形のものを用意してください。(HTML中の画像へのパスだけ変更すればよい、サイズは触らない) ★HTMLは文書構造しか記述してありません。デザインの要素は含んでいませんから、文字の挿入・置き換え程度の修正は、誰でも簡単にできるでしょう。　class名は、文書構造を示すものにしてあります。--それが大原則ですから-- 　新製品でなくなったら、HTMLのclass="new"を消せばよいだけです。 ★スタイルシートは、スマートホンもパソコンでも利用できるシンプルなものにしてあります。　ウィンドウが狭いと列数が変わります。 ★印刷用スタイルシートは用意していません。 ★ベンダーフィックス(ブラウザベンダー毎の差の対策)はしてありませんが、IE７以降は閲覧に支障はないはずです。 ★HTML4.01strict+CSS3(一部)です。 ★タブは＿に置換してあるので戻すこと。＿＿サンプル＿＿＿＿＿＿＿

＿＿

＿＿＿

商品一覧

＿＿＿

商品1 ＿＿＿＿＿
2. 商品説明・・ここに商品説明が入る。
3. 購入数
＿＿＿＿
商品2 ＿＿＿＿＿
2. 商品説明は時にはとても長くなるのでマウスオーバーしたときのみすべて表示されるようにすると良いでしょう。たとえばこの説明は、説明文がだらだらだらだら、だらだらだらだらだらだらとても長い例を示している。
3. 購入数
＿＿＿＿
商品3 ＿＿＿＿＿
2. 商品説明
3. 購入数
＿＿＿＿
商品4 ＿＿＿＿＿
2. 商品説明
3. 購入数
＿＿＿＿
商品5 ＿＿＿＿＿
2. 商品説明
3. 購入数
＿＿＿＿
商品6 ＿＿＿＿＿
2. 商品説明
3. 購入数
＿＿＿＿

＿＿

＿＿＿

商品1
商品2
商品3
商品4
商品5
商品6

＿＿

＿

ORUKA1951 · Answer

商品リストだという事でマークアップは下記のようなものであるはずですね。＿

＿＿

商品名＿＿＿＿
2. 商品説明
3. ＿購入数
＿＿＿
商品名＿＿＿＿
2. 商品説明
3. ＿購入数
＿＿＿

＿

こうしてきちんと文書構造が記述されていたら、スタイルシートで自由にデザインできるはずです。HTMLもスタイルシートも簡単・・ #merchandise ol,merchandise ol li{display:block;list-style:none;margin:0;padding:0;} #merchandise ol li{width:240px;height:360px;overflow:hidden;float:left;border:solid 1px gray;position:relative;margin:5px;} #merchandise ol li ol li{width:100%;height:auto;border:none;position:static;margin:0;} #merchandise ol li{text-align:center;} #merchandise ol li ol li+li{text-align:left;} #merchandise ol li ol li+li+li{text-align:right;position:absolute;bottom:0;} #merchandise ol li.new{padding-top:220px;text-align:right;height:140px;} #merchandise ol li.new ol{position:relative;top:-220px;height:360;} #merchandise ol li.new ol li+li+li{text-align:right;position:absolute;bottom:-340px;} #merchandise ol li.new:before{content:"NEW";color:red;position:absolute;top:0px;left:0;border:solid 2px red;padding:2px;z-index:10;}

CSSとHTMLの編集について教えてください。

スタイルシートのみです。

たぶん、オーサリングツールのテンプレートを使用されているのだと思います。

商品リストだという事でマークアップは下記のようなものであるはずですね。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　たぶん、オーサリングツールのテンプレートを使用されているのだと思います。