|
スタイルシート1
-
スタイルシートとは
HTMLのレイアウトを分離して記述するためのものです。
今までは、見栄えのいいホームページを作ろうと思ったときに、TABLEタグ等をつかって、HTMLをいろいろと工夫して作っていました。
本来HTMLというものは、文章の構造を定義するものです。
いままで、HTLMで行っていたレイアウトを、スタイルシートを使用することで本来の文書構造だけにすることにより、レイアウトと構造を分離する事ができます。
こうすることで、一つのHTMLから、複数のデザインが簡単に作れるようになります。
今、流行っているblogも、このような形式になっているため簡単にデザインの変更ができるようになっています。
また、余計な記述が無くなることからコンピュータに理解しやすい形になりSEO的にも有利だといわれています。
スタイルシートを使う事のメリットをまとめると以下のようになります。
・サイト全体に共通したデザインを適用できる
・スタイルの一括管理でき、メンテナンスの効率が向上する
・スタイル専用の言語のため、HTMLより細かい設定できる
・HTMLが本来の構造だけの定義になるためすっきりしSEO対策にも効果的になる
-
CSSの書式
セレクタ { プロパティ : 値 }
セレクタ どの要素に対して適用するか。
プロパティ どのスタイルを適用するか。
値 どのように適用するか。
のように書きます。
h1{ font-size: 14px; }
上の例だと、h1タグのフォントサイズを14pxに指定しています。
コメントを書きたいときには /* */で囲みます。
/* コメント */
-
スタイルシートの適用方法
（１） 直接タグに記述する。
コードがわかりにくくなる為推奨しません。
ここでは、説明を省きます。
（２） ヘッダーの部分に記述する。
<head>
----省略----
<style type="text/css">
<!--
body{ color: #ff0000; }
h1{ font-size: 14px; }
-->
</style>
</head>
（３） スタイルシートファイル（xxxx.css）に記述しておき、link要素で適用する。
<link rel="stylesheet" type="text/css" href="xxxx.css" media="screen">
CSSのファイル名は任意です。通常はこの方法で行いましょう。
また、style要素中に@import文で取り込むことも出来ます。
@import url("ｘｘｘｘ.css") screen;
|
