文字を左右に配置するHTML

質問

ホームページ内の文字を左右に配置したいのですが…
中々うまく行きません。
下記に例を記載します。
『夏至とは』の右横のスペースが空いている為、『冬至とは』のタイトルと文章全部を持ってきたいのですが…中々うまく配置されません。

<太字>夏至とは<太字>
二十四節気の一。
6月21日ごろ。太陽の中心が夏至点を通過する時。

<太字>冬至とは<太字>
二十四節気の一。
12月22日ごろ。太陽の中心が冬至点を通過する。

下記のようなイメージです。こちらに記載した場合
崩れて見えるかもしれませんが…
左右バランスよく配置したいです。
宜しくお願いします。

<太字>夏至とは<太字>　　　　　　 　<太字>冬至とは<太字>
二十四節気の一。　　　　　　　　 　　　　二十四節気の一。
6月21日ごろ。　　　　　　 　　　 　　　　　 12月22日ごろ。
太陽の中心が夏至点を通過… 　 　　　　　　　太陽の中心が冬至点…

回答No.2

noname#66720 · ベストアンサー

それぞれをdivで囲ってfloatさせると良いです。
以下サンプルです

<div>
<h2>夏至とは</h2>
<p>二十四節気の一。</p>
<p>6月21日ごろ。太陽の中心が夏至点を通過する時。</p>
</div>

<div>
<h2>冬至とは</h2>
<p>二十四節気の一。</p>
<p>12月22日ごろ。太陽の中心が冬至点を通過する。</p>
</div>

div {
float:left;
width:300px;
}

CSSを利用することになります。

お礼

御礼が遅くなり申し訳ありません。
丁寧に記載していただき、どうもありがとうございました。
色々な方法で、表記できる事がわかり
参考になりました。
自分で色々アレンジして、勉強してみたいと思います。

回答No.3

abril

> 『夏至とは』の右横のスペースが空いている為、『冬至とは』のタイトルと文章全部を持ってきたいのですが…
> 左右バランスよく配置したいです。

ANo.1様の様なtableによるレイアウトも勿論可能なのですが、その内容自体は「表」として捉えて相応しいものですか？もしそうでなければ、質問者様は過去の質問でCSSでのレイアウトをされていた様に記憶しておりますので、単なる段落として捉えた場合、以下の様にもできます（下記はXHTMLではなくHTMLの書式で書いてあります。ただしCSSの部分はどちらでも使用可です。）
【HTML】
<div class="hoge">
<p id="geshi">
<strong>夏至とは</strong><br>
二十四節気の一。<br>
6月21日ごろ。<br>
太陽の中心が夏至点を通過…
</p>

<p id="touji">
<strong>冬至とは</strong><br>
二十四節気の一。<br>
12月22日ごろ。<br>
太陽の中心が冬至点…
</p>
</div>

【CSS】
div.hoge {
zoom: 100%;
}
div.hoge:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
div.hoge p {
width: 48%;
}
div.hoge p#geshi {
float: left;
}
div.hoge p#touji {
float: right;
}

"width: 48%;"の部分を増減することで、それぞれのレンダリング領域を変更できます。ただし、50%づつにしてしまうと左右のテキストが隙間無くくっついたり、他のスタイルとの兼ね合いによってはコラム落ちしてしまったりする可能性があるので、現状の値よりは増やさない方が安全かもしれません。div.hogeは子要素の<p>がフロートしている事で高さが失われるのを回避する為の設定です。

ANo.2様の様に「太字」のところは見出しにするという考え方もありますし（その場合は<p>内には入れ子にできませんが）、また、より突っ込んだ考え方では「段落」というより「定義リスト」の方が相応しい内容にも思われます。その場合は：
【HTML】
<div class="hoge">
<dl id="geshi">
<dt>夏至とは</dt>
<dd>二十四節気の一。<br>
6月21日ごろ。<br>
太陽の中心が夏至点を通過…</dd>
</dl>

<dl id="touji">
<dt>冬至とは</dt>
<dd>二十四節気の一。<br>
12月22日ごろ。<br>
太陽の中心が冬至点…</dd>
</dl>
</div>

ともできますね。<p>→<dl>に置き換えた場合、基本のフロートや幅の設定は同じですが.、子要素<dt><dd>の余白の初期化や<dt>自体に「太字」のスタイルを追加するなど、若干の調整が必要です。

お礼

御礼が遅くなり申し訳ありません。
丁寧な説明ありがとうございました。

CSSでいつも戸惑ってしまう事が多く…
とても参考になりました。
まだまだ勉強不足が多く、今後の参考にさせていただきたいと思います。どうもありがとうございました。

回答No.1

yayoi4736

表のタグを使い、ラインを消されればよろしいのでは？

<Table Border="0">
<Tr>
<Td><B>夏至とは</B></Td><Td><B>冬至とは</B></Td>
</Tr>
<Tr>
<Td><Div Align="center">二十四節気の一。<br>6月21日ごろ。<br>太陽の中心が夏至点を通過… <br></Div></Td><Td><Div Align="center">二十四節気の一。<br> 12月22日ごろ。<br>太陽の中心が冬至点…<br></Div></Td>
<Tr>
</Table>

ご希望の表示にならなかったらゴメンナサイ☆

お礼

御礼が遅くなり申し訳ありません。
表を使用する案は、全く頭にありませんでした。
色々な方法で、表記できる事がわかりました。
今後の参考にさせていただきたいと思います。
どうもありがとうございました。