特定の文字行だけを左詰で表示する

質問

cssファイルで

body {text-align: center;}

としている場合、htmlファイルでbodyの中の特定の文字行だけを左詰で表示するにはどうしたらよいのでしょうか。

回答No.2

goldfox · ベストアンサー

＞span styleはうまくいきませんでした。念を入れてチェックしてみたのですが...。なぜですかねえ。

text-alignは、ブロックレベル要素内のインライン要素の行揃えを指定するプロパティです。
spanはインライン要素ですから、
width: 100%; か display: block; を指定してブロックレベルにでもしないと、text-alignは反映されません。
枠線を付けてみると、どういう意味か分かりやすいかと思います。

.text1 {text-align:left; border:1px solid #ff0000;}
.text2 {text-align:left; width:100%; border:1px solid #ff0000;}

<p class="text1">左詰できる</p>
<span class="text1">左詰できない</span>
<span class="text2">左詰できる</span>

参考URL：

http://e-ability.net/modules/weblog/details.php?blog_id=38

お礼

インライン要素とブロック要素という言葉を初めて知りました。御教示のURL、勉強させていただきました。

text-align:left; width:100%でうまくいきました。

有り難うございました！

回答No.4

NTJ

そのタグが「インライン要素かブロック要素か？」を見分けたい場合、以下みたいなCSSを設定してみてください。
<STYLE>
*{border:1 aqua solid;}
</STYLE>

コレで全要素に水色の枠線が出ます。
このとき、DIVやPのようなブロック要素では、特定の指定をしていなければ画面の幅全体の枠線となり、SPANやAやBのようなインライン要素では、行内の文字部分のみの枠線となります。

注目すべきはLIやDT、DDなどと（リスト要素）、TABLEの場合（テーブル要素）ですね。
何れもインライン・ブロックのいずれとも異なる「範囲」になります。

もうひとつ、FORMがブロック要素であることも解ると思います。
コレがFORMタグが画面を乱して、使い勝手を悪くしている原因なんですね。
（よく、TABLE構造の半端な位置へFORMを記述して、遠くへ追い払って対応している例を見かけますね。）
コレも「表示属性」が原因な訳です。

なので・・・
FORM{display:inline;}
とCSSを切ってやると、今までの苦労が嘘のように消え去ってくれます。
・・・てか、display:inline;の指定って、FORMの画面乱しへの対応の為に用意されているのではないかと。（笑）

お礼

高度なテクニックをお教えいただきました。インライン要素かブロック要素かを見分けるなんてことができるんですね。

FORMタグも便利なのをお教えいただきました。何かの時に思い出せるようよく覚えました。

有り難うございました。

回答No.3

ORmituhide

#1です。ごめんなさい。#2さんのおっしゃる通りです。
spanではできません。
通常は段落のpで、表などに使う場合はtdなどに、一定の範囲を左詰にしたい時とかはdivにtext-align:leftをって感じで使ってます。
深くお詫びいたします。

お礼

p、div、tdなんかに使えるんですね。感じがよく分かりました。

有り難うございました。

回答No.1

ORmituhide

<span style="text-align:left">左詰したい文字</span>
か
<div style="text-align:left">左詰したい文字</div>
でできる思います。
<p style="text-align:left">でもいいかも。

お礼

divとpでできました。助かりました！

でも、span styleはうまくいきませんでした。念を入れてチェックしてみたのですが...。なぜですかねえ。

有り難うございました。