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

2005年12月02日

スタイルシートについて

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

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

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

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

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

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

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

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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