画像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) }
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
>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を作成しているだけです。
1ページに対して3回デザインするから面倒だというだけで、特別な事をしているわけではありません。
No.3
- 回答日時:
No.1です。
>私の希望は不可能なのですね。
そうです。javascriptを使用するなどすれば出来なくはないですが、その必要はないでしょう。
添付図の何れかから選択してください。
float:leftは後方互換には適していますが、HTMLのマークアップはHTML4.01strictにすることも必要でしょう。
text-align:centerとdusplay:inline-blockの組み合わせが、見栄えは良いですが、古いブラウザには、inline-blockは解釈されません。もちろん<header><section><footer>のようなHTML5の新しい要素も解釈されません。
一長一短です。サイト構成の目的に合わせて選択すると良いでしょう。
No.2
- 回答日時:
ブラウザの幅によってボックスの横幅を指定する記述が無いんだから、目的のレイアウトはそりゃ出来ないですね。
cssを見る限り、今やってるのは
・body:横幅100%で中央寄せ
・#contents:横幅100%で左寄せ
のみです。
当然bodyの中央寄せは意味が無くなり、横幅100%をめいいっぱい使って左寄せで配置されます。
何故左右に等幅の隙間が空くと思ったのでしょうか…?
左右にmarginやpaddingを入れるとか、90%くらいにしてmargin:0 auto;を入れるならまだしも。
考え方としては、#contentsの横幅がブラウザのサイズによって固定されるようにcssを記述し、その上でmarginの左右にautoを入れれば目的のレイアウトは実現できます。
「レスポンシブ css」で検索すれば、書き方はすぐわかります。
が、レスポンシブデザインを組むのは少々難易度が高いので、根本的に勉強し直さないと、途中でわけがわからなくなって崩壊してしまうかもしれません。
No.1
- 回答日時:
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:[画像サイズ]+α;
}
だけでよいはずです。
早速のご教授ありがとうございます。
「HTMLをきちんと学びなおしたほうがよいような・・」
↑始めて1週間のド素人なんで、申し訳ございません。
★ブロックをあまった物だけ左に寄せて、そうでないものは中心にと言うことは出来ません
私の希望は不可能なのですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【HTML&CSS】フッター下部の余...
-
<li>の黒い点を消したい。
-
CSS、width100%でもできる余白
-
CSSで指定した背景画像にリンク...
-
HTMLで文字が重なって表示されます
-
余分な縦スクロールバーが出て...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSで背景画像を一番下にもって...
-
表示倍率を変えるとレイアウト...
-
CSS(0の単位)について
-
W3Cのソースコードの検証サービ...
-
画像と一緒にスライドするリン...
-
IE6にてliタグに対してposition...
-
横スクロールサイトの中央寄せ
-
画像イメージの上下左右、欲し...
-
ディスプレイのサイズに合わせ...
-
hpビルダー 複数の表の罫線を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報