• ベストアンサー

CSSで同一行で左右揃え

CSSによるレイアウトについてご質問です。 ブロック要素を左揃えまたは右揃えにする事は出来るのですが、 一つの行において、左揃えと右揃えをしたい場合は どのような方法があるのでしょうか。 例： [左テキスト　　　　　　　　　　　　　　右テキスト]

  • tomuo
  • お礼率80% (16/20)
  • CSS
  • 回答数1
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
noname#10926
noname#10926
回答No.1

たぶんテーブルを使用していると思いますが、 テーブルを使用している場合には １つのセルを２つに分割するか または、１つのセル内にさらにテーブルを定義して ２つに分割すれば良いと思います。 後者の場合にはテーブルの幅などによって 体裁が悪くなるので幅や余白を0にすればよいと思います。 （前者）１つのセルを２つに分割（３行１列） <TABLE border="1" width="300" height="187"> <TBODY> <TR> <TD>左テキスト</TD> <TD style="text-align : right;">右テキスト</TD> </TR> <TR> <TD colspan="2"></TD> </TR> <TR> <TD colspan="2"></TD> </TR> </TBODY> </TABLE> （後者）１つのセル内にさらにテーブルを定義（３行１列） <TABLE border="1" width="265" height="166"> <TBODY> <TR> <TD> <TABLE cellpadding="0" cellspacing="0" width="100%"> <TBODY> <TR> <TD>左テキスト</TD> <TD style="text-align : right;">右テキスト</TD> </TR> </TBODY> </TABLE> </TD> </TR> <TR> <TD></TD> </TR> <TR> <TD></TD> </TR> </TBODY> </TABLE>

tomuo
質問者

お礼

ご回答ありがとうございます。 説明不足で申し訳ありません。 tableを使わずCSSのみでのレイアウトについてのご質問でした。 自分で試したところ、２つのブロック要素をfloat:leftで 1行につなげたうえで、右ブロックにtext-align: rightを指定することで実現できました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 【ＣＳＳ】floatで左右に並べた<div>を下揃えにできますか？

    ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、この２つのblockレベル要素は高さが違えば下部が不ぞろいになります。 これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか？ text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。

    • ベストアンサー
    • HTML
  • html・CSSの行揃えについて質問です。

    現在、教則本を見ながらhtml・CSSについて勉強しています。 （まだ勉強を始めて３日の、ど初心者です…） 「adress部分を行揃えを右に指定して、上に線を引く」という部分があって 以下のように打ち込んで、最初はきちんと右側に寄って線も引かれたのですが 他の要素を作成していたら、いつのまにか線は消えてしまい、行も左に寄ってしまいました。 [ CSS ] address{ font-size:85%; font-style:normal;　 text-align:right;　 border-top:1px solid #000000; padding-top:10px; margin-top:10px; clear:left; } どこが間違っているのか自力では発見できず、困っています。 過去の質問も見ましたが、なんせ初心者でちんぷんかんぷんでした… 申し訳ありませんが、わかる方がいらっしゃいましたら教えてください。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • テーブルとDIVとCSSについて質問です。

    テーブルとDIVとCSSについて質問です。 テーブルタグのtdにdivで、写真を入れたい（写真の周りにdivで枠の飾りみたいのをつけたいから）です。 その下に、CSSで定義した文字を入れたいのですが、 tdが横に２つ（＝つまり、写真が２つ並ぶ）と、左の写真の下の文字を3行にし、 右の写真を下の文字を2行にすると、縦の中央になってしまい、 右が少し下にきてしまいます。 どう、定義したらいいでしょうか？ また、その文字らを、text-align="center"でCSSで定義しても、 デザインですとセンターに見えても、ブラウザでみると、左揃えによってしまいます。 どう書いたらいいか、あわせて教えてください。 また、tableにdivを入れたらダメの場合は、どうやったら、いいか教えて下さい。 よろしくお願いします。

  • css。横並びBOXに長文textを流し込む方法

    css。横並びBOXに長文textを流し込む方法はありますか？ CSSについてです。 高さ固定の横並び３連BOXに長文テキストを流し込む場合。 ブロック要素で区切るでもなく、センテンスの終わりでもない箇所で、複数のBOXにまたがるCSSになります。。。。 レイアウトのBOXサイズは固定だが、 テキストは文章の途中で隣のBOXへ移り、文字サイズの変更 （ブラウザやOSの違い）で隣のBOXへ移る位置も変わる。 これを実現させたいのですが、、、。 まぁ紙媒体においての、１ページ３段組みレイアウトの流し込みを HTMLで可能なのか？という質問になります。 文書作成ツールやデザインアプリでは当たり前な方法ですが。 CSSでも可能なんでしょうか？ または、このようなことが可能な jQueryがありましたら ご紹介ください。

    • ベストアンサー
    • CSS
  • CSSの浮動ボックスとWeb標準に関する疑問

    お世話になります。 CSSを使った回り込みのせレイアウトでWeb標準に関する疑問について教えてください。 2通りの記述を考えました。 ■Type1ソース <p><img style="float: left;" src="sample.gif" alt="sample" />右に回り込ませる文章・・・....・・・・</p> ■Type2ソース <p style="float: left;"><imgsrc="sample.gif" alt="sample" /></p> <p>右に回り込ませる文章・・・....・・・・</p> [質問1] ●CSSのfloatプロパティでleftを設定した要素はブロックレベル要素になると理解しています。その場合Type1ソースのimg要素はブロックレベル要素になり、p要素はブロック要素を子要素としてもてない規則に違反する気がしますが、Web標準として良いのでしょうか。 [質問2] ●Type2ソースもWeb標準で認められているか自身が持てません。 [質問3] ●回り込みレイアウトに関して、基本的な勘違いをしていないか大変気になっています。実際に良く使われる書き方などがあれば教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSのフロートを使ったレイアウト割

    CSSのフロートを使ったレイアウト割で質問です。 あるボックス（仮に100px）を真横に並べる時の事ですが、 いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。 間隔を空けるためにマージンで10pxとったとして 100px+10pxで110pxのものが5つ 550pxの幅になります。 ただ、最後のボックスにはマージンを付けたくありません。 ■がボックス、□が間隔の10pxだとして ｜　　バナー　　｜ ■□■□■□■□■ ■□■□■□■□■ ■□■□■□■□■ ｜他のコンテンツ｜ こういう風にしたいんです。（この例でいうと540pxにおさめたい） 左と右が端にあって等間隔でそろっている。 どんどん下にも追加していったり消したり、つめていくので 一番右の最後にだけ別のCSSを付けるわけにはいきません。 どんどん左詰めで詰まって行く コンテンツを作りたいのですが、このやり方だと出来ないですよね。 あまり使わないんですが こういう場合って <ul>とか<il>とか使うんですか？ やり方があったら教えて下さい。

    • ベストアンサー
    • HTML
  • CSSでレイアウト

    3つのブロック要素div1,div2,div3があった場合に添付のような レイアウトにするにはどうすればよいでしょうか？ div2,div3をさらにレイアウト用のdiv4でグループ化してしまえばできますが、 今後もできるだけHTMLをいじることなくCSSだけで自由にレイアウト変更をできるように なっておきたいと思っています。 できれば座標指定はしたくないのでPositionのStaticは使わないほうが嬉しいです。 全部Staticにする方法はわかっておりますので全箇所Staticではなく、 「全部相対postionではなく1か所だけStaticを使う」などが効率的だ、というのであれば そちらのやり方でも教えていただけると助かります。 特定の環境での実行を意図していませんが必要な場合はIE8以降、などイマドキな環境 での利用しやすいものがより助かります。HTML/CSSのバージョンはそれに応じる形で 特に指定はございません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • パワーポイントのテキストボックス内での右寄せ・左寄せ

    パワーポイント2003を使用しています。 オートシェイプにテキストを追加した際の質問です。 例えば、文字を打ち込んで『左揃え』を指定すると オートシェイプ内の文字全てが左揃えになりますが、 一番下の行だけ右揃えにしたい場合は、どうすれば出来ますか？ ▼こんな感じです テキストテキストテキストテキスト テキストテキストテキスト テキストテキストテキストテキ 　　　　　　　　　　　　　　　　　　　　テキスト ワードでは出来るけれどパワーポイントでは無理なのかな？と 今まであきらめていましたが、何度か、他のワードやサイトテキストを コピペすると一行（一段落？）だけ右揃えができることがあったので、 本当はきちんとそのような機能があるのでしょうか？ パワーポイントに強い方、ぜひ教えて下さい！

  • CSSのDIV要素

    CSSのDIV要素を使ってボックスを作ったんですが、 外部スタイルシートに書き込んで、下記のようにする方法はありませんか？ <center> <DIV align="left"> </DIV> </center> ボックス本体を画面の中央に持っていき、内容は左揃えにしたいのです。 どなたか知っている方がいましたら、教えてください。

    • ベストアンサー
    • HTML
  • CSSでセンタリングしたい

    こんにちは 現在デザインをCSSでWebサイトを構築していますが、どうしても分からないことがあります。 今まで、センタリングはcenter要素で行っていましたが、CSSではどのようにして行うのでしょうか。 ソニー : http://www.sony.co.jp/ のようにbody要素全体をセンタリングしたいです。 text-align :center はインライン要素専用ですので、ブロック要素ができるCSSはあるのでしょうか?Webブラウザに依存するJavaScriptなどのスクリプトは使用できません。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する