CSSで、画像を左寄せにして全体を中央にする方法

締切済

質問者：m_sassy
質問日時：2013/09/25 17:57
回答数：4件

画像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件)

最新から表示
回答順に表示

No.4

回答者： taloo
回答日時：2013/09/30 15:31

>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を作成しているだけです。

１ページに対して３回デザインするから面倒だというだけで、特別な事をしているわけではありません。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2013/09/27 12:16

No.1です。

＞私の希望は不可能なのですね。
　そうです。javascriptを使用するなどすれば出来なくはないですが、その必要はないでしょう。
　添付図の何れかから選択してください。
　float:leftは後方互換には適していますが、HTMLのマークアップはHTML4.01strictにすることも必要でしょう。
　text-align:centerとdusplay:inline-blockの組み合わせが、見栄えは良いですが、古いブラウザには、inline-blockは解釈されません。もちろん<header><section><footer>のようなHTML5の新しい要素も解釈されません。
　一長一短です。サイト構成の目的に合わせて選択すると良いでしょう。

- 0
- 件

通報する

No.2

回答者： tkmojo
回答日時：2013/09/26 11:12

ブラウザの幅によってボックスの横幅を指定する記述が無いんだから、目的のレイアウトはそりゃ出来ないですね。

cssを見る限り、今やってるのは
・body：横幅100%で中央寄せ
・#contents：横幅100%で左寄せ
のみです。

当然bodyの中央寄せは意味が無くなり、横幅100%をめいいっぱい使って左寄せで配置されます。
何故左右に等幅の隙間が空くと思ったのでしょうか…？
左右にmarginやpaddingを入れるとか、90%くらいにしてmargin:0 auto;を入れるならまだしも。

考え方としては、#contentsの横幅がブラウザのサイズによって固定されるようにcssを記述し、その上でmarginの左右にautoを入れれば目的のレイアウトは実現できます。
「レスポンシブ css」で検索すれば、書き方はすぐわかります。

が、レスポンシブデザインを組むのは少々難易度が高いので、根本的に勉強し直さないと、途中でわけがわからなくなって崩壊してしまうかもしれません。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2013/09/25 18:38

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/grou … )］より
　他に適当な要素がないときの最後の手段として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:[画像サイズ]+α;
}
だけでよいはずです。