掲示板/総合質問板/過去ログ/一覧/ cssを使っています

0 名前：かな： 2004/12/21 17:06: 初めまして。私はcssを使って、一括で指定先のフォントの色やスクロールバーの色
などを変えているのですが、フォントの色で<H1>を使うと、<br>を使わなくても改行
されます。例えば・・

<H1>あいうえお</H1>かきくけこ
<H1>さしすせそ</H1>たちつてと

と書くと、

あいうえお

かきくけこ

さしすせそ

たちつてと

などにかなり間が空きます。
私はその部分の色だけを変えたいのですが、H1以外に何かあるのでしょうか？
いちいち<font color=red></font>タグを使っていては結構辛いのです。
宜しくお願いします。

1 名前：文月： 2004/12/21 18:13 ［URL］: h1は見出し要素ですので、文字サイズや色を変更するためだけに
使うというのはおかしな使い方に思われます。
なぜ、h1を使おうと思われたのでしょうか？　
たまたま見たサンプルでh1を使っていたとか？

もしかしたら誤解しておいでかもしれませんが、
スタイルシートはh1にしか指定できないということはありません。
意味に沿った適切なタグ（段落であればp、引用であればblockquote、
強調であればstrongなど）を使い、その見栄えをスタイルシートで
制御してください。

今回の場合、単に色を変えたいだけであれば
<span>あいうえお</span>かきくけこ
として、span要素に色の設定をするのが良いのではないでしょうか。
また、強調するために色を変えるのなら、
<strong>あいうえお</strong>かきくけこ
や
<em>あいうえお</emかきくけこ
でもよさそうです。
ただしstrongは太字、emは斜体にするブラウザがほとんどですので、
太字や斜体にしたくないのであれば、font-styleやfont-weightの指定も
必要になってきますね。

2 名前：かな： 2004/12/23 22:54: 返信ありがとうございます。
そのSPANタグについてですが、検索をかけて調べたところ、
そのタグで囲ったところが全部色が変わるようになるのは分かるのですが、
どのように使用したらいいのでしょうか？
cssの中身は、

BODY { color: #FFFFFF ; }
BODY { background-color: #000000 ; }
H1 { color: 000000; font-size: 10pt; }
span { color: 000000 font-size: 10pt;}
A:link { color: #000000 ; }

こうなっていたとすれば、使い方がおかしいですか？
どのように書けばいいのでしょうか。すみません。宜しくお願いします。

3 名前： カヅサツ ： 2004/12/24 19:44 ［URL］: ええと、ですからテキストによります。ウェブページは、まずテキストを書き、次に HTML で意味を指定し、最後にスタイルシートで見栄えを整える、ということをご理解下さい。

----------
12月24日の日記

クリスマスイブだけど仕事でーす！土日も出勤でーす！
----------

最初の行が「大見出し」、次の行が「段落」ですから、それぞれ、h1要素とp要素でマークアップします。

----------
<h1>12月24日の日記</h1>

<p>クリスマスイブだけど仕事でーす！土日も出勤でーす！</p>
----------

次に、「クリスマスイブ」という単語と「土日」を「強調」したいとします。強調は em要素です。

----------
<h1>12月24日の日記</h1>

<p><em>クリスマスイブ</em>だけど仕事でーす！ <em>土日</em>も出勤でーす！</p>
----------

さて、多くのブラウザでは強調を斜体で表現しますが、これを普通の字体で、赤くしたい場合、スタイルシートで以下のようにします。

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

という塩梅で進んでいくと、大体以下のようなHTML文書ができあがります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>12月24日の日記</title>
<style type="text/css">
body{
color: #FFFFFF;
background-color: #000000;
}
h1{
text-align: center;
}
em{
color: red;
font-style: normal;
}
</style>
</head>
<body>
<h1>12月24日の日記</h1>
<p><em>クリスマスイブ</em>だけど仕事でーす！ <em>土日</em>も出勤でーす！</p>
</body>
</html>