CSSとは
CSS とは、Cascading Style Sheets の頭文字をとったものです。
CSS を使うことで Web ページのデザインを設定することができます。 単純な例を挙げると、Web ページの背景色を設定したり、テキストの色を設定したりできます。
CSS は HTML ドキュメントの style 要素 の中、 または 要素の style 属性 の値として記述するか、 もしくは HTML ドキュメントのファイルとは別に CSS コード専用のファイルを作成して、 HTML ドキュメントのファイルから、そのファイルにリンクを掛けて読み込むようにします。 デザインファイルの拡張子には「.css」が使用され、「任意のファイル名.css」となります。
style とは
style (スタイル) とは、 style 要素 、 もしくは、 style 属性 のことをいっています。
どちらの style も CSS 記述方法に準じています。 違いを挙げるならば、style 要素で CSS を記述する場合には セレクターを使うところでしょう。 style 属性で CSS を記述する場合、その要素だけに特化したスタイル付けを行うのでセレクターは必要ありません。 このことについては、次のセクションでサンプルコードを用意しています。
CSS (style) の書式について
CSS の基本的な書き方は次の通りです。
ここでは、単一の div 要素にスタイル付けした例を掲載しています。
注意事項: コード中にはカラーを表す文字の右側にサンプルの色が表示されています。実際のコードとは関係ありませんのでご了承ください。
サンプルコード: style 要素に記述する場合
<style>
div{
background-color: ##lightblue;
color: ##green;
}
div{background-color: ##lightblue; color: ##green;}
</style>
- 01, 07: style (style 要素の開始と終了タグです。このタグの間に CSS を記述します。)
- 02-05: div{ CSS; } (コードを複数行に渡って記述した例です。設定項目が多い場合には視認しやすいですね。コードの先頭に記述している div の部分はセレクターと呼ばれ、スタイル付けをする対象の HTML 要素を選択するためのものです。)
- 03: background-color: lightblue; (background-color は背景色を設定するためのプロパティです。色はライトブルーを指定しています。)
- 04: color: green; (color は文字色を設定するためのプロパティです。色はグリーンを指定しています。)
- 06: div{ CSS; } (コードを一行に記述した例です。設定項目が多い場合には視認しにくくなります。設定項目が終わる度に 「 ; 」 セミコロンを忘れないようにしましょう。)
サンプルコード: CSS 専用ファイルに記述する場合
div{
background-color: ##lightblue;
color: ##green;
}
div{background-color: ##lightblue; color: ##green;}
- 説明: (これは、前の style 要素のサンプルコードと比較すると コードの先頭と末尾に style 要素のタグが無いだけですので説明は割愛します。このように別の CSS ファイルをインポートしてスタイル付けする場合は、CSS のコードだけを記述します。)
サンプルコード: style 属性に記述する場合
<body>
<div style="background-color: ##lightblue; color: ##green;"> これは div 要素です </div>
</body>
- 02: div style=" CSS " (div 要素に style 属性をつけて CSS を記述した例です。設定項目が終わる度に 「 ; 」 セミコロンを忘れないようにしましょう。)
以下は、実際のサンプル要素です。
CSS ファイルのインポート方法
要素にスタイル付けを行うには、下の図のように 4つの方法があります。 その中でも CSS ファイルを別に設けて、それをインポートする方法が 2つあります。
ここでは、HTML ドキュメントとは別の CSS ファイルがある場合に、それをインポートして利用する方法を掲載しています。 CSS ファイルをインポートするには、以下の方法があります。
- link 要素を使って CSS ファイルを読み込む
- style 要素内の @inport 使って CSSファイルを読み込む
下記のサンプルでは HTML ファイルと同じフォルダに 「 CSSファイル.css 」 がある場合を想定しています。
サンプルコード: link 要素を使って CSS ファイルを読み込む
<head>
<link rel="stylesheet" type="text/css" href="./CSSファイル.css">
</head>
<body>
<p> この要素は p 要素です。 </p>
</body>
- 02: link href="CSSファイル.css" (link 要素の href属性に CSS ファイルへのパスを記述します。)
サンプルコード: style 要素内の @inport 使って CSSファイルを読み込む
<head>
<style>
@import url(./CSSファイル.css);
</style>
</head>
<body>
<p> この要素は p 要素です。 </p>
</body>
- 03: @import url(./CSSファイル.css); (style 要素の中で @import を使って url 関数でファイルへのパスを記述します。)
サンプルコード: CSSファイル.css の内容
p{
color: ##green;
background-color: ##yellow;
}
この要素は p 要素です。この要素にサンプルコードの結果が反映されています。