CSS/SPANの使用方法

質問

tableタグ脱却をはかっているのですが
spanの使い方がいまいちわかっていません。

テキストA　　　　　テキストB　　　　　テキストC
-------------------------------------

↑このように、1行に３つの項目を並べ全体に下線を引き
それぞれにleft,center,rightを指定して
なおかつ、ACとBはfont-sizeやwightが異なる
…ということをしたいのですが
記述方法を教えていただけませんでしょうか。
よろしくお願いします。

回答No.3

UKY

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.2

uuing

<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分割の幅を指定しないのですね。
で、中央のマージン設定のために、windoｗ幅が狭くなっても大丈夫・・・と。ふむふむなるほど。

ぜひ使わせていただきます。ありがとうございました。

回答No.1

bita_2005

こんな感じでよろしいでしょうか？

<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の入れ子というのが違いでしょうか。
デザイン全体の中での位置やなにやで、使い分けるべきものなのでしょうね。私の場合はどちらがいいのか、これから確認してみます。ありがとうございました。