「夫を成功」へ導く妻の秘訣 座談会

すみません、質問です。

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

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

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

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

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

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

といった具合に。。

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

お願いします。

A 回答 (3件)

TR,TDタグで表を作成し


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

この回答への補足

ポイトンはご回答いただいた順にします。。
すみません、ありがとうございます。

補足日時:2003/04/17 23:40
    • good
    • 0
この回答へのお礼

できました~♪
どうも、ありがとうございますm(__)m

お礼日時:2003/04/17 23:36

スタイルシートのmargin-leftをパーセンテージで指定すれば、親ボックスの中央の位置を自動で取れると思うのですが、それではいけないのでしょうか?



<p style="margin-left: 50%;">********<br>
********************<br>
*****<br>
*************<br>
******************</p>

こうすると、親ボックスの真ん中(大概は画面の中央)を先頭として、文章の書き出しの位置を中央に持ってこられると思います。
文章の書き出し位置が理想よりもずれているのであれば、margin-leftの指定をパーセントを単位として設定しなおせば、調整も利きます。

こちらの方法でも一応質問文にある表示になると思うのですが…
見当違いでしたら、ごめんなさい。
    • good
    • 2
この回答へのお礼

そんなやり方もあったんですね~(@@)
いろいろ頭を使いながら既存のHTMLで、
イメージした構成をつくること、できるんですね!

ほんとに、どうもありがとうございますm(__)m

お礼日時:2003/04/17 23:40

以下のようにしてもいいと思います。

# 左右の位置調整は出来ませんが。
<table align="center">
<tr><td>
*********** <br>
****** <br>
******** <br>
**** <br>
********* <br>
*****
</td></tr>
</table>
    • good
    • 3
この回答へのお礼

できました~☆
どうも、ありがとうございます。

お礼日時:2003/04/17 23:37

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

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

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

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

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...続きを読む

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

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

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

いろはにほへと
123456789
ABCDEFGHIJ

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

例えば、

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

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

Aベストアンサー

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

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行頭から全角で3文字位さげたいのですが・・・

行頭から文字3文字分あけてから文字を打つスペースを空けるタグを教えて頂けますでしょうか?
宜しくお願いいたします。

Aベストアンサー

いろいろ方法はありますが・・・。
・IEの場合は、日本語全角文字でスペースを3つ空けてからhtml文章を書くだけで、スペースできます。ただし、他のブラウザでそれが対象になっていない場合は、画面崩れおきます。
・先の回答にあるように、スペースタグを入れる。
・スタイルシートで設定する。
<div style="text-indent:3em"></div>
で指定すると、文章の一番初めだけ、スペースが3文字分空きます。ただし、二行目に行く場合や、<br>で改行した次の行は、3文字分空きません。
<div style="margin-left:3em"></div>
で指定すると、DIVで囲まれた部分は全て、左3文字分のスペース(マージン)が取られます。

文全体を下げる場合は、3文字分、にこだわらないのであれば、<blockquote></blockquote>で段落を作るのがのが一番早いと思いますが・・・。

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)はこれら以外にも
いろいろな設定方法があります。

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

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

参考までに、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;
}

QHTMLで語の先頭をそろえるには?

こんにちは。

HTMLとCSSを勉強中の者です。

下の図のようにそれぞれの項目の語の先頭をそろえるには、テーブルを使うしかないでしょうか?

ワードのようにタブでそろえる方法があるのでしょうか?

いろいろ検索して調べたのですが、テーブルを使う以外の方法は見つけることができませんでした。

Aベストアンサー

その用途なら、枠のないテーブルが一番かと思いますが、
別の手としては

<style>
.schedule ul { margin:0; padding:0; }
.schedule ul > li { display:inline-block; width:8em; }
.schedule ul > li:nth-child(2) { width:4em; } /* 特定の列を短く */
</style>
<div class=schedule>
<ul><li>A<li>B<li>C<li>D</ul>
<ul><li>a<li>b<li>c<li>d</ul>
<ul><li>bo<li>po<li>mo<li>fo</ul>
</div>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング