掲示板/総合質問板/過去ログ/一覧/ スタイルシートについて詳しく

0 名前：京香： 2004/10/09 15:36: 初めまして。スタイルシートを使いたくてこちらを読んでいました。
過去の記事で、
http://www.tagindex.com/stylesheet/basic/pattern1.html
ここにたどり着き、やってみたのですが。。
まずはこれは一つのcssファイルを作れば他のページにも反映されて簡単。
ということですよね？
それで、私は文字の色、リンクの色、文字サイズ、スクロールバーなどを設定
したのですが・・まずはこのように設定しました。

<STYLE TYPE="text/css">

</STYLE>

分かりやすく色の指定は"white"で書きましたが実際は"#FFFFFF"で書き込んでいます。
この場合、バックのカラーは白、文字は赤、サイズは10ptでリンクは白、訪問した
リンクなどは黒、ですよね？
そこで反映されるhtml側の背景色や文字指定のタグは外し、このcssファイルで操作
しようとしたのですが・・

htmlの文字の前に<H1>と書かなければいけないのですね。全ての文字を統一した
いので一番頭に<H1>と書いて一番最後に</H1>と書きました。
ここまでは良かったのですが、サイズの方が全部に指定されません。

例えば

<A HREF="sample.html"><b>初めに</b></A><br>
最初に必ず読んで下さい。

このような場合、わざわざ「初めに」に<p>初めに</p>と書き、
「最初に必ず読んでください」にも<p>最初に必ず～</p>と書き込むのですか？
リンクはいちいち指定しなくても良いみたいですが、サイズや文字色の前には
いちいち<H1>や<p>を書き込むのですか？これって結構手間ですよね？
長くなりましたが話しは簡単なのです・・どなた様か助言お願いします。
<H1>

1 名前： h_naruaki ： 2004/10/09 15:46: タグが書かれていないときは、BODYが適用されるはずです。
また、<p>は段落などに使われるので、タイトル（小さな見出しも）は<H1>～</H6>
を使うと良いかと思います。

では。

2 名前：みや： 2004/10/09 17:08: 何だか、根本的な部分で勘違いしておられる気がします。

h_naruaki さんがお書きになっていますが、

・<body>...</body> は「本文」
・<h1>...<h1> は「大見出し」（Heading）
・<p>...</p> は「段落」（Paragraph）

を表すタグです。そして，

・本文（body）は白背景（background-color: white）に
・大見出し（h1）は赤字に（color: red）に
・段落（p）は小さな文字（font-size: 10pt）に

と、それぞれの文章要素をどう表現するか、というのがスタイルシートです。ですから、

> 一番頭に<H1>と書いて一番最後に</H1>と書きました
文章全体が見出し（h1）になるなんて普通はありえませんよね。

> <p>初めに</p>と書き
「初めに」というのは見出しであって、段落（p）ではないはずですよね。

HTML の「タグ」は装飾のためのものではなくて、それぞれに意味があるのです。そこを理解しないことには、スタイルシートを使いこなすことはできません。

有名どころですが、http://www.kanzaki.com/docs/htminfo.html や http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ などの一読をお勧めします。

3 名前：京香： 2004/10/09 18:52: htmlにもbodyはもちろん必要ですよね？
<p></p>はサイズを指定するのかと思って使っていました。
みやさんの書いて下さったサイトを必読しておきます。
ありがとうございます。
sample.cssのファイルをアップして、

スクロールバーの指定がしたいのですが下記のどの部分にいれるのがいいのでしょうか？
適当に入れると作動しませんでした。

<STYLE TYPE="text/css">

</STYLE>

ちなみに上のタグはsample.cssのファイルそのままです。
もしかして
<html>
<head>
<body>

</head>
</body>
</html>

っていらないですよね？！！cssファイルですよ？？

4 名前： h_naruaki ： 2004/10/09 19:04: >htmlにもbodyはもちろん必要ですよね？
あの、すいません。CSSのbodyはbody要素のスタイルを指定するためにあります。
ですから、htmlファイルの<body>～</body>の範囲のスタイルを設定しています。
CSSのBODYとHTMLのBODYはぜんぜん意味が違います。
><p></p>はサイズを指定するのかと思って使っていました。
Pは段落ですよ？自動的に改行が入りませんでしたか？

あと、CSSをHTMLに埋め込んでいるんですか？
おっしゃっていることからすると、外部ファイルにしているようですが・・・
ここをよく読んでみてください。
http://www.tagindex.com/stylesheet/basic/pattern.html

#一応自分で書いた質問は読み直しましょう。

5 名前： phpinfo() ： 2004/10/09 21:19 ［URL］: ＞P { font-size: 10pt; }

フォントサイズを固定してしまうのは望ましくありません。
相対値で指定しましょう。

6 名前： U D ： 2004/10/09 23:30: > <A HREF="sample.html"><b>初めに</b></A><br>
> 最初に必ず読んで下さい。

> このような場合、わざわざ「初めに」に<p>初めに</p>と書き、
> 「最初に必ず読んでください」にも<p>最初に必ず～</p>と書き込むのですか？

その必要があります。ただし<p>ではなく<span>を使いましょう。
すでに言われていますが、<p>だと改行が自動的に入ってしまいます。
文章中の一部を操作したい場合には<span>、ということになります。

> リンクはいちいち指定しなくても良いみたいですが、サイズや文字色の前には
> いちいち<H1>や<p>を書き込むのですか？これって結構手間ですよね？

リンクの場合、<A>～</A>の部分が指定した通りになりましたね。
逆に、何のタグにも囲われていない文字は通常通りです。
サイズや文字色を変更したければ、なんらかのタグを打つ、これは絶対です。
手間と言ってめんどくさがると、できなくなることが結構多い世界です。
そのうち慣れればそれでＯＫです。

(文字数オーバーのため次へ)

7 名前： U D ： 2004/10/09 23:30: (続き)

> タグが書かれていないときは、BODYが適用されるはずです。

これは何のタグにも囲われていない文字は、BODYに指定したスタイルが適応される、という意味です（よね？）。

> HTML の「タグ」は装飾のためのものではなくて、それぞれに意味があるのです。そこを理解しないことには、スタイルシートを使いこなすことはできません。

HTMLで「見出し」や「段落」といった意味を定義し、スタイルシートで「大きさ」や「色」などの装飾をする。
そのため近いうちにfontタグ等は無くなると聞きました。（豆知識）

> CSSのBODYとHTMLのBODYはぜんぜん意味が違います。

CSSの「BODY」は、HTMLの「BODY」タグで囲われているところを装飾します。(装飾に限らないとは思うが。)

> フォントサイズを固定してしまうのは望ましくありません。
> 相対値で指定しましょう。

固定してしまう⇒
　絶対値で指定する、つまりptなどの単位は、ブラウザなどにより大きさが変わってしまったりするので、
　見る人によってはとても小さくなったりするということです。
相対値⇒
　exなどの単位は、文字「x」の高さを1とする単位なので、極端に大きくなったり小さくなったりしません。
　emなどもそれです。

一気にたくさん言いましたが、とりあえず頑張りましょう。根気良く

8 名前： 通りすがり＾＾； ： 2004/10/10 04:25: BODY { background-color: white; }
H1 { color: red; font-size: 10pt;}
H2 { font-size: 10pt; }
A:link { color: white; }
A:visited { color: black; }
A:active { color: black; }
A:hover { color: black; }

*.CSSのファイル内は、↑だけでいいですよ。
<STYLE TYPE="text/css">
<!--
は、内部のスタイルシートをＨＴＭＬ内に記述するときに使用します。

ちなみにＨＴＭＬ内のＨＥＡＤタグ内に外部スタイルシートは、こう記述します。
HTMLとスタイルシートファイルが同じ所に（フォルダ内）にある場合の記述です。
フォルダが違う場合は、"フォルダ名/TEST.CSS" などと変えてください。
　　　　　　　　　　　↓
<link href="TEST.css" type="text/css" rel="styleSheet">

おそらく元記事を見るとフォントサイズとカラーが分かれてしまっているので
面倒だと思ったのでしょうか？答えになるか解りませんが
;(セミコロン）で区切る事により沢山のスタイルを指定できます。

【例】
H1 { color: red; font-size: 10pt;}
H2 { color: red; font-weight: lighter; font-size: 12px; line-height: 15px; border: double 3px #f00 }

このサイトに説明している部分が多分あると思いますので見てください。それでは、失礼します。

9 名前：京香： 2004/10/12 17:22: 数カ所お聞きしたいのですがフォントサイズを調べたところ、他のサイトでも
ptで解説されておりましたが好ましくないのですよね？
相対値と書かれていたので、そちらを調べましたがlarger、smallerと書かれてあり、
exは解説されていませんでした10ptの大きさに固定（一応全体的に）したいのですが、
それは10ptではなくてなんと書けばよいのでしょう？

文章で読んでいるとワケがわからなくなってくるので、直接スタイルシート
を見た方が私のはあっているようです。
今わかりやすいサイトを探しているので頑張って勉強します。。。

10 名前：京香： 2004/10/12 17:24: BODY { background-color: gray; }
A { text-decoration: none; }
H1 { color: red; }
P { color: green; }
.big { font-size: 15pt; }
.small { font-size: 8pt; }

私はこれだけでは何が何を指定しているのかサッパリわかりません。
A、H1、P、big smallが何を指定しているかなどの説明はどこにあるのでしょうか
＠＠

11 名前：京香： 2004/10/12 17:36: ちなみに8さんが教えてくれたスタイルシートを使ってみると
H1のredでは、赤の文字は無かったです。
本文のリンクとかではない、普通のテキスト文字色はどのタグが指定しているのですか？
一応調べて書き込みはしているのですが足りないのですかね。。

BODY { background-color: white; }
H1 { color: red; font-size: 10pt;}
H2 { font-size: 10pt; }
A:link { color: white; }
A:visited { color: black; }
A:active { color: black; }
A:hover { color: black; }

12 名前： U D ： 2004/10/12 19:22: まず最初に訂正。。。
> exなどの単位は、文字「x」の高さを1とする単位なので、極端に大きくなったり小さくなったりしません。
これ思いっきり間違えました。真逆です。ハイ。
正しくは、フォントやブラウザによって大きさが変わったりするので、あまりよくありません。
～参考～
http://www.tagindex.com/stylesheet/basic/length.html

では本題。。。
>>10
BODY { background-color: gray; }
これは、通常BODYの"タグ"の方で指定する背景色を、gray、灰色に指定しています。

A { text-decoration: none; }
Aタグで囲まれている文字の装飾（上線、抹消線…など）装飾を指定しています。noneなので装飾なしです。

H1 { color: red; }
P { color: green; }
H1タグで囲まれている文字を、赤色にします。そのまんまです、ハイ。Pも同様です、ハイ。

.big { font-size: 15pt; }
.small { font-size: 8pt; }
これだけではどこにも影響しません。
　<P class="big">この文字列が15ptになる</P>
　<P class="small">この文字列が8ptになる</P>
のように、classで、タグの方に指定します。

･･･どうでしょうか？いったん切って次に行きます。

13 名前： U D ： 2004/10/12 19:22: では、>>11。

> H1のredでは、赤の文字は無かったです。
H1タグで囲んだはずの文字が赤くなかったのですか？
あるいは、H1タグで囲んだ文字がないのでそうなったのでは？

> 普通のテキスト文字色はどのタグが指定しているのですか？
普通のテキスト…それは「こういうの」ですか？
～
<body>

「こういうの」

<P>テスト＿＿＿</P>
</body>
～
それなら、
BODY{color:色;}
で出来ます。特にスタイルを指定していないの(テスト＿＿＿とか)も全部反映されますがね。
>>1でh_narukaiさんが言ってますが、それとは違うのでしょうか？

それと、スクロールバーの指定についてですが、
http://www.tagindex.com/stylesheet/page/scrollbar_color.html
も読みましたか？
読んでいて出来なかったのだったら、どうやって出来なかったのか、その内容を詳しく教えて下さい。

14 名前： むむりく ： 2004/10/13 03:07: U Dさん、お疲れ様です。

一つだけ。
A:active と、A:hover の位置は逆でお願いします。

15 名前：京香： 2004/10/16 18:38: ありがとうございます！
UDさんのレスはすごく分かりやすくて、それと一緒に調べたりしてやったら出来ました！！
むむりくさんに言われたところも直しました！！

私の間違っていたのは・・・
まずcssファイルをhtmlファイルに適用させるように

<LINK REL="stylesheet" TYPE="text/css" HREF="sample.css">

これを埋め込んでいたのに、まだhtmlファイルに

<BODY BGCOLOR="white" TEXT="gray" LINK="gray" ALINK="gray" VLINK="gray">

これが残っていました。これらを消すと、ちゃんと反映されました。
消さないと反映されないのですね。。。
そして、BODY{color:色;}これかのタグも、前に一つ一つbodyをつけないとダメなのですね。
上に一つつければいいのだと思って、後のタグには{bgcolor:色;}だけにしていました。
これをbody{color: 色 ;}body{bgcolor:色;}これに直すと出来ました。
あとスクロールバーのタグを一番下に書いていたのですが、
body{color:色;}などよりも前（つまり一番頭）に書いたら反映されました。

ありがとうございました。
これで反映されたのですが、良かったんですよね？・・

16 名前： むむりく ： 2004/10/17 03:15: body{bgcolor:色;} → body { background-color: 色; } です。
（半角の空白はあってもなくても構いません。見やすいので、入れました）

> そして、BODY{color:色;}これかのタグも、前に一つ一つbodyをつけないとダメなのですね。
body{color: 色;}body{background-color:色;}
の場合、
body {
color: 色;
background-color: 色;
}
とまとめて書くことができます。
body { color: 色; background-color: 色; } でもOK。

で、タグではなく、それぞれ、
セレクタ { プロパティ: 値; }
と呼ばれます。

17 名前：京香： 2004/10/19 18:03: タグっていうのは何のことをさしているのでしょう？
かなり初歩的・・わたしはそういう英語の文字を全てタグだと思っていました。
勉強になりました！ありがとうございます！
さっそくまとめて書いてみます！