強力CSSオンラインエディタたぬきのしっぽです。
公開中 http://style.yarea.net/

2005年12月02日

スタイルシートについて

先日からレイザーサーモンさんから質問を受けていてスタイルシートの基本的な説明が欠けているとかんじました。

そこでスタイルシートの概要だけでも説明したいと思います。

スタイルシート(別名CSS)はデザインを記述する言語です。ホームページのHTMLと一緒に使います。ページを記述するにはHTMLだけでもよいのですが、このスタイルシートを使用するとデザインを一括管理できます

ブログの記事のタイトルはこのフォントで、「日付の背景はこの色で、「左バーのブロック」の枠はこの色でという具合に決めていきます。上記の「タイトル」「日付」「左バーのブロック」などはページに複数ありますよね。それを一括で指定できるのがスタイルシートです。

上記の例でいう「タイトル」「日付」「左バーのブロック」などはHTMLとCSSを関連付けるキーワードなのでどちらのファイルにも指定しておかねばなりません。この関連付けるキーワードをセレクタといいます。例では分かりやすく「タイトル」「日付」「左バーのブロック」のように書きましたが通常このキーワード「セレクタ」は英数字で指定します。スタイルシートではこのセレクタに対してフォント、位置、色などのデザイン情報を書いていきます。

ブログ等の場合このセレクタが事前にHTMLの中に埋め込まれており、そのセレクタ名がどこに作用しているのかを知ることが必要です。当ツールの赤枠表示はそれを知るためのツールです。セレクタがどこに作用しているのかが分かれば、どこのデザインでも変更することができます。でも説明したとおりあるセレクタのデザインを変えたら、そのセレクタに関係する場所は全てデザインが変更になります。

分からないことがあればどんどん聞いてくださいね。

この記事へのコメント
セレクタとは何ぞや?と思っておりましたが、
ちょいとわかってきたような来ないような^^;
なかなか字を小さく出来なくて悪戦苦闘しておりますが、画像もなんとか入りました。
ま、2〜3日中にはりっぱなブログが完成?しているとでしょう(゚m゚;)
どうもありがとうございましたm(__)m
Posted by レイザーサーモン at 2005年12月02日 22:37
こんばんは〜 頻繁に利用させていただいておりますm(__)m
 
早速ですが、http://blog.livedoor.jp/kyujyotei
CSSエディタで起動したらセレクタ名が
出てきません。
コピー画面も文字等が大きく表示されます。
他のデザインなら大丈夫なのですが。
Posted by レイザーサーモン at 2005年12月29日 22:10
すみません。
出てきました^^;
Posted by サーモン at 2005年12月29日 22:12
初めまして
ブログを始めたばかりで何もわからなかったのですが、すごくわかりやすくて勉強になりました!
大変参考にさせていただきました!
ありがとうございました!
Posted by mizuki at 2011年06月24日 19:10
この前の件、これですね。チェックしてください。(´-ω-)◎ http://www.e29.mobi/
Posted by 名無し at 2012年03月17日 14:33
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/10099749

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。