画像をセンター配置にする方法
- 画像を中央に配置する方法について説明します。
- HTMLとCSSを使用して、画像をセンターに配置する方法を解説します。
- 具体的なコードと共に、中央配置の実装方法を詳しく紹介します。
- ベストアンサー
画像をセンター配置にする方法
過去ログを検索したのですが、同じような方法が載っていなくて質問させていただきます。 以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。 根本的な部分の理解ができていないかもしれませんが、どうかご教授お願いします。 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題</title> <link href="css/common.css" rel="stylesheet" type="text/css" /> </head> <body> <!--▼▼ヘッダーここから▼▼--> <div id="header"> <p>ヘッダー</p> </div> <!--▲▲ヘッダーここまで▲▲--> <!--▼▼メインここから▼▼--> <div id="main"> <ul> <div id="main_site01"> <p class="center">aaa01</p><li><img src="images/site01.jpg" width="300" height="200" alt="01" /></li><p class="center">aaa01</p> </div> <div id="main_site02"> <p class="center">aaa02</p><li><img src="images/site02.jpg" width="300" height="200" alt="02" /></li><p class="center">aaa01</p> </div> <div id="main_site03"> <p class="center">aaa03</p><li><img src="images/site03.jpg" width="300" height="200" alt="03" /></li><p class="center">aaa01</p> </div> </ul> </div> <!--▲▲メインここまで▲▲--> <!--▼▼フッターここから▼▼--> <div id="footer"> <p>フッター</p> </div> <!--▲▲フッターここまで-▲▲--> </body> </html> 【HTMLここまで】 -------------------------------------------------------------------------------- 【CSS】 @charset "utf-8"; /*******************/ /* リセットcss */ /*******************/ * { margin: 0; padding: 0; list-style-type: none; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; } img { border: none; } /*******************/ /* コンテンツ */ /*******************/ body { background-color: #000; } #header { height: 100px; margin-top: 50px; font-size: 18px; background-color: #fff; } #main { color: #FFF; width: 990px; text-align: center; } #main ul li { float: left; margin: 0 15px 15px; } #main_site01 { float: left; } #main_site02 { float: left; } #main_site03 { float: left; } .center { text-align: center; margin-top: 15px; } #main ul { text-align: center; } #footer { height: 100px; font-size: 18px; color: #000; clear: both; background-color: #fff; } 【CSSここまで】
- justin_shingo
- お礼率100% (10/10)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
これでどうですか <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題</title> <link href="css/common.css" rel="stylesheet" type="text/css" /> </head> <body> <!--▼▼ヘッダーここから▼▼--> <div id="header"> <p>ヘッダー</p> </div> <!--▲▲ヘッダーここまで▲▲--> <!--▼▼メインここから▼▼--> <div id="main"> <ul> <li id="main_site01"> <p class="center">aaa01</p> <p><img src="images/site01.jpg" width="300" height="200" alt="01" /></p> <p class="center">aaa01</p> </li> <li id="main_site02"> <p class="center">aaa02</p> <p><img src="images/site02.jpg" width="300" height="200" alt="02" /></p> <p class="center">aaa01</p> </li> <li id="main_site03"> <p class="center">aaa03</p> <p><img src="images/site03.jpg" width="300" height="200" alt="03" /></p> <p class="center">aaa01</p> </li> </ul> </div> <!--▲▲メインここまで▲▲--> <!--▼▼フッターここから▼▼--> <div id="footer"> <p>フッター</p> </div> <!--▲▲フッターここまで-▲▲--> </body> </html> ************************************************* @charset "utf-8"; /*******************/ /* リセットcss */ /*******************/ * { margin: 0; padding: 0; list-style-type: none; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; } img { border: none; } /*******************/ /* コンテンツ */ /*******************/ body { background-color: #000; } #header { height: 100px; margin-top: 50px; font-size: 18px; background-color: #fff; } #main{ width:990px; margin:0 auto; } #main ul li { color: #FFF; text-align: center; float: left; width:300px; margin: 0 15px 15px; } .center { margin-top: 15px; } #footer { height: 100px; font-size: 18px; color: #000; clear: both; background-color: #fff; }
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的には同じもの。HTML/CSSの説明は、先の回答にあるので省く。CSSをHTML内に書いたもの。HTMLさえデザインに引っ張られず、文書構造にしたがって、きちんと書けば、HMLもCSSも極めて簡単になるが、画像間の空白文字を消すためHTMLに<!-- -->が追加してある。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 ★＿はタブに戻すこと!! <!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=utf-8"> ＿<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"> <!-- html,body{margin: 0;padding:0;} body{ ＿line-height: 1.6em;background-color: #000;color:white; ＿font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; } a img {border: none;} div.header,div.footer,div.section{ ＿width: 90%;min-width:770px;margin:0 auto; ＿text-align: center; } div.header{margin-top:50px;} div.header,div.footer{ ＿background-color: white;color:black; ＿height: 100px; } div.header h1,div.footer h2{ ＿font-size:18px; ＿margin:0; } div.section{padding-top:15px;} div.section p,div.header p,div.footer p{text-align:left;margin:0 1em;text-indent:1em;} div.section h2{display:none;} /* 画像を並べて中央に配置 */ div.section div.nav ul{ ＿display:block; ＿width:100%;margin:0 0 10px 0;padding:0; } div.section div.nav ul li{ ＿display:inline-block; ＿width:250px;margin:0; ＿background-color:gray;/* テスト */ } div.section div.nav ul li+li{margin-left:10px;} /* ここまで */ /* おまけ */ div.section div.nav ul li{position:relative;} div.section div.nav ul li:hover:after{ position:absolute;top:100px;left:20px;width:200px;padding:1ex 1em; text-align:left; background-color:yellow;font-size:0.8em;color:red; text-indent:1em;line-height:1.4em; content:"この<li>要素は、display:block; text-align:centerに指定してある<ul>内で、display:inline-block;に指定してある。"; border:solid 1px red; -moz-border-radius: 1em; -webkit-border-radius: 1em; -o-border-radius: 1em; -ms-border-radius: 1em; -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -o-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -ms-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ヘッダー</h1> ＿＿<p> ＿＿＿以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。 ＿＿</p> ＿＿<p> ＿＿＿<p><img><img><img></p>の場合には、中央配置されることでわかるように、ブロック要素内の行内要素にすればよいことがわかります。 ＿＿</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>aaa01<a href="./""><img src="images/site01.jpg" width="250" height="400" alt="01">aaa01</a></li><!-- ＿＿＿＿--><li>aaa02<a href="./diary""><img src="images/site02.jpg" width="250" height="400" alt="02">aaa01</a></li><!-- ＿＿＿＿--><li>aaa03<a href="./profile"><img src="images/site03.jpg" width="250" height="400" alt="03">aaa01</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<p> ＿＿＿text-align:centerは、ブロック要素内のテキスト(インラインブロック要素を含む)を中央配置する。float:(left|right)を設定すると、それは独立したブロックになるので、floatさせたものをセンター配置することは矛盾した要望なので原理的に出来ない。 ＿＿</p> ＿</div> ＿<div class="footer"> ＿＿<h2>フッター</h2> ＿</div> </body> </html>
お礼
貴方の回答が調査中？みたいな表示で昼頃から見られませんでしたので、返答が遅くなり失礼しました。 先の回答の内容とも照らし合わせながら今後の勉強にさせていただきます。 細やかなご返答ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
テキストエディタでのHTML作成ですね。それでしたら、この掲示板より 「HTML - 教えて！goo ( http://oshiete.goo.ne.jp/category/252/#google_ads1 )」などのほうが良いでしょう。 (ご利用のサービスによって、サイトは異なります。トップ→[技術者向] コンピューター → プログラミング → HTML ) さて、現在、HTML4.01transitionalで作成されているようですが・・ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "・・・ HTML4.01の勧告(1999/12)以来、transitonalは非推奨です。いまだに多く使われていますが・・ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ・・・【中略】・・・ 推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書/4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より 現在、数年後の勧告を目指して策定中のHTML5(2011/5月最終草案→勧告案→勧告)では、strictそのものの改定となります。そのうえで、HTMLとスタイルシートを書き換えてみました。(XHTMLの必要はないのでHTMLです。XHTMLの場合もstrictかXHTML1.1にしましょう。) きちんと書けば・・ ・HTMLもCSSも意外に簡単に書けること。 ・HTMLには文書構造しか書かれていないため、検索エンジンでも誰でも文書の構成がわかる(class="header,section,footer"はgoogleも理解してくれるHTML5の要素名です) ・HTMLにデザイン的に物がないため、スタイルシートでどのようにも変更できる。先でデザインをまったく変えるときもHTMLは書き直さなくてもよい。 注意) colorに薄い色を指定するときは、必ずスタイルシートでメディアタイプをscreenと指定しておかないと、印刷しても読めなくなる。 HTMLに重大なミスがたくさんあります。書いたら必ずAnother HTML-lintでチェックしてみましょう。ミスを指摘してくれる。 ★画像サイズと図示されたサイズが異なるので図に合わせてある。 [HTML]★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )で検証済み <!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=utf-8"> ＿<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 href="css/common.css" rel="stylesheet" type="text/css" media="screen"> ＿<link rel="START" href="../index.html"> </head> <body> ＿<div class="header"> ＿＿<h1>ヘッダー</h1> ＿</div> ＿<div class="section"> ＿＿<ul><!-- ulにはliがひとつ以上以外入れることは出来ません。div,pもだめ --> ＿＿＿<li>aaa01<img src="images/site01.jpg" width="250" height="400" alt="画像が読み込まれないことも考えて詳しく書く">aaa01</li> ＿＿＿<li>aaa01<img src="images/site02.jpg" width="250" height="400" alt="02">aaa01</li> ＿＿＿<li>aaa01<img src="images/site03.jpg" width="250" height="400" alt="03">aaa01</li> ＿＿</ul> ＿＿<p>過去ログを検索したのですが、同じような方法が載っていなくて質問させていただきます。</p> ＿＿<p>以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。</p> ＿＿<h2>floatを指定すると、</h2> ＿＿<p> ＿＿＿他と独立したブロックとなるからtext-alignは意味がない。ulをブロックにして、その中のliをインラインブロックにすると、当然text-alignが利く。これはHTML的には<p><inline-block><inline-block><inline-block></p>なのでね。inline-blockの巾が画像巾しかなければ、当然前後のテキストは改行される。 ＿＿</p> ＿</div> ＿<div class="footer"> ＿<h2>フッター</h2> ＿</div> </body> </html> [CSS]★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )で検証済み @charset "utf-8"; html,body{ ＿margin: 0;padding: 0; } /* 全称セレクタ*でmarginやpaddinを消さない */ body{ ＿line-height: 1.6em;/* 必ず単位をつける */ ＿font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; ＿background-color: #000; } div.header,div.footer{/* 共通なプロパティはセレクタをグループ化して記述する */ ＿height: 100px; ＿background-color:white;color:black; ＿height: 100px; } div.header { ＿margin-top: 50px; } div.header h2,div.footer h2{ ＿font-size:18px; } a img{ ＿border: none; } div.section{ ＿color: white; ＿width: 990px; ＿margin:0 auto; } div.section p{ ＿margin:0 1em; ＿text-indent:1em; } div.section ul{ ＿display:block; ＿padding:0;margin:0; ＿text-align: center; } div.section ul li{ ＿display:inline-block; ＿margin: 15px 0;/* 必ずサイズは1個,2個,4個 */ ＿width:250px;/* 画像の巾 */ }
お礼
貴方の回答が調査中？みたいな表示で昼頃から見られませんでしたので、返答が遅くなり失礼しました。 まず「HTML - 教えて！goo」の方は今後も参考にさせていただきます。 本文の内容ですが、検証サイトと照らし合わせながらも今後は作成したいと思います。 しかしながら言わんとすることはある程度理解できたのですが、内容がまだ私の頭では理解が難しく何度も復読してみることにします。 細かいご指摘ありがとうございました。
関連するQ&A
- CSSレイアウトでフッターをうまく配置出来ません。
CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。 以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width: 183px; margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }
- ベストアンサー
- CSS
- IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・
XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。 一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。 センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。 ためしに、headとnavだけのスリムな状態にしても同じでした。。。 解決方法に心当たりのある方はお願いします。 【CSS】 @charset "shift_jis"; * { line-height: 150%; font-size: 12px; letter-spacing: 1px; } body{ margin:0px; padding:0px; text-align:center; background-repeat: no-repeat; } img { border: none; vertical-align: bottom; } h1 { font-weight: normal; margin: 15px 0 0 50px; } #head{ width:900px; height:69px; background-image: url(img/bg-head.jpg); margin: 0px auto; text-align: left; } #nav { width: 100%; background-image: url(img/bg-nav.jpg); } #nav ul { margin: 0px auto; width: 900px; padding: 0px; list-style: none; height: 31px; } #nav li { float: left; } #main { width: 100%; height: 284px; text-align: center; background-image: url(img/bg-main.jpg); } #wrap{ width:880px; margin:0px auto; text-align:left; padding: 0 10px 0 30px; background-image: url(img/bg-wrap.jpg); background-repeat: repeat-y; } #left{ width:645px; float:left; } #right{ width:220px; float:right; text-align: right; padding: 0px; height: 1200px; background-image: url(img/bg-right.gif); } #foot{ position:relative; width:100%; height:35px; clear:both; background-image: url(img/bg-foot.gif); margin: 0 0 50px 0; } 【html】 <body> <!-- ********* ヘッダー ******** --> <div id="head"> <h1>\\\\\\\\\\\\\\\\\\</h1> </div> <!-- ***** nav ****** --> <div id="nav"> <ul> <li><img src="img/nav_01.jpg" /></li> <li><img src="img/nav_02.jpg" /></li> <li><img src="img/nav_03.jpg" /></li> <li><img src="img/nav_04.jpg" /></li> <li><img src="img/nav_05.jpg" /></li> <li><img src="img/nav_06.jpg" /></li> <li><img src="img/nav_07.jpg" /></li> </ul> </div> <!-- ***** main ****** --> <div id="main"><img src="img/main.jpg" /></div> <div id="wrap"> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <br style="clear:both" /> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </body>
- ベストアンサー
- HTML
- 画像の様なテーブルレイアウトにするには？
画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか IE9なら正しく表示されます。 何処を修正したかも教えて下さい ＊＊＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <ul id="products-list"> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> </ul> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊base.css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ width:840px; height:380px; margin:10px; padding-left:0; background:#690; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ list-style-type:none; float:left; width:130px; margin:10px 0px 0px 10px; padding:0px; height:170px; background:#F3F59C } .product-img{ margin:0px; padding:0px; width:50px; height:50px; text-align:center; border:none; } #products-list{ margin:0px; padding:0px; }
- 締切済み
- CSS
- 大divの中に小divを配置して回り込ませる方法。
大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。 • xxxx • xxxxx • xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx 更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。 記述のどこに問題がありますか？ ご教授お願い致します。 (css) div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px #660000;} div#container {margin-left : auto ; margin-right : auto ;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;} h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;} h2 {font-size:18px;padding-left:20px;padding- top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;} div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto ;width:800px;height:1500px;background-color:#ffffff;] ul {border:1px solid #660000;} li {list-style-type:none;} h3 {font-color:#ffffff;} p {font-color:#ffffff;} div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;} div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;} div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;} (html) <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxx</title> <link href="./style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="image"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1> </div> <div id="container"> <h2>xxxxxxxxxxx </h2> </div> <br> <div id="clear"> <div id="menu"> <ul> <li> xxxxxx </li> <li> xxxxxx </li> <li> xxxxxx </li> </ul> </div> <div id="contents"> <h3>xxxxxxxxxx</h3> <p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p> <br> <p>xxxxxxxxxxxxxxxxxx</p> </div> <div id="footer"> <p>xxxxxxxx</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 補足・修正・訂正あればお願い致します。
windowsのIE9ではきれいに表示することができました。 しかし、横幅やマージン、パディングの箇所の数値がいまいち 理解できていないため完璧にできたという実感がありません。 もっと論理的にきれいな値をプログラムできると思っています。 私のプログラムで補足・修正・訂正あればお願い致します。 ＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ******************base.css***************************** /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ float:left; width:840px; height:380px; margin:10px; padding-left:0; background:#690; } *html #main{ width:560px; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ float:left; width:130px; margin-left:10px; margin:10px 0px 10px 10px; height:170px; background:#F3F59C }
- 締切済み
- CSS
- 【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- 締切済み
- CSS
- FireFoxでのレイアウト表示崩れについて
現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。
- ベストアンサー
- HTML
- 画像が表示されない。
質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。
- ベストアンサー
- CSS
- ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
- 疑似インラインフレームを中央に配置する方法
疑似インラインフレームを中央に配置する方法 疑似インラインフレームを画面中央に配置する方法を教えてください。 ちなみに、以下のような記述を試してみたのですが…。 【css】 body { text-align: center; margin-top: 100px; color: #555555; font-size: 10px; font-family: "ＭＳ Ｐゴシック"; } *{ margin:0px; border:0px; padding:0px; line-height:100%; } .box{ text-align: center; padding-bottom: 50px; } .box_scroll{ text-align: center; width: 300px; height: 200px; padding: 10px 10px; overflow: auto; } 【xhtml】 <div class="box"> <img src="img.jpg" width="100" height="50" alt="img" /> </div> <div class="box"> <div class="box_scroll"> ---文章--- </div> </div> 初めの<div class="box">は中央に配置されるのですが、疑似インラインの部分は左に寄ってしまいます。 他にも他の方の質問を参考に試してみたのですが、初心者の為いまいちよくわからず、うまくいきませんでした。 どうか回答よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございます、早速コードを入れ替えたところ無事に配置できました。 今から両方を見比べて、どこが違ったのかなどを検証して勉強したいと思います。 早速の回答非常に助かりました。