スタイルシートで文字色を指定した時、改行させたくな

解決済

質問者：CHNKHHXJCXC
質問日時：2013/04/06 00:12
回答数：4件

スタイルシートで文字色を指定した時、改行させたくないです。

<html>
<head>
<title>test</title>
<style type="text/css">
p.red { color: red; }
</style>
</head>
<body>
a<p class="red">bcd</p>
</body>
</html>

これをすると

a

bcd

になってしまいます。

実際は、
abcd
にしたいです。

pタグは改行もされてしまうとのことですが、色を付けつつ改行しない方法はありますか？

そもそもフォントに色を付けるだけで改行する機能も付いちゃうのが不思議です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： DrFell
回答日時：2013/04/06 12:11

>そもそもフォントに色を付けるだけで改行する機能も付いちゃうのが不思議です。

pタグはパタグラフ（段落）のタグです。段落ですから、前後に改行が入るのは自然なことなのです。

html+cssではしたいデザインではなく、文章構造に対してタグをつけます。なぜ、赤にしたいのか？ということです。これは、書いている人にしかわかりませんが、想像するに目立たせたいのかな？と思いますので、その方向で話を進めます。

目立たせたいつまり、強調したいならstrongタグを使います。
<body>
<p>a<strong>bcd</strong></p>
</body>

で、赤くしたいならスタイルシートには
strong{color:red;}
ですね。

初期値では太くなります。それが嫌なら
strong{
color:red;
font-weight : normal ;
}
font-weight : lighter;でもいいかもしれません。どのような形態であれ、目立たせたいなら、strongです。初期値は打ち消すことが可能ですので、とらわれないでください。

pタグや見出しタグは改行が入ります。これらをブロックレベル要素といいます。
strongやaタグは文中に入り、改行は入りません。これらをインライン要素といいます。

二つは改行の有無以外にも、いろいろと性質が違います。このあたりは、別途勉強してください。

まぁ、簡単に言うと、「そもそもフォントに色を付けるだけで改行する機能がつくタグを選ぶ方が不思議です。」となります。

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございました。

通報する

お礼日時：2013/04/13 19:13

No.3

回答者： ORUKA1951
回答日時：2013/04/06 08:42

スタイルシートを検証する

W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
に次のような注意書きがあります。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。』

　HTMLで文書構造をマークアップしたら、まず
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )のDATA入力
　⇒The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )
でチェックしてHTMLを直します。
★その後、その文書構造にしたがってスタイルシートを書いていきます。

<body>
a<p class="red">bcd</p>
</body>
だと、
A要素は行内要素ですからBODYには入ることは出来ません。
　BODY内には
　<ADDRESS> <BLOCKQUOTE> <DEL> <DIV> <DL> <FIELDSET> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HR> <INS> <NOSCRIPT> <OL> <P> <PRE> <SCRIPT> <TABLE> <UL>
　　( http://www.htmllint.net/html-lint/tagslist.cgi?H … )
　しか入りません。

　またPは
P要素は、1つの段落を表し、P要素自体を含め、ブロックレベル要素を内容とすることはできない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　ですから、absdと表示したいということは、ひとつの段落なのでしょうから
<p>a<strong>bcd</strong></p>
　とかになります。

★class="red" なんて決して書きません。←文法エラーにはなりませんが、根本的に誤っています。

[例文]上記をHTMLでマークアップすると
<p>
　　<strong>class="red" なんて決して書きません。</strong>←文法エラーにはなりませんが、根本的に<em>誤っています。</em>
</p>
　という風に、フレージング要素でマークアップします。
　⇒9.2.1 フレーズ要素: EM、 STRONG、DFN、CODE、SAMP、 KBD、VAR、CITE、ABBR、及び ACRONYM要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　これで足りないときは、idやclass名をつけます。

<p>
　　<strong>class="red" なんて決して書きません。</strong>←<span class="memo">文法エラーにはなりませんが、</span>根本的に<em>誤っています。</em>
</p>

　とdivやspanは他に適当な要素がないときにclass名(id)と併用して文書構造を補完します。(注)デザインのために書くのではない。

　文法間違いがないかをチェックします。(文法チェックは内容とタグの正当性はチェックできません)
　そしたらスタイルシートで

p{text-indent:1em;}
p strong{color:red;}
p span.memo{text-decoration:underline;}
のように指定していきます。

★いずれにしてもスタイルシートでデザインしようとしたら、ちゃんとしたHTMLが書けない事には不可能です。
　まずHTMLをしっかり身につけましょう。厳しいですが、それが一番の早道で楽です。