ホームページ内の文字を左右に配置したいのですが…
中々うまく行きません。
下記に例を記載します。
『夏至とは』の右横のスペースが空いている為、『冬至とは』のタイトルと文章全部を持ってきたいのですが…中々うまく配置されません。
<太字>夏至とは<太字>
二十四節気の一。
6月21日ごろ。太陽の中心が夏至点を通過する時。
<太字>冬至とは<太字>
二十四節気の一。
12月22日ごろ。太陽の中心が冬至点を通過する。
下記のようなイメージです。こちらに記載した場合
崩れて見えるかもしれませんが…
左右バランスよく配置したいです。
宜しくお願いします。
<太字>夏至とは<太字> <太字>冬至とは<太字>
二十四節気の一。 二十四節気の一。
6月21日ごろ。 12月22日ごろ。
太陽の中心が夏至点を通過… 太陽の中心が冬至点…
No.2ベストアンサー
- 回答日時:
それぞれを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
- 回答日時:
> 『夏至とは』の右横のスペースが空いている為、『冬至とは』のタイトルと文章全部を持ってきたいのですが…
> 左右バランスよく配置したいです。
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
- 回答日時:
表のタグを使い、ラインを消されればよろしいのでは?
<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>
ご希望の表示にならなかったらゴメンナサイ☆
御礼が遅くなり申し訳ありません。
表を使用する案は、全く頭にありませんでした。
色々な方法で、表記できる事がわかりました。
今後の参考にさせていただきたいと思います。
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 宇宙科学・天文学・天気 太陽の高度について 3 2022/10/28 20:28
- 地球科学 中3 理科 もし地球の地軸が傾いていなかったら? という課題をネットで調べていたら『地球の地軸が傾い 7 2022/12/08 17:17
- 宇宙科学・天文学・天気 太陰太陽暦で元日はいつ? 7 2022/11/05 21:56
- ガーデニング・家庭菜園 庭に花木(花水木)などの日当たりの良い木を植えたいと思っております。夏は太陽の位置が高く日差しが強く 2 2022/09/18 18:41
- ニュース・時事トーク 太陽光発電は見た目と違い役立たずだ 6 2022/06/30 07:40
- 文学 『金色夜叉の名セリフ』は、太陽黒点の変化により増減する宇宙放射線を地球の磁気圏が防御する仕組み? 1 2022/07/18 21:34
- 据え置き型ゲーム機 Switchで太鼓の達人をやってるのですが、プロコンが使いにくくて仕方がないです。何が使いにくいって 1 2023/07/01 10:46
- 一戸建て 太陽光のシミュレーション結果 冬場エアコンなど結局どのくらい使えるの シャープの2.25kw蓄電池付 2 2023/07/04 00:01
- その他(病気・怪我・症状) 【至急】これってヤバいですか?※画像やや閲覧注意 1 2023/05/26 09:35
- 占い タロットリーディングお願いします。 2 2023/08/23 05:17
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
質問1.
-
テキストボックスの中にリンク...
-
親要素・子要素
-
HTMLです 四角みたいにして中に...
-
2個のFormを横並びにしたい
-
超音波で洗脳。
-
アコーディオンメニューの二階...
-
CSSのセレクタに指定するbodyと...
-
HTMLです次の意味を持つ要素ま...
-
CSS:overflow要素の印刷について
-
タグの締め
-
下線と文字の間を調整するには...
-
「諸要素」とはどういう意味で...
-
含む含まないという概念自体の...
-
改行ほどは行かないけど、若干...
-
角丸画像の背景色を透明にした...
-
border: noneでボタンの境界線...
-
submit buttonの違い
-
tdに対してmin-heightの定義、...
-
CSSで改行後の行間調整
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
還暦を過ぎた方々に質問です。
-
「諸要素」とはどういう意味で...
-
質問1.
-
textareaの幅を画面と合わせたい
-
角丸画像の背景色を透明にした...
-
2個のFormを横並びにしたい
-
テキストボックスの中にリンク...
-
HTMLです 四角みたいにして中に...
-
CSS:overflow要素の印刷について
-
input type="hidden"で取得した...
-
tdに対してmin-heightの定義、...
-
HTMLページ上でiframeを最前面...
-
タグは大文字と小文字どちらが...
-
HTMLです
-
2行にしたい要素、改行か分割...
-
改行ほどは行かないけど、若干...
-
H1タグを画像にしたい
おすすめ情報