WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:スタイルシートのプロセス

デジ男 [WriteDate : Sun Jun 17 17:05:36 2001]

Web相談室と書いてあったので質問します!(^O^)
サイトのデザインを全てスタイルシートでやりたいんですけど。
リファレンスページなどを見てても、初心者が作成するうえでの
プロセス(順序、手順)がよくわかりません。
自分で作ってみたんですけど、同じ事があちこちに書いてあるような気がして。(^^;)

例えば、

body{text-align:center}
h1{text-align:center]
  color:#0000ff  
}
などです。

省略する書き方とかもあるみたいだし。
スタイルシートは後で管理がしやすくなると聞いた事があります。
でも今の状態だと管理しずらいです。
希望通りに表示されてれば、そういう事は気にしないほうがいいですか?
または、初心者はスタイルシートに手を出さないほうがいいのかな?(;;)
どなたか詳しい方がいらっしゃいましたら、
初心者が作成するうえでのアドバイスを教えて下さい!

# あと、HTML-lintのCSS版みたいなサイトってないのでしょうか?
御存知のかたがいたらお願いします!


qz [WriteDate : Sun Jun 17 18:07:29 2001]

あまり複雑なことをしようと考えるのがいけないのかもしれません。

>スタイルシートは後で管理がしやすくなると聞いた事があります。

とありますが、スタイルシート自体を管理するのではなくて、
HTMLの管理がしやすくなるということでしょう
HTMLに配色等の記述があった場合、夏だから、夏らしい背景にしたいな、
と考えた時に、10個のHTMLがあったら、10個のHTMLを全部かえなければいけなくなります。
でも、外部スタイルシートにしていた場合(それら10個が同じスタイルシートを使っていることが前提ね)
スタイルシートを変えるだけで、10個のHTMLの背景が変わってくれます。
その程度のものです。

># あと、HTML-lintのCSS版みたいなサイトってないのでしょうか?
>御存知のかたがいたらお願いします

http://jigsaw.w3.org/css-validator/

満点取るとバナーがもらえます。


安芸川晴海 [MAIL] [URL] [WriteDate : Sun Jun 17 20:59:21 2001]

CSSに関しては継承の概念を理解するとぐっと扱いやすく、効果的になります。
http://www.parkcity.ne.jp/~chaichan/src/cssmain.htm
を、そのあたりを中心に読んではどうでしょうか。


Katsukun [WriteDate : Sun Jun 17 23:13:34 2001]

↓ここが、参考になるかも。
http://www.cc-net.or.jp/~piro/tips/page/p0019.html


デジオ [WriteDate : Mon Jun 18 17:23:29 2001]

> あまり複雑なことをしようと考えるのがいけないのかもしれません。

確かにそれはあるかもしれません。少し反省、、、(^^;)
でも、スタイルシートを使用して作成すると、
どうしても色々な制約みたいなものが出てきますよね?
例えば、テーブルでレイアウトはするなとか、、、

だから、レイアウトなども、それに従ってやってるから、
細かい設定も色々出てきますし。
そうなると、最初の質問に書いた"例"の通り、あちこちに似たようなものを、
書いてしまってたりする訳です。(^^;)
それは、何度も表示を確認しながら、削っていくしかないのでしょうか?

また「では、もっと初心者レベルで、簡単・シンプルに作成すれば?」
という意見も出てきそうですけど、そうなるとあまりにもシンプル過ぎて、
飾り気のないページになってしまうのです。(; ;)

> スタイルシートを変えるだけで、10個のHTMLの背景が変わってくれます。
> その程度のものです。

「それら10個が同じスタイルシートを使っていることが前提」
ということなので、これは理解できます。
では、そうでない場合(それぞれのページが微妙に違う場合)は、
<link rel="stylesheet"  type="text/css" href="××.css">を
ページごとに何個も作成しなくてはならないということですか?(^^;)
それとも、その個ページの独自スタイルシートと、
サイト全体で使うスタイルシートと、2個同時に書くようですか?

> 満点取るとバナーがもらえます

エラーだらけでした(汗)
教えてくださり有難うございました。

安芸川さん>
もう一度そのページもよく読んでみましたが、僕が質問したことに
通じることが書いてありましたが、要は

h1,h2,h3,h4,h5,h6{ font-size: larger;
                  font-weight: bold }
h1{ text-align: center }
h2{ margin-left: 0em }
h3{ margin-left: 1em }
h4{ margin-left: 2em }
h5{ margin-left: 3em }
h6{ margin-left: 4em }

のように、似たような設定がある場合は、サイズとレイアウトを
別々に書けばいいのですよね?(^^;)
それと、スタイルシートを使う場合、あまり細かい設定はせずに
ある程度、まとまりをつけたほうがいいのかもしれませんね。
そうなると"シンプルで簡単に"ということになるのかもしれませんが。

Katsukunさん>
そのサイトは何度も見て、だいぶ参考にさせていただいてます。
「スタイルシート移行の手引き」というとこですよね?
ただ、まだ作成中になっており途中で終ってるので、
更新が待ち遠しいのですが、、、(^^;)

皆様、どうも有難うございました。


qz [WriteDate : Mon Jun 18 18:53:09 2001]

>でも、スタイルシートを使用して作成すると、
>どうしても色々な制約みたいなものが出てきますよね?
>例えば、テーブルでレイアウトはするなとか、、、

これは、別の話でしょう。
スタイルシートを使うなら、テーブルでレイアウトしては行けない、などという制約は、一切ありません。
このような制約があるのなら
「スタイルシートを使わないなら、テーブルでレイアウトをしてよい」
ということになってしまいます。
「テーブルでレイアウトはしないほうがよい」等の主張は、スタイルシートの話とは、別の話です。
きれいなレイアウト等をやりたいのであれば、手作業でやっている限り、管理が楽になるとは、ぼくには思えません。
管理を楽にしたいのであれば、素直に、専用のツールを使うのが一番でしょう^^

でも、まあ、一度つくってしまえば(スタイルを)その後は、楽できそうですけどね。
たくさんの種類のスタイルシートを作っておいて、そのあとは、文書の作成ときに、これは、このスタイルシートでいこう〜って、感じでいけますから。
作るまでが大変でしょうけど。

>ページごとに何個も作成しなくてはならないということですか?(^^;)
>それとも、その個ページの独自スタイルシートと、
>サイト全体で使うスタイルシートと、2個同時に書くようですか?

その方法もあるでしょうし、1個でやりたいのなら、class名やIDで、指定してあげる方法もあるでしょう。



けい [MAIL] [URL] [WriteDate : Tue Jun 19 12:26:51 2001]

>では、そうでない場合(それぞれのページが微妙に違う場合)
>はページごとに何個も作成しなくてはならないということですか?(^^;)

原則としてはそうなんですが……
基本的なスタイル指定の部分を抽出して common.css などと独立のファイルにしておき、他の各シートから common.css を @import で参照するようにすると、だいぶ無駄が少なくなると思います。


デジオ [WriteDate : Tue Jun 19 20:46:24 2001]

皆様、アドバイスありがとうございました。

> 基本的なスタイル指定の部分を抽出して
> common.css などと独立のファイルにしておき、
> 他の各シートから common.css を @import で
> 参照するようにすると、だいぶ無駄が少なくなると思います。

それは、これの一番最後に書けば良いのですか?(^^;
知識不足で、すみません。
<link rel="stylesheet"  type="text/css" href="××.css">


カヅサツ [MAIL] [URL] [WriteDate : Wed Jun 20 09:54:26 2001]

@import 命令は CSS 内で使います。

例えば、 common.css に

body{
   margin: 0px;
   padding: 10px 10%;
}

と記述し、さらに同じディレクトリ(フォルダ)にある diary.css で

@import url ("common.css");
body{
   background-color: #CCF;
}

と記述し、

<link rel="stylesheet" type="text/css" href="diary.css">

と呼び出せば、その HTML には

body{
   background-color: #CCF;
   margin: 0px;
   padding: 10px 10%;
}

が適用されます。

common.css にレイアウト情報を、
diary.css のように各ページに指定する CSS には配色情報を記述すると、
サイト全体のまとまりを保ちつつ、各ページのジャンル別に違う雰囲気を出す、
といったこともテクニックのヒトツです。

@import 命令は CSS 内のスタイルの指定より先に記述しなければなりません。
つまり、

body{
   background-color: #CCF;
}
@import url ("common.css");

などは不正です(この @import は無視されることが期待されます)。

あと、複数の LINK 要素や @inport による読み込みは、
あまり多量にやりすぎるとページが「重く」なるので気をつけてください
(サーバにもよりますが、2〜4くらいが限度だと思う)。


デジオ [WriteDate : Wed Jun 20 15:11:50 2001]

カヅサツさん、ありがとうございます!

> あと、複数の LINK 要素〜
> あまり多量にやりすぎるとページが「重く」なるので気をつけてください

この複数のリンク要素とは、
<link rel="stylesheet"  type="text/css" href="××.css">
などを、HTMLに複数書くという意味ですか?

> @inport による読み込み〜
> あまり多量にやりすぎるとページが「重く」なるので気をつけてください
>(サーバにもよりますが、2〜4くらいが限度だと思う)。

また、@inportもあまり多量にやると、ページが重くなると書いてありますが、
@import url ("common.css"); を書いたファイルを複数使用すると
重くなるという事ですか?

理解に要領を得なくてすみません。(A^^;)


カヅサツ [URL] [WriteDate : Wed Jun 20 18:08:32 2001]

> この複数のリンク要素とは、
> <link rel="stylesheet"  type="text/css" href="××.css">
> などを、HTMLに複数書くという意味ですか?

です。

あ、そうか、あの書き方では他の用途の LINK 要素まで重くなる要因とも取れますね。
申し訳ありません。

> また、@inportもあまり多量にやると、ページが重くなると書いてありますが、
> @import url ("common.css"); を書いたファイルを複数使用すると
> 重くなるという事ですか?

それもありますし、 一つの CSS に複数の @inport を記述すのも同様です。

要は、複数の画像を同時に大量に使いすぎると、完全に表示されるまで時間がかかる、
というのと同じリクツです。
ただ、画像は WIDTH や HEIGHT が適切に指定されていれば、
たいていは逐次表示されるので、それほどストレスではないこともありますが、
CSS は多くのブラウザではそれ読み込んでから表示を開始するようです。

ただ、繰り返しますがサーバの能力に負うところも大きいです。
これ以上は別の話題になってしまいますが。


デジオ [WriteDate : Wed Jun 20 21:16:33 2001]

カヅサツさん、皆様ありがとうございました!
色々と挑戦してみます!


回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World