![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?5a7ff87)
No.2ベストアンサー
- 回答日時:
<div style="border-bottom:1px solid; width:450px;">
<span style="text-align:left; font-size:20px; font-weight:bold;">テキストA</span>
<span style="text-align:center; margin:0px 100px 0px 100px;">テキストB</span>
<span style="text-align:right; font-size:20px; font-weight:bold;">テキストC</span>
</div>
こんな感じでどうでしょうか。
テキストBのmarginで左右のテキストとの隙間を調節し,DIVタグのwidthで全体の長さを調節します。
回答をありがとうございます。
ははあ、これは3分割の幅を指定しないのですね。
で、中央のマージン設定のために、window幅が狭くなっても大丈夫・・・と。ふむふむなるほど。
ぜひ使わせていただきます。ありがとうございました。
No.3
- 回答日時:
table は単純に div や span に置き換えればいいってもんじゃないんですよ。
というか、その考え方で行くと確実にうまくいきませんし、table から脱却する意味がありません。まず初めに正しい HTML を書いて (このときはまだスタイルのことは一切考えない)、HTML ができてからその HTML に合わせてじっくりスタイルを考えます。
(したがって、完成した正しい HTML を提示していただかないと、CSS の「記述方法」を回答することはできません。)
span の使い方が分からないといいますが、はっきりいって CSS から見れば p とか em とか div とか span とか、HTML の要素型なんて関係ないんですよ。HTML と CSS は完全に別個のものなんですから。
参考URL:http://www.fromdfj.net/html/divsyndrome.html
お叱りの言葉をどうもありがとうございます。
事情を説明しますと、最近blogに手を出し始め、さして知識があるわけでもないのにカスタマイズの自由度バリバリのsb(jugem系)を選択したのです。これはひとえに既存の自サイトのデザインを極力忠実に再現したいという希望があったからです。
そこではじめてCSSと向き合うことになり、この際だからちゃんと勉強してと思ったのですが、なにせもともとのサイトというのが「ソースってなに?」状態から作り始めたビルダー任せ(+α)のものであるため、ひとつひとつのタグについてきっちり把握しきれているわけではありません。従ってカスタマイズの叩き台して使っているsbのデフォルトテンプレのHTMLが正しいのかどうかも判断しきれません。
現在、一度デフォルトのCSSを全部外し素のHTMLだけの状態に戻してから、あらためてCSSの項目をひとつひとつ戻し、それがどこに影響するのかを確認するという作業をやっております。当然のことながらデフォルトのテンプレは汎用であるため、私が望むデザインには必要の無い設定がやまほどあるくせに、希望するデザインを構築するために必要な知識が私には圧倒的に不足しています。
tableをレイアウトのために使うべきではないという主張も勉強する中ではじめて知り、spanというタグの存在すら覚えたばかりです。UKYさんには中途半端な知識へのお叱りを受けてしまいましたが、「正しいHTML」と「正しいCSS」を全て把握してから…となると、blogオープンが1年後になってしまいます^^;
詳しい方々から見ればいろいろご不満もあるかとは思いますが、いきなり完全なものを書くというのは無理な場合もあります。不正確でも強引でも、とりあえず暫定のものを作り上げてから、シェイプアップを気長にやっていこうと思いますので、今しばらくはお目こぼしくださいませ。
回答をありがとうございました。
なお、頂いた参考URLは既にブックマーク済みでした^^
No.1
- 回答日時:
こんな感じでよろしいでしょうか?
<SPAN style="border-bottom:1 solid;">
<SPAN style="text-align:left;width:33%;font-size:10pt;">テキストA</SPAN>
<SPAN style="text-align:center;width:33%;font-size:13pt;font-weight:bold;">テキストB</SPAN>
<SPAN style="text-align:right;width:33%;font-size:10pt;">テキストC</SPAN>
</SPAN>
回答をありがとうございます。
こちらは、それぞれの幅が3等分になるように%指定する方法ですね。あとは下線のために全体を括るのが、上の方はdivでこちらはSspanの入れ子というのが違いでしょうか。
デザイン全体の中での位置やなにやで、使い分けるべきものなのでしょうね。私の場合はどちらがいいのか、これから確認してみます。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- PHP アンドロイドスマホでのphp echoの文字サイズ 1 2023/05/13 15:15
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IE8でhタグの行間が詰まること...
-
Excel VBA メール作成について ...
-
全角半角含めて等幅で表示したい
-
指定の文字だけ色を変える
-
特定の文字のみcssを適用するに...
-
リンク文字
-
SMILのReal textでの文字化け
-
正規表現
-
h1タグのパンくずリストへの設置
-
CSSを一部無効にしたい
-
フォントカラー指定
-
文字の位置、上下のマージンが...
-
セレクトボックス内の文字の文...
-
TD内で日本語を単語単位で扱いたい
-
cssで指定するfontサイズについ...
-
(スタイルシート)文字サイズ...
-
ブラウザによって異なるフォン...
-
FC2ブログの改行幅の質問です。
-
CSS2.1とCSS3の違いを教えて下...
-
<input type="file"> の幅
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
リンク文字
-
文字の位置、上下のマージンが...
-
Format 関数 表示書式指定文字...
-
テキストファイルの行を指定し...
-
API Sleep関数について
-
テキストエリア内の文字の装飾
-
CSSを一部無効にしたい
-
fontサイズ指定の ”-(マイナ...
-
ホームページビルダー作成HPがi...
-
全角半角含めて等幅で表示したい
-
CSSについて教えてください。 ...
-
<input type="file"> の幅
-
background-color: #ddd;の意味...
-
上付き文字と下付き文字を同時...
-
h1タグのパンくずリストへの設置
-
Excel VBA メール作成について ...
-
Excel VBA メール作成について ...
-
指定の文字だけ色を変える
おすすめ情報