ここから本文です

cssを使って1文字だけ色を変えたいです。<h1>要素内に<p>は使えますか?

llx********さん

2013/6/804:39:20

cssを使って1文字だけ色を変えたいです。<h1>要素内に<p>は使えますか?

html

<h1>○○○<p id="xxx">●</p>○</h1>

css

h1 {
font-color: #000000
font-size: 160%
}
h1 p {
font-color: #FF0000
}

このやり方しか思いつかないんですが、大丈夫ですか?

閲覧数:
38,915
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

ven********さん

編集あり2013/6/819:02:52

おはやです♪

<h1> の中に <p> は使えないですね。
使えたとしても、
<p> はブロック要素なので、
色を変えるために1文字だけ囲ってしまうと、
囲った1文字だけで1つの「 ブロック(区画) 」となり、
前後で改行されてしまいます・ω・)o

行内の1部分だけスタイルを変えたいときは、
インライン要素の <span> タグを使います。
┌────────
| <h1>○○○<span id="xxx">●</span>○</h1>
└────────

この span に対して CSS を指定します。
文字色を変える CSS プロパティは
「font-color」ではなく「color」です。
┌────────
| h1 span{
| color: #ff0000;
| }
└────────

また、
ここの1文字だけの色をかえるのであれば、
<span> 要素の style 属性で直接指定するほうが
効率的だと思います゜▽^)o
┌────────
| <h1>
| ○○○<span style="color:#ff0000;">●</span>○
| </h1>
└────────

他にも同じように色を変える個所がある場合には、
class 名を付加して CSS を指定すると便利ですヽ(^▽^*
┌──[ HTML ]──────

| <h1>○○○<span class="red">●</span>○</h1>

├──[ CSS ]──────
| .red{
| color: #ff0000;
| }
└────────

質問した人からのコメント

2013/6/9 10:36:53

感謝 ありがとうございました。ほかのお二方もありがとうございました。m( __ __ )m

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

may********さん

2013/6/901:01:31

以下が正解です。

html

<h1>○○○<span class="red">●</span>○</h1>

css

h1 {
font-color: #000000
font-size: 160%
}
.red {
font-color: #FF0000
}

bak********さん

2013/6/810:02:48

pタグは段落の為のタグであって、
決して文章の一部分だけになにかを適用するためのタグではありません。
タグは正しく使いましょう。
こういう時はspanタグです。

divタグってありますよね。特に効果は無いけどcssを適用したりする特に使うタグです。
しかしあのタグはブロック要素なので、あれを使うと前後で改行が起こります。

しかしspanタグはインライン要素なので改行されません。
こういう時にピッタリと言うか、まさにこの時の為のタグです。

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる