- cssとは
- CSSとは、Cascading Style Sheetsの略で、WWWに関する標準化団体W3Cで標準化され、バージョンCSS1、CSS2が勧告されています。
- 目的
- 論理構造を記述するHTMLに対して、見た目を指示するスタイルシートを用いることにより、文章の構造と表示を分離するため。
- カスケーディング・スタイルシートの設定
- カスケーディング・スタイルシートの設定には３種類の方法があります。
- htmlファイルのheadタグ内にスタイル設定
head要素の中に style要素を加えてスタイルを記述すると、そのHTML文書の全体を通して共通のスタイルを設定することができます。複数のスタイルを同時に設定できます。
【 例：htmlファイルのheadタグ内にスタイル設定 】
<head>
<style type="text/css">
<!--
body{
font-size:9pt;
font-family:monospace;
font-weight:100;
color:#000000;
background-color:#ffffff;
}
-->
</style>
</head>
html 5の場合
<head>
<style>
/* cssをここに記述します */
</style>
</head>
- 外部ファイルによるスタイル設定
もっとも汎用性が高いのは、外部ファイルにスタイルを記述し、それを取り込む方法です。スタイル定義ファイルは、前項で述べた「セレクタ」と「宣言」を必要なだけ列挙したテキストファイルで、CSSの場合は通常「.css」という拡張子をつけて保存します。
【 例：外部ファイルによるスタイル設定 】
<link rel="stylesheet" href="FileName.css" type="text/css" />
html 5の場合
<link rel="stylesheet" href="FileName.css" />
- インラインstyle属性
個々のタグに style属性としてスタイル情報を埋め込むことで、そのタグの範囲にスタイルを設定します。スタイルを適用する対象はタグによって明らかなので、style属性ではセレクタを用いず、宣言のみを記述します。
【 例：インラインstyle属性 】
<span style="font-weight:bold">太字</span>
- カスケーディング・スタイルシートの適用方法
- 「div」や「span」タグを用い適用させます。
「div」はスタイルコンテナの定義、「span」はインラインスタイル指定と、「div」や「span」自身は特に意味を持たないタグです（他には「p」「h」などのタグも使用されます）。
特定のHTML要素すべてに対してスタイルを適用するのではなく、一部だけに適用したい場合に使用します。
たとえば、divタグなどを用いて、「id」属性や「class」属性を記述して
<div id="要素" class="要素">〜</div> で囲まれた部分にスタイルシートを適用したりするのに用います。
- 属性「id」と「class」の役割と設定
- 「id」属性は、要素に名前を割り当てます。この名前は文書中で一意でなければなりません。
それに対して「class」属性は、ある要素について1つ以上のクラス名を割り当て、この要素が当該クラス/クラス群に属することが示され得る。
すなわち、一意の名前と要素の分類、これがclassとidの違いです。
簡単に言うと、classは何度も利用する属性として使いまわしします。
idは固有の属性とし、同一html内で一度しか使いません。
- コメント
- カスケーディング・スタイルシートのコメントは「/*」で始まり、「*/」で終わります。
【 例：コメント 】
/* コメント */
|