- 締切済み
CSSで、画像を左寄せにして全体を中央にする方法
画像5点を左寄せで配置しています。 添付画像のようにブラウザの幅によって段数を変更できるようにしていますが、 どうしても、画像部分がセンタリングされません。 他のサイト等を丸2日かけて調べましたが、どうもうまい事できません。 どなたかご教授くださいませ。 よろしくお願いいたします。 以下、現状のHTMLとCSSです。 ■HTML <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="css/style2.css" media="all"> <title>タイトル</title> </head> <body> <header> <p>ヘッダー</p> </header> <div id="contents"> <a href="http://○○○○○○○/001.html"><img src="images/001s.jpg" > <a href="http://○○○○○○○/002.html"><img src="images/002s.jpg" > <a href="http://○○○○○○○/003.html"><img src="images/003s.jpg" > <a href="http://○○○○○○○/004.html"><img src="images/n004s.jpg" > <a href="http://○○○○○○○/005.html"><img src="images/005s.jpg" > </div> <footer> <p>フッター</p> </footer> </body> </html> ■CSS @charset "UTF-8"; *{ margin: 0;padding: 0} a { text-decoration : none} ul, ol { list-style : none} img { vertical-align : top} html { font-family : verdana, sans-serif; font-size : 120%; line-height : 150%; margin : 0; width : 100%; text-align:center; } body { width:100%; text-align:center; } header { width:100%; margin-bottom: 0px; color: #fff; font-size: 20px; height:30px; background : url(../images/back.jpg) } #contents { width:100%; padding : 30px 0 10px; text-align:left; } #contents img { margin-bottom : 24px; } footer { color: #fff; width:100%; font-size: 10px; height:30px; background : url(../images/back.jpg) }
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>ANo.1お礼 >私の希望は不可能なのですね。 多少の条件は付きますが、（IE9以上、Safari3以上、Firefox3.5以上、Opera不明バージョン以上、Chome不明バージョン以上）できるといえばできます。 marginやらwidthを適宜調整してください。 スクロールバーが出るとかでないとか、ブラウザごとの違いが結構あり、厳密に919px、619pxで切り替わるかというとそうではないので、（画像サイズに対して）余裕を持たせて切り替えた方が"自然"に見えます。 <style> #contents { width: 920px; margin: 0 auto; text-align: left; } #contents img { margin: 10px 0; width: 300px; border: 0 none; } @media only screen and (max-width: 919px) { #contents { width: 620px } } @media only screen and (max-width: 619px) { #contents { width: 320px } } </style> <div id="contents"> <a href="http://○○○○○○○/001.html"><img src="images/sample1.jpg" ></a> <a href="http://○○○○○○○/002.html"><img src="images/sample2.jpg" ></a> <a href="http://○○○○○○○/003.html"><img src="images/sample3.jpg" ></a> <a href="http://○○○○○○○/004.html"><img src="images/sample1.jpg" ></a> <a href="http://○○○○○○○/005.html"><img src="images/sample2.jpg" ></a> </div> ----------- なお、imgの横マージンは0にしていますが、このHTMLのままでは、 <a><img></a>（この部分の改行） <a><img></a>（この部分の改行） が画像間の空白として表示されます。 ---------- #contentsの部分全体に背景を入れるのであれば、 <div id="contents"> <div> のように入れ子にして、 #contents{width:100%; background: 何か} #contents>div {width:920px;} などとしてみてください。 ------------------ 「レスポンシブウェブデザイン」「mediaqueries」で検索してみてください。 920pxでデザイン、CSSを作成した後、 @mediaを使って620pxでデザイン、CSSを作成、 さらに@mediaを使って320pxでデザイン、CSSを作成しているだけです。 １ページに対して３回デザインするから面倒だというだけで、特別な事をしているわけではありません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 ＞私の希望は不可能なのですね。 そうです。javascriptを使用するなどすれば出来なくはないですが、その必要はないでしょう。 添付図の何れかから選択してください。 float:leftは後方互換には適していますが、HTMLのマークアップはHTML4.01strictにすることも必要でしょう。 text-align:centerとdusplay:inline-blockの組み合わせが、見栄えは良いですが、古いブラウザには、inline-blockは解釈されません。もちろん<header><section><footer>のようなHTML5の新しい要素も解釈されません。 一長一短です。サイト構成の目的に合わせて選択すると良いでしょう。
- tkmojo
- ベストアンサー率50% (105/207)
ブラウザの幅によってボックスの横幅を指定する記述が無いんだから、目的のレイアウトはそりゃ出来ないですね。 cssを見る限り、今やってるのは ・body：横幅100%で中央寄せ ・#contents：横幅100%で左寄せ のみです。 当然bodyの中央寄せは意味が無くなり、横幅100%をめいいっぱい使って左寄せで配置されます。 何故左右に等幅の隙間が空くと思ったのでしょうか…？ 左右にmarginやpaddingを入れるとか、90%くらいにしてmargin:0 auto;を入れるならまだしも。 考え方としては、#contentsの横幅がブラウザのサイズによって固定されるようにcssを記述し、その上でmarginの左右にautoを入れれば目的のレイアウトは実現できます。 「レスポンシブ css」で検索すれば、書き方はすぐわかります。 が、レスポンシブデザインを組むのは少々難易度が高いので、根本的に勉強し直さないと、途中でわけがわからなくなって崩壊してしまうかもしれません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLをきちんと学びなおしたほうがよいような・・なぜ、意味も無く!!divが使われているのですか？？ DIVの使い方で最も重要な 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )］より 他に適当な要素がないときの最後の手段としてdiv要素を使え。div要素より適切な要素を使用することにより、読者のアクセシビリティの向上と作者の容易なメンテナンスに繫がる。 ★ブロックをあまった物だけ左に寄せて、そうでないものは中心にと言うことは出来ません。 ・・・前略・・・ <h1>タイトル</h1> </header> <section> <h2>商品一覧</h2> <ul> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> </ul> </section> <footer> ・・・・・・・・・・・略・・・・・ だとして、 html,body{margin:0;padding:0;} body{ font-family : verdana, sans-serif; line-height : 1.5em; } header,footer{ color:white; height:30px; background : black url(../images/back.jpg); } section ul{ list-style-type:none; margin:30px 0 10px 24px; padding:0; text-align:center; } section ul li{ padding:0;margin:0; display:inline-block; width:[画像サイズ]+α; } だけでよいはずです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
早速のご教授ありがとうございます。 「HTMLをきちんと学びなおしたほうがよいような・・」 ↑始めて1週間のド素人なんで、申し訳ございません。 ★ブロックをあまった物だけ左に寄せて、そうでないものは中心にと言うことは出来ません 私の希望は不可能なのですね。