- ベストアンサー
CSSとHTMLの編集について教えてください。
お店を作っているのですが、幅の修正が巧くいきません。 (1)商品リストでは各商品に枠は無いので、いちおう黒枠で示したのが大体の商品テーブルだと思うのですが、画像から右端まで間隔があいてしまっています。これを枠いっぱいまできちんと表示させる方法を教えてください。 (2)枠の縦寸法が、各商品バラバラになってしまっています。これを統一する方法を教えてください。 (3)２行目の商品との間隔が広すぎます。これを狭める方法を教えてください。 (4)商品名と「ＮＥＷ」の位置を入れ替える方法を教えてください。 (5)商品名（４が完成した後はこの位置にＮＥＷがきている）と商品画像との間隔を狭める方法を教えてください。 ＣＳＳ部分は以下の通りです。 ↓ http://oshietekudasai.web.fc2.com/
- oshietekun1go
- お礼率7% (2/27)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートのみです。 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;}
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たぶん、オーサリングツールのテンプレートを使用されているのだと思います。スタイルシートがあれだけ複雑でややこしいということは、HTMLもとても酷いものです。HTMLを見ながら修正しないとなりませんが、とてもじゃないけど、相当な技量があっても無理難題ではないかと。 このような複雑なデザインをされる場合は、テキストエディタのほうが楽です。HTMLが下記サンプルのように極めてシンプルになりますから、デザインの自由度が上がります。===逆に言うと、どのようにもデザインできるということです。 少し時間が取れたので簡単な実例を書いて書きます。画像は商品ごとに200px×200px以上の正方形のものを用意してください。(HTML中の画像へのパスだけ変更すればよい、サイズは触らない) ★HTMLは文書構造しか記述してありません。デザインの要素は含んでいませんから、文字の挿入・置き換え程度の修正は、誰でも簡単にできるでしょう。 class名は、文書構造を示すものにしてあります。--それが大原則ですから-- 新製品でなくなったら、HTMLのclass="new"を消せばよいだけです。 ★スタイルシートは、スマートホンもパソコンでも利用できるシンプルなものにしてあります。 ウィンドウが狭いと列数が変わります。 ★印刷用スタイルシートは用意していません。 ★ベンダーフィックス(ブラウザベンダー毎の差の対策)はしてありませんが、IE７以降は閲覧に支障はないはずです。 ★HTML4.01strict+CSS3(一部)です。 ★タブは＿に置換してあるので戻すこと。 <!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" media="screen"> <!-- ・・・【中略】・・・次の回答で --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<div class="section" id="merchandise"> ＿＿＿<h2>商品一覧</h2> ＿＿＿<ol> ＿＿＿＿<li id="p1">商品1 ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><img src="./images/efg1.jpg" width="180" height="180" alt="インバータ扇風機"></li> ＿＿＿＿＿＿<li>商品説明・・ここに商品説明が入る。</li> ＿＿＿＿＿＿<li><form>購入数<input type="text" name="pa1" size="2"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="new" id="p2">商品2 ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><img src="./images/efg2.jpg" width="180" height="180" alt="普及型扇風機"></li> ＿＿＿＿＿＿<li>商品説明は時にはとても長くなるのでマウスオーバーしたときのみすべて表示されるようにすると良いでしょう。たとえばこの説明は、説明文がだらだらだらだら、だらだらだらだらだらだらとても長い例を示している。</li> ＿＿＿＿＿＿<li><form>購入数<input type="text" name="pa1" size="2"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li id="p3">商品3 ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><img src="./images/efg1.jpg" width="180" height="180" alt="インバータ扇風機"></li> ＿＿＿＿＿＿<li>商品説明</li> ＿＿＿＿＿＿<li><form>購入数<input type="text" name="pa1" size="2"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="new" id="p4">商品4 ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><img src="./images/efg2.jpg" width="180" height="180" alt="普及型扇風機"></li> ＿＿＿＿＿＿<li>商品説明</li> ＿＿＿＿＿＿<li><form>購入数<input type="text" name="pa1" size="2"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li id="p5">商品5 ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><img src="./images/efg1.jpg" width="180" height="180" alt="インバータ扇風機"></li> ＿＿＿＿＿＿<li>商品説明</li> ＿＿＿＿＿＿<li><form>購入数<input type="text" name="pa1" size="2"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="new" id="p6">商品6 ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><img src="./images/efg2.jpg" width="180" height="180" alt="普及型扇風機"></li> ＿＿＿＿＿＿<li>商品説明</li> ＿＿＿＿＿＿<li><form>購入数<input type="text" name="pa1" size="2"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="tableContent"> ＿＿＿<ol> ＿＿＿＿<li><a href="#p1">商品1</a></li> ＿＿＿＿<li><a href="#p2">商品2</a></li> ＿＿＿＿<li><a href="#p3">商品3</a></li> ＿＿＿＿<li><a href="#p4">商品4</a></li> ＿＿＿＿<li><a href="#p5">商品5</a></li> ＿＿＿＿<li><a href="#p6">商品6</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
商品リストだという事でマークアップは下記のようなものであるはずですね。 ＿<div class="section" id="merchandise"> ＿＿<ol> ＿＿＿<li>商品名 ＿＿＿＿<ol> ＿＿＿＿＿<li><img src="./images/efg1.jpg" width="200" height="200" alt="インバータ扇風機"></li> ＿＿＿＿＿<li>商品説明</li> ＿＿＿＿＿<li><form> ＿購入数<input type="text" name="pa1"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li class="new">商品名 ＿＿＿＿<ol> ＿＿＿＿＿<li><img src="./images/efg2.jpg" width="200" height="200" alt="普及型扇風機"></li> ＿＿＿＿＿<li>商品説明</li> ＿＿＿＿＿<li><form> ＿購入数<input type="text" name="pa1"><input type="submit" value="かごへ" name="m1"></form></li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿</ol> ＿</div> こうしてきちんと文書構造が記述されていたら、スタイルシートで自由にデザインできるはずです。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;}
関連するQ&A
- HTML CSS 編集 助けてください。・
すみません、どうしても分かりません。 忙しいけど見てあげてもいいよって方、よろしくお願いします。 問題が発生しているのは、FC２カート（http://cart.fc2.com/）です。 ショップをつくったのですが、巧く表示されません。 問題は２点です。 FC２カート（無料）を登録し、ここで、デザイン設定→デザイン表示の設定→PC用テンプレートの設定→公式テンプレートの追加→basic_whiteを選び、編集へ 何か適当に画像を商品として入れてカートをプレビューすれば全商品リスト・カタログ（商品詳細ページでない）の画像が映るんですが、まずここで、一番目の問題、このリストに並ぶ商品画像が、小さくて困っています。 この画像を、画像下に出る値段の文末の部分と揃えるようにサイズを調整するにはどうしたらいいでしょうか？ 編集ページからCSSが開示できますが、探ってみましたが全く見つかりません。 ２番目も同じような問題です。 全商品リスト・カタログの各商品のレイアウトが定まらず、文字数や画像の大きさで勝手に変わるため、一行がきっちり並びそろいません。 たての長さを均一にするにはどこをいじったらいいでしょうか。 以上、面倒だったり分かりにくい説明だったりしますが、どうかお願いします。＿（＞＜）＿
- ベストアンサー
- CSS
- HTML、CSSについて。テーブル背景がズレる。
こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } ・ ・ ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。
- 締切済み
- HTML
- 画像サイズをHTMLタグやCSSで統一したい
画像が何枚かあるのですが、サイズがばらばらで、ホームページに載せるとかっこ悪いです。 そこで、全ての画像のサイズを、高さのみで統一するなどできないものでしょうか？ 何か、タグやCSSの良い方法がありましたら教えてください。 また、画像は不定期に増える可能性が高いので、加工はしない方で宜しくお願い致します。
- ベストアンサー
- HTML
- FC2ブログのＨＴＭＬとＣＳＳ編集について
FC2ブログにて、ＨＴＭＬとＣＳＳを編集して自分なりの ブログを制作しようとしているのですが 素人の私には、難し過ぎて挫けそうです。 詳しい方々には、とても初歩的な質問であることをお許し下さい。 画像で添付したような、テンプレートを今編集しているのですが ３つ教えていただきたいタグがありますので記載さしていただきます。 ●赤で囲まれた部分（ブログ記事の背景）を自分で用意したものにしたい ●青で囲んだ部分の背景も自分で用意したものに変更したい ●黄色で囲んだ部分（タイトル部分）を消したい 以上のタグや方法がありましたら、教えて下さい。 よろしくお願い致します。
- ベストアンサー
- ブログ
- CSSで背景画像設定
ページ自体はテーブルで位置を特定しています。 中央に750ピクセルのテーブルを配置しその中にコンテンツを入れています。 さて、背景画像を固定にしたいと思っています。 場所なのですが、ブラウザサイズに左右されない下部分・中心から375右の位置が右端になるようにしたいんです。 いわゆる「中央に750ピクセルのテーブルを配置しその下部分に画像を配置」した状態で、なおかつ固定としたいんです。 このような言い回しでわかっていただけたでしょうか? CSSで右下に配置ってのはやったことがあるのですが、「中央から375ピクセルの位置が右端」なんてことが可能なのでしょうか? 方法があれば教えてください。
- ベストアンサー
- HTML
- CSSの修正箇所を教えてください。
http://pet-thailand.com/example.html 上記ページのＣＳＳの修正について教えてください。 １、トップメニューの右端のメニューにカーソルを置いた時、2階層目が右の枠の下に潜り込んでしまい隠れてしまいます。枠の下に潜り込まずに、上に表示されるようにするには、どうすればよいでしょうか？ ２、サイドバーの背景が、サイドバーに配置した画像の高さで切れてしまいます。コンテンツの高さに合わせて、フッターあで背景を伸ばしたいのですが、ＣＳＳをどのように調整すれば良いでしょうか？ 大変恐れ入りますが、教えていただけると助かります。
- 締切済み
- CSS
- [CSS]枠線がうまく出来ない。
商品名と価格のリストを掲載しようとしています。 1列目に商品名、2列目に商品名と価格が引っ付かないように空白用枠(幅15px)、3列目に価格を掲載しています。 当初は枠に線を引こうとしたのですが、項目名なども枠内に入ってしまうため、カッコ悪かったです。 なので、TDにCSSで枠線を引こうと考えました で、色々とやってみたのですが、以下の問題が… (ソースを張ろうと思ったのですが、文字数制限に引っかかっちゃいました。) 1.なぜか上だけ濃い。後は薄い? 2.行の間が開かない(枠線が引っ付いてしまう) なんとも説明が下手ですみませんが、こんな状況です。 綺麗にするにはどうしたらいいでしょう?
- ベストアンサー
- CSS
- HTML CSSの記述の仕方について
FC2のショッピングカートを利用しようと思い、全く疎いのですがテンプレートから色々いじくって 思い通りにできてきました。 でもどうしてもわからないことがあります。 mainカラムの最上部に、ショップのコンセプトなどを書いた画像ファイル（GIF）を貼りたいのですが ＨＴＭＬに<img src>で貼ってしまうと、いつなんどきでも（商品詳細やお問い合わせ画面の時も）その画像が上部を占めてしまいます。 背景にしてしまうと、文字通り背景なので、その画像の上に重なるようにコンテンツが表示されてしまいますし・・・ 要するに、よくあるネットショップさんみたいに お店のトップページ（ホーム）の時だけ、そのコンセプト画像が表示したいんですが どこをどう触ったらいいですか？ ＨＴＭＬ内に「パンくずリスト」という場所があって、そこに <!-- ユーザーページ --> {if DSP_USERPAGE}<li>{userpage_title}</li>{/if} という記述があります。 これはＦＣ２仕様の「コンセプトなどを記入できる場所」なのですが ここ（とＣＳＳ）を触って画像とすりかえるというのはできませんか？ （この場所にコンセプトを書いたのですが、どうもデザイン的にイマイチだったので画像にしたいんです）
- ベストアンサー
- CSS
- 画像にcssについて
すいません。以下のブログにアマゾンのリンクが左にあると思うのですが、この画像の上に文字を置いてるのはどういったCSSなのでしょうか？ http://kanasoku.blog82.fc2.com/ CSSのpositionなどで絶対位置で指定しているわけでもなく、画像を背景にしているわけでもなく このような画像の上に文字を置けるのが非常に不思議です。 私はプログラムはphpが少し分かるくらいでして、もしかするとまったく知らないjavascriptかな・・とも思いましたがブラウザのjavaを切っても表示されていますし・・。 今はソフトはドリームウィーバーCS6の体験版を使っているのですが、CSS自体が初めてでもし分かる方いましたら教えてください。
- ベストアンサー
- CSS
- HTMLとCSSでのClass属性がわかりません
画像を挿入し、リンクを埋め込むと、画像の周りに線がついてしまう。 これを避けたいのですが・・・・ 具体的に言いますと・・・各ページに「ＴＯＰページ」へ戻るボタンを埋め込みます 各ページのＨＴＭＬに <div class="icon"> <a href="リンク先"><img src="パス名"></a> </div> ＣＳＳに img.icon{ border-style: none; } と記述しましたが、各ページの画像（「ＴＯＰページ」へ戻るボタン）の周りは線がついたままです ＨＴＭＬの＜img src="パス名" border="0"＞を記述すれば、線を消すことは出来ますが 複数ページに渡っているため、全てにborder=”0”を入力するのは 手間がかかってしまいます なんとかCSSでコントロールしたいのですが・・・ そもそも記述（文法）が間違っているのでしょうか？ Classのとらえ方が間違っているのでしょうか？ 画像も一気に変えたい場合の事も想定し、 現在HTMLで画像挿入しているのを、CSSで埋め込む記述方法があれば 教えてください。 数日前から、HTMLとCSSの勉強をはじめた初心者ですので 見当違いな質問かもしれませんが どうぞ、よろしくお願いします
- ベストアンサー
- CSS
お礼
感激です。本当にありがとうございます。 図々しくて申し訳ありませんが、お時間があればもう少しお付き合いください。 http://www.victoriassecret.com/clothing/pants 極論すると、上記リンクのようなページをつくりたいですが、もうお察しの通り当方ド素人です。 もしできたらカテゴリ数や画像量など減らした省略バージョンを書いてくださいませんか・・・。 自分なりに手探りで徐々にわかってきつつあるのですが、やはり超えられない壁がありましてにっちもさっちにもいかないのです。甘えた考えではありますが、お許しください。可能であればお願いします。