あなたの映画力を試せる!POPLETA映画検定(無料) >>

個人でイラスト系サイトを運営しております。
今まではサイトのレイアウトはテーブルで設定していました。

しかし、全ての画像が読み込まれるまで少々時間がかかるのもあり、CSSに変更することに。
その方が表示が速くなるという話を聞きまして、意気揚々に始めたまでは良かったのですが…。

この質問に該当するスレを拝見しましたが、なかなか思い通りにいかずに困っています。

ブラウザはIE7。
CSS、HTMLはこのように表記しております。


●??02.css
-------------------------------------------------
#outline{
width:700px;
margin-right:auto;
margin-left:auto;
}
#main{
float:left;
width:300px;

}
#menu{
float:right;
width:400px;
}
#footer{
clear:both;
}
-------------------------------------------------

●HTML
-------------------------------------------------
<html>
<head>
<link rel="stylesheet" href="??01.css" type="text/css">
<link rel="stylesheet" href="??02.css" type="text/css">
<title>サイト名</title>
</head>
<body>
<div id="outline">
<div class="menu">
/画像/
</div>
<div class="main">
/コンテンツ/
</div>
<div id="footer">
</div>
</body>
</html>
-------------------------------------------------

これを見て何かお気づきの所がありましたら、どなたかご教授願えると助かります。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

●idは「#」ですがclassは「.」で指定しますので、


.main{}
.menu{}
とします。

●IEで見る場合、margin-autoではセンタリングされないので、親要素にtext-alignを入れてやります。子要素はtext-align:leftを使って左揃えに戻します。
(他のCSSファイルで指定されているかも知れませんが念のため;)

●<div id="outline">の閉じタグを挿入します。

こんなところでどうでしょう…
----------------------------------------
body{text-align:center;} /*IE用*/
#outline{
width:700px;
margin-right:auto;
margin-left:auto;
text-align:left; /*文字左揃え*/
}
.main{
float:left;
width:300px;
}
.menu{
float:right;
width:400px;
}
#footer{
clear:both;
}
---------------------------

<html>
<head>
<link rel="stylesheet" href="??01.css" type="text/css">
<link rel="stylesheet" href="??02.css" type="text/css">
<title>サイト名</title>
</head>
<body>
<div id="outline">
<div class="menu">
/画像/
</div>
<div class="main">
/コンテンツ/
</div>
<div id="footer">
</div>
</div><!--outline-->
</body>
</html>
    • good
    • 0
この回答へのお礼

返答ありがとうございます。
早速やってみたところ、何とか中央に揃えることが出来ました。

ブラウザによってタグが適応されない時もあるとは…!
自分で確認していたつもりでも、「outline」を閉じるのを忘れていたのには気付きませんでした。
一人でやるのと誰かから見てもらうとでは大分違いますね。

では、これにて回答を締め切りさせてもらいます。
答えて下さった方々、どうもありがとうございました。

お礼日時:2007/10/31 22:23

単に左マージンを設定するだけではダメですか?


質問の意図を間違っていたらすみません。
=============================================
<html>
<head>
<style type="text/css">
<!--
body { margin-left:250px;
}
-->
</style>
</head>
<body>
文章は左そろえのまま<br>
全体を中央そろえにしたい。<br>
<img src="image_sample.jpg">
</body>
</html>

この回答への補足

回答ありがとうございます。
早速試してみました。

ですが、少々説明不足な質問をしてしまったようで申し訳ありませんでした。
言葉って難しいですね。

ウィンドウの大きさによって中央にくるよう変化するといえばよろしいでしょうか。
ブラウザ拡大サイズの時の中央ではないので、この回答は少し違うように思います。

補足日時:2007/10/31 07:54
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q文章全体は中央配置で、文字は左揃え(テーブル使用以外で)

タイトルの通り文章のかたまりは中央に配置して、その文章自体は左でそろえる方法を探しています。
テーブルを使う方法はわかるのですが、できればテーブルは使いたくないのです。
ここで検索してみましたら同じような質問がいくつかありましたが、どれも答えがテーブルを使ったものでしたので新しく質問させていただきます。

スタイルシートでこのようにするにはどうすればいいのでしょうか?
やはり左右のマージンなどを駆使するしかないですか?

Aベストアンサー

bodyにtext-align:centerを指定して、その子要素(コンテンツ全体を囲うdiv)にtext-align:leftと左右のmarginをautoに指定します。
何度も使っているので大丈夫です。

QCSSで、文字は左寄せにして、文字全体を中央寄せにする方法

を教えてください!^^;

text-align: left;

で文字を左寄せにすることができることは先ほど調べてわかったのですが、
文字全体を中央寄せにする方法が分かりません^^;

本当に困ってます、どなたか教えてくださいお願いします><

Aベストアンサー

body{
text-align:center;
}

.box{
margin-left:auto;
margin-right:auto;
text-align:left;
}

↑これでどうでしょうか?
画面全体(body)に表示する内容(box)は中央揃えにして、box内に表示する内容は左揃えに・・・というcssです。margin-left;autoとmargin-right:autoは、左右のマージンがそれぞれ最大になるように・・・という記述です。

Q文字、センタリングの中での行頭左端揃え

すみません、質問です。

文字(短文)をページの中央におきたいのですが
「センタリング<タグ>」を使うと

***********
__*******
____***
***********
_*********
__*******
_*********

(*が文字で、『_』がスペースです)。

・・・とゆうようになります。

そうではなくて、ページの中央で
行頭をきちんとそろえたいんです。。

***********
******
********
****
*********
*****

といった具合に。。

これは leftmargin でやるしかないんでしょうか?
leftmargineだと、正しい中央の値がわからないんです。
なので、センターでの文頭左端揃え、といった具合に
したいのです。

お願いします。

Aベストアンサー

TR,TDタグで表を作成し
┏━┳━━┳━┓
┃ ┃  ┃ ┃
┃A┃B ┃C┃
┃ ┃  ┃ ┃
┗━┻━━┻━┛
こんな感じで表を作って、表全体を100%にして、A:B:Cを希望の割合にします。Bを文字列の長さにしてAとCを残りにしても良い。
で、Bの中に左そろえで文字を書きます。
当然表のborderは0を指定して見えないようにします。

Qcssで、全体を中央寄せ、文字は左寄せにする方法

CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。

bodyにtext-align: centerを設定し、

#outline{
width:1200px;
margin-right:auto;
margin-left:auto;
text-align:left;
}

.content{
float:left;
width: 1200px;
}

と書き、<div id="outline"><div class="content">で全体を囲みました。
すると、大方できたのですが、h要素のみずれてしまいます。
(h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・)
h要素は色とフォントサイズを指定したのみです。
CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。
どのようにすれば、他と同じく中央左寄せにすることができるでしょうか?
よろしくお願いいたします。

Aベストアンサー

body{text-align:center;}
#outline{text-align:left;}
.content{float:left;}
は、CSS2.1(ベンダーが標準とみなしている仕様)だと
body{text-align:center;}/* text-align:継承される 詳細度は0001 */
*#outline{text-align:left;}/* text-align:継承される 詳細度は0100 */
*.content{float:left;}/* float:継承されない 詳細度は0010 */
といういみですね。*は全称セレクタで詳細度0

このCSSにて、H1が左寄せ、H2が右寄せになるということは、H1は*#outlineにあることですね。ということは、
#outlineの内部にH1があるということです。
<body>
 <div class="article">
  <div class="header" id="outline">
   <h1>見出し</h1>
  </div>
  <div class="section" id="content">
   本文
   <div id="tableConten">
    目次
   </div>
  </div>
  <div class="footer2>
   文書情報
  </div>
 </div>
</body>

なら、
 div.article{
  width:80%;
  max-width:1200px;
  margin:0 auto;
 }
だけでよい。

★CSSの最も根幹を成すのは、プロパティではなくカスケーディングです。カスケーディングスタイルシートと言われている。カスケーディングとは、スタイルの出自、詳細度、継承、優先順位で定まります。それをきちんと理解しなければ、#outline,.contentのようなIDやclass名のみならず、要素すべてにidやclass名をつけたり、不要なdivを撒き散らすことになります。そのうえ期待したようにならない。

 bodyという、もっとも上位のブロックで、継承されるプロパティをbodyというタイプセレクタで指定してますから、その子孫すべてに、原則は適用される。ついで、<div class="content">を*.content{}という、全称セレクタ(* -詳細度0000)+クラスセレクタ(. 詳細度0010)で指定している(詳細度0010)が、その中ではtext-alignを指定していれば、それが詳細度が高いので優先されるが、指定していないので継承値が使われていると言うことです。
 bodyのtext-alignを外すか、より詳細度が高いセレクタで改めてtext-align:leftを指定すればよいだけです。

 bodyにtext-alignを指定するのは好ましくありません。CSSが煩雑になります。IE5用の対応だと思いますが、止めても良い。
 デザインのためにclass名をつけるのは止めましょう。class名やidは、
【引用】____________ここから
DIV要素・・・【中略】・・・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より

 であって、それを使ってデザインはするけど、デザインのためにつけるものではない。

★スタイルシートを学ぶなら、プロパティは後回しにして、何よりも先にカスケーディングを先に確実に学びましょう。
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

body{text-align:center;}
#outline{text-align:left;}
.content{float:left;}
は、CSS2.1(ベンダーが標準とみなしている仕様)だと
body{text-align:center;}/* text-align:継承される 詳細度は0001 */
*#outline{text-align:left;}/* text-align:継承される 詳細度は0100 */
*.content{float:left;}/* float:継承されない 詳細度は0010 */
といういみですね。*は全称セレクタで詳細度0

このCSSにて、H1が左寄せ、H2が右寄せになるということは、H1は*#outlineにあることですね。ということは、
#outlineの内部に...続きを読む


人気Q&Aランキング