フォントの設定について

[新着] Webテンプレートを仮オープンしました

0   名前： ぽこ ： 2007/04/13（金） 10:56  ID:SovtkRzg sub-t1
はじめまして、最近スタイルシートを利用し始めた者です。
さっそく質問ですが、


あいう<font color="red">え</font>お


少し分かりにくいかと思いますが、上のHTMLタグのように
一部の色だけをスタイルシートで指定する場合はどう記述すればよろしいでしょうか。

h1 { color: red;} 　や　p { color: red;} 　では
一行分まとめて色が変わってしまうので、今回質問させていただきました。


よろしくお願いいたします。
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/04/13（金） 10:56  ［URL］  ID:O5hEMlpW sub-r2
何故変えたいかによります。

例えば「え」を赤くすることで「強調」したいのであれば

html:
あいう<em>え</em>お

css:
em{
	color: red;
	font-style: normal;
}

とします。
2   名前： ぽこ ： 2007/04/13（金） 10:56  ID:SovtkRzg sub-t1
迅速な返答ありがとうございます。

＞何故変えたいかによります。

色だけの変更に限らずなんですが、例えば

<html><head>
<style type="text/css">
<!--
p {color:#ff6600;font-weight:bold;}
-->
</style>
</head><body>

<p>見出し</p>

コメント

</body></html>

と書き込むと、当たり前なんですが「見出し」の次は改行されて、
「コメント」は2行目に行ってしまいます。
「見出し」に続けて「コメント」を表示させたかったんです。
セレクタが改行させる種類だからと思うのですが、「p」と「h」系しか調べて分からなかったので…。


ですが、カヅサツ様のアドバイスのように、<em>を使うと希望通りに表示されました。
ありがとうございます。

ただ、書体がイタリックのように斜めになってるのが少し気になります。
3   名前： 匿名 ： 2007/04/13（金） 10:56  ID:PSeYBuuf sub-gw
そういう場合は普通はspanを使うのでは。
http://www.tagindex.com/html_tag/text_font/span.html
4   名前： ぽこ ： 2007/04/13（金） 10:56  ID:SovtkRzg sub-t1
spanは「マウスを当てて説明文を出す」くらいしか
使い道がないものと思っていたので、正直盲点でした…！

おかげ様で自分の納得できるものができました、重ねてお礼申し上げます。
5   名前： 匿名 ： 2007/04/13（金） 10:56  ID:5vHRQeeI sub-Cz
おそらく、HTML を根本的に誤解しているようなので補足。

> <p>見出し</p>

p 要素というのは paragraph、つまり段落。見出しを <p>..</p> で囲むことは、ありえない。段落の後なんだから、改行があってもおかしくないでしょ？

見出しを表す要素は、h1 要素（heading Level 1、大見出し）、h2 要素（heading Level 2、中見出し）など。見出しの後なんだから、改行があってもおかしくないでしょ？

そして、『コメント』に何のタグもついてないが、これこそ段落（p 要素、<p>..</p>）にすべきでしょ。

部分的に強調したければ、em 要素（emphasis）や strong 要素にする。

こうやって、文章に意味付けをしていくのが HTML の役割。そして「見出し（h1、h2）」「段落（p）」「強調（em、strong）」を、どうやって表現するかがスタイルシートの役割。

だから、まず HTML をきちんと書こう。
http://www.kanzaki.com/docs/html/lesson1.html
http://www.asahi-net.or.jp/%7Esd5a-ucd/www/

# なお、span 要素は文章に何の意味付けもしない。そうそう多用すべきものじゃない。
6   名前： カヅサツ ◆ThCi95HEzw ： 2007/04/13（金） 10:56  ［URL］  ID:O5hEMlpW sub-r2
>>2
> 書体がイタリックのように斜めになってるのが少し気になります。

いやそのための font-style: normal; なんやけど。

> 「見出し」に続けて「コメント」を表示させたかったんです。

まずマークアップを始めます。
見出し

コメント

文章の最初の見出しであれば、h1要素が適当でしょう。「コメント」は普通に段落として p要素にします。
<h1>見出し</h1>

<p>コメント</p>

さて、多くのブラウザでは、h1要素やp要素などの前後を改行することで、「文書ブロック」であることを表現しようとします。この見た目を変えてあげれば良いのですが、単純に h1要素と p要素の見た目を変えてしまうと、すべての h1要素を p要素が同じことになってしまうます。
このような特殊な見た目は一部のみでやりたいでしょうから、文書ブロックをグルーピングするための div要素で括り、該当のdivの中の h1要素と p要素だけの見た目を変えるなどの処置を取ると良いです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
.doraemon h1{
	display: inline;
	font-size: 100%;
	font-weight: normal;
}
.doraemon p{
	display: inline;
}
</style>
</head>
<body>
<div class="doraemon">
	<h1>見出し</h1>
	<p>コメント</p>
</div>
</body>
</html>


7   名前： ぽこ ： 2007/04/13（金） 10:56  ［URL］  ID:SovtkRzg sub-t1
＞いやそのための font-style: normal; なんやけど。

カヅサツ様申し訳ありません、こちらの記述ミスでした。


URL先に、粗雑ではありますが作ってみました。
見出し文の隣に小さく文字を入れたかったんです。
strongとemを使ってできたので、一応これでいいかなと思ったのですが。
8   名前： カヅサツ ◆ThCi95HEzw ： 2007/04/13（金） 10:56  ［URL］  ID:O5hEMlpW sub-r2
繰り返しますが、見出しはh1要素が良いでしょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>sample</title>
<style type="text/css">
body{
	color: #666666;
	font-size: 80%;
	margin-top: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 30px;
}
h1{
	font-weight: normal;
	color:#ff6600;
	font-size: 100%;
}
h1 em{
	font-size: 240%;
	font-style: normal;
}
</style>
</head>
<body>
<h1><em>見出し文</em> 見出しの補足説明</h1>
<p>コメント文(以下略)</p>
</body>
</html>
9   名前： ぽこ ： 2007/04/13（金） 10:56  ID:SovtkRzg sub-t1
なるほど、そういうまとめ方をすればよかったんですね。
丁寧なご指導、誠に感謝いたします。

カヅサツ様の教えてくださった方法で作りたいと思います。
他ご指摘くださった方ありがとうございました。
一覧へ戻る