float:leftを使用して全体を中央寄せしたい

締切済

質問者：kawasakiatsushi
質問日時：2013/07/14 12:45
回答数：2件

html勉強中のものです。

float:leftを使用したdivすべてbody全体の中央寄せにしたいです。
下記のソースから教えて下さい。

html
--------------
<!DOCTYPE HTML>
<html lang="ja">

<head>
<meta charset="shift_jis">

<title>Director Blog</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<header>
<hgroup>
<h1 id="header">Why not?</h1>
</hgroup>
<ul class="header">
<li>menu</li>
<li>info</li>
<li>list</li>
</ul>
</header>

<div class="float left">
<div class="cc"><p><img src="images/Dragon+Ash+02_02.jpg" width="200" height="150">
</p>
<h1 class="float left">
Miyuki Yamanaka</h1>
<p class="float left">
Photographing and questioning. Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence. She explores the</p>
</div>

</body>

</html>

--------------

css

--------------
charset "utf-8";
/* ----------------------------------------------
This style definition is initiarize.
------------------------------------------------- */

body , div , header, dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td {
margin-right: 0 auto;
margin-left: 0 auto;
padding: 0 auto;
}

div.float left{
float:left;
}

div.cc {
width:200px;
background: #FAFAD2;
float:
border-style: none;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
overflow: hidden;
layout-grid-line:200px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 3px #000;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}

--------------

よろしくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

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

No.2

回答者： ORUKA1951
回答日時：2013/07/14 17:20

＞html勉強中のものです。

<abbr title="Hyper Text Markup Language">HTML</abbr>ですよね。

　DOCTYPEを<doctype html>とされているところから、HTML5を想定されているように見受けます。HTML5は膨大な内容を含んでいます。その前にHTML4.01strictを身につけたほうが効率的です。

★floatは挿絵などの周囲にテキストを回りこませるためのプロパティです。
　ブロックの配置にも使うことがありますが、目的が違います。
★DIV要素があちこちで使われていますが、その使い方は(HTML4.01の時代から!!)誤りです。
　HTML4.01『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　HTML5『Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )』
　　要はDIVは適切な要素がないときの最後の手段として使え!!
　　そのときは文書構造が分かるclass名などをつけろ!!(float left ccなんてのはダメ!!)
　ということ．

　なぜ、この様な質問の回答らしからぬことを書いているかと言うと、文書構造がさっぱり分からないため、何をされたいかが全く見えてこないのです。
　もし、HTML5だと下記のようなものになり、その上で、
・本文(section)内の見出し(h2)の左に画像を配置したい。
・全体(header,section,footer)をページの中央に配置したい
　　最小640pxで最大900px内でウィンドウ幅の90%程度
にしたい場合は？？？
と、誰が読んでもしたいことが分かる．それが分からない。

<!doctype html>
<html>
<head>
<meta charset="Shift_JIS">
<title>Director Blog</title>
<style media="screen">

</style>
</head>
<body>
<header id="TOP">
<hgroup>
<h1>Director Blog</h1>
<h2>Why not?</h2>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
<section>
<h2>Miyuki Yamanaka</h2>
<p>
Photographing and questioning.
</p>
<p>
Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence.
</p>
<p>
She explores the themes of existence, death, time, constancy and family through her work.
</p>
Her project THE LINE is a collection of photographs about a road markings, about a documentation of visual landscapes, about infinite and inspiring graphic resources, about the way of looking at world. What we all see is the same, but how we understand it is various and that is the way of making your visual journey in daily life different.
</p>
<aside>
<h3>Something aside</h3>
</aside>
</section>
<footer>
<h3>A nice footer</h3>
</footer>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： naokita
回答日時：2013/07/14 17:00

ブロックの場合、無指定だと100％の幅なので、floatする意味がない・・・

floatしたいブロックに対して、floatとwidthを同時に設定すると、
floatできる領域もできるから、移動してくれる。

margin-right: 0 auto;margin-left: 0 auto;
も同じで、
ブロックの幅が、100％だから動くことができない。
この幅を親要素に対して、小さくすることで、動ける領域内で移動する事ができる。

つまり、各々の幅に対する設計が出来ていないって事です。

何処に何を配置したいのか？不明なので回答者は貴方の意図するソースを書くことができませんし、
float leftが重複しているので、意味不明ですが、
恐らく、
<div class="float left">
の幅設定の事かな？
子要素の幅の合計値を計算してwidthを設定。

そのブロック{margin: 0 auto; width:○○px;}