【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

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

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

A 回答 (1件)

bodyにtext-align:centerを指定して、その子要素(コンテンツ全体を囲うdiv)にtext-align:leftと左右のmarginをautoに指定します。


何度も使っているので大丈夫です。
    • good
    • 5
この回答へのお礼

ありがとうございます。
確かにできました~☆ここ数日ずっとわからなくて悩み続けてたのがアホみたいです(^-^;
でもいろいろ詳しくなれたのでよかったかも

お礼日時:2005/07/28 14:03

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

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でborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

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画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QHTMLで文字頭をそろえるには

メモ帳でHTMLを作っています。

ホームページの場合ですが、
通常だとメモ帳で文字を打ち、ブラウザで見ると左に寄せられた状態です。

いろはにほへと
123456789
ABCDEFGHIJ

これを左端に空も自分のスペースを設けて文字を打つにはどうしたらいいですか。

例えば、

****いろはにほへと
****123456789
****ABCDEFGHIJ

・・・・・・といった具合です。

Aベストアンサー

タイトルの「文字頭をそろえるには」と質問内容の「左端に・・・スペースを設けて文字を打つには」は少し話がずれています。
ここでは「左端に・・・スペースを設けて文字を打つには」について回答します。
サイト上で文字をHTMLと同じ状態で表示したいときに一番簡単なタグは「<pre>」です。
ですので、たとえば
<pre>
    いろはにほへと
    123456789
    ABCDEFGHIJ
</pre>
と書けば、左側に必要なスペースが空いて表示できます。
(ただし文字の場合だけ。)   


人気Q&Aランキング