「標準モード」にて、1つの行に2つの内容の文を挿入し、
それをそれぞれ左揃え、右揃えに配置したかったのですが、
段落単位でしか選択できず(クリックするとピンク色の枠でくくられて
しまいます)、2つの文とも左揃えか右揃えのどちらか一方しか選択できません。
これらを分けて左揃え、右揃えにすることは可能なのでしょうか?

A 回答 (3件)

<TABLE border="1" align="right">


<TBODY>
<TR>
<TD align="right">文字</TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="1">
<TBODY>
<TR>
<TD>文字</TD>
</TR>
</TBODY>
</TABLE>

上のようにしてみてください。
標準モードなら,これで出来ます。
なお,わかりやすいように枠を表示させていますが,border="1"を削除するか,1の代わりに0を入力するかで,枠が消えます。

ビルダーでの操作方法は,まず,一マスの表を作成し,「右に寄せたい文章」を書きます。
そのまま,「ページ編集」「HTMLソース」などのタブの右に目をやると,「標準」「TD」とありますので,この「TD」をクリックして,「TDの属性」を選択します。
「水平位置揃え」で「右揃え」を選択します。
今度は「表」タブをクリックします。
「回り込み」のところで「右寄せ」にチェックを入れ,枠を表示させないのであれば,「枠表示」のチェックをはずすか,数字を0にしてください。
この作業が終わったら,下矢印キーを1回押し,もう一度,一マスの表を作成し,今度は「左に寄せたい文章」を書きます。
枠を消すのであれば,同じように今度は「TABLEの属性」を出し,枠を消してください。

たぶん,こちらが簡単だと思います。
    • good
    • 0

ビルダーが手元にないので詳しい説明ができませんが、挿入した表の大きさを指定できるはずですね。



たぶん表の上で右クリックし、プロパティあるいは表の属性、レイアウト…等々。

ともかく大きさの指定をピクセル表示では無く、パーセント表示にするとウィンドウが小さくなっても表も小さくなるはずです。

あるいはソースを開き、
table width="100%" と追加するとお望みの状態になると思います。
    • good
    • 0

簡単に申し上げると、横に二つ並んだ表を挿入して、それぞれに文章を書き、左揃え、右揃えを設定した後、表の外枠を0ピクセル、つまり消せばよいのです。

この回答への補足

ご回答本当にありがとうございます。
なるほどと思い早速やってみました。
ですが表を挿入して右揃えで文字を寄せることはできましたが、
画面の大きさによって表が縮んでくれません。右へ隠れていってしまい
ます。これをなんとか「画面サイズに合わせて」ずっと右端に文字を固定
させておくことは可能でしょうか?
重ね重ね申し訳ありませんが、お時間がありましたらご回答ください。

補足日時:2002/03/04 17:44
    • good
    • 0

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

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

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

Qfloatで左と右の長さを揃えたい!

CSSでFLOATを使って、左(サイド)と右(メイン)を作成しました。
複数のhtmlがあり、内容によってメインの長さ(height)が違います。

(1)メインの長さに合わせてサイドの長さを揃えたいのですが、
ひとつのCSSで出来ますか?

お分かりになる方ご教授下さい。
よろしくお願いしますm(_ _)m

Aベストアンサー

CSSだけでも出来ない事もないのですが、jsでやる方が簡単なのでその方法を紹介します。

下記サイトがそのjsをダウンロード出来るサイトです。
http://blog.webcreativepark.net/2007/07/26-010338.html

デモページつきで解説してくれてるサイト
http://css-happylife.com/log/javascript/000170.shtml
http://www.css-lecture.com/log/javascript/001.html

上記サイトのどれか見たら直ぐに使い方は分かると思います。

Q1行で左寄せと右寄せと中央揃えというのはできますでしょうか?

お世話になります。タイトルのとおりCSS等を駆使して
1行で左寄せと右寄せと中央揃えというのはできますでしょうか?

左寄せと右寄せは下記のアドレスのとおりにして出来たのですが、
中央もいれるとずれてしまいます。
http://allabout.co.jp/internet/hpcreate/closeup/CU20060209A/index.htm


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

Aベストアンサー

1行に3つの情報を、左寄せ・中央・右寄せとの事ですが、以下でいかがでしょうか。
WinIEのみで確認しました。

◎まずはHTML

<div id="title">
<span id="a">aaaa</span>
<span id="c">cccc</span>
bbbb
</div>

◎次にCSS
<!--
div#title{width: 650px;
     padding: 5px;
     background-color: #666666;
     color: #FFFFFF;
     text-align: center;
     }
span#a{float: left; }
span#c{float: right; }
-->

上記の方法でid「title」のボックスにa,b,cが一行に表示されます。
span id「a」と「c」にはそれぞれfloat設定を、「b」の情報がcenterにくるよう
div「title」自体にtext-align:centerの設定をしました。

opera、firefox、Mac環境では未確認です。

1行に3つの情報を、左寄せ・中央・右寄せとの事ですが、以下でいかがでしょうか。
WinIEのみで確認しました。

◎まずはHTML

<div id="title">
<span id="a">aaaa</span>
<span id="c">cccc</span>
bbbb
</div>

◎次にCSS
<!--
div#title{width: 650px;
     padding: 5px;
     background-color: #666666;
     color: #FFFFFF;
     text-align: center;
     }
span#a{float: left; }
span#c{float: right; }
-->

上記の方法でid「title」のボックスにa,b,c...続きを読む

Q文章を左揃えのままCSSで全体を中央揃えにしたい

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

しかし、全ての画像が読み込まれるまで少々時間がかかるのもあり、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>
-------------------------------------------------

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

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

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

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

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


●??02.css
------------------------------------------...続きを読む

Aベストアンサー

●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>

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

Q外部スタイルシートで段落の行揃えと幅とを指定する

divを外部cssでスタイル指定し、
すべてのファイルの段落を中央揃え・背景色白にしています。
div {
text-align: center;
 background-color: #FFFFFF;
}

これに以下のように幅指定を加えたところ、
width: 400px;
中央揃えが反映されなくなりました。
(IE6.0、NN7.0 WindowsXP)

行揃えと幅とを同時に指定し、反映させるにはどのように記述すればよいでしょうか。
よろしくお願いします。

Aベストアンサー

中央揃えが反映されなくなったというのは、文字のセンタリングの基準位置が端に寄ってしまったという状態でしょうか。
それでしたら、divのボックス自体がセンタリングの指定をされていないので、これまでは表示領域に100%の幅で領域を確保していたdivが、幅を400pxに制限されたために、表示領域の左端を基準として幅400pxのボックスになり、その中で文字がセンタリングされている状態になっているのではないでしょうか。
試しに、bodyに対してbackground-color: black;の指定を入れて背景を黒くすると、div要素が確保している領域の背景が白色なので、確保されている領域が把握できると思います。
なお、div要素に対するwidth指定は可能ですし、有効な指定です。

とりあえず改善策としては、#2の方の挙げられているように、bodyにtext-align: centerを適用させ、それに加えてdivのスタイルシート指定にmargin: auto;を追加すればよいと思います。
従来のIEやIE6の後方互換モードでは、div要素などブロックレベル要素をセンタリングするには、その親要素でtext-align: center;を指定する必要があります。 そのため、body要素に対してtext-align: center;の指定が必要になります。 ただし、W3Cが勧告しているスタイルシートの正しい解釈としては、text-alignはブロックレベル要素には適用されませんので、IE以外のブラウザでは上記のtext-alignの指定はブロックレベル要素に効きません。
正しい解釈に近い表示法を取るブラウザ(Netscape7やIE6の標準モード)で、ブロックレベル要素をセンタリングする時には、margin: auto;を使います。 これをdiv要素のスタイルに追加すればよいでしょう。
蛇足気味ですが、margin: auto;という指定は、上下左右のマージンを自動設定するスタイルシート指定になります。 もしmargin-left: auto;という指定だけを行うと、横幅の余白領域がすべて自動的に左側のマージンに割り振られ、結果的にそのブロックレベル要素は右寄せになります。 margin-right: auto;のみの場合は、同様に余白領域がすべて自動的に右側のマージンになり、結果的に左寄せになります。 両方をautoに設定すれば、余白領域を左右で自動的に分け合い、結果的に中央寄せになります。
従来のIEと、Netscapeでの表示の共通性を確保するのであれば、この両方を追加すると良いでしょう。

参考になれば。 見当違いでしたら、ごめんなさい。

中央揃えが反映されなくなったというのは、文字のセンタリングの基準位置が端に寄ってしまったという状態でしょうか。
それでしたら、divのボックス自体がセンタリングの指定をされていないので、これまでは表示領域に100%の幅で領域を確保していたdivが、幅を400pxに制限されたために、表示領域の左端を基準として幅400pxのボックスになり、その中で文字がセンタリングされている状態になっているのではないでしょうか。
試しに、bodyに対してbackground-color: black;の指定を入れて背景を黒くすると、div要素...続きを読む

Q左○○px、右は残りの幅(100%-左px)ってできますか?

CSSでレイアウトを組みたいと思ってます。

要は左と右に2つに割って左はpx単位で指定して、右は残りのサイズ、ウインドウのサイズ変更に伴って可変するようにレイアウトを組んでいきたいと考えています。

発想力が足りないのか、基礎的な知識が足りないのか・・・
どちらも足りないとは思いますが、おしえていただければ幸いです。

どうかよろしくお願いいたします。

Aベストアンサー

とりあえずdivでフロートするだけでもよいかと

<style>
#l{
width:200px;
background-Color:blue;
float:left;
}
#r{
width:auto;
background-Color:red;
}
#b{
width:auto;
background-Color:green;
}
</style>
<div id="l">test</div>
<div id="r">test</div>
<div id="b">test</div>


人気Q&Aランキング

おすすめ情報