CSSとは

Cascading Style Sheet

の略です。

HTMLと一緒になってwebページを作る言語です。

HTMLは文章の構造や意味を表す

CSSは見た目を表す

CSSはどこに書くのか

大きく分けて3つのやり方があります。

1つは

head要素の中にスタイルシートを

外部ファイルとして指定する方法です。

書き方は

<link rel=”stylesheet” href=”mycss.css”>

になります。

 

2つ目は

styleタグを作って

直接のその中に書いていく方法です。

例えば

<style>

h1{color: red;}

</style>

になります。

 

3つ目の方法は

HTMLの要素にstyle属性をつけて

そこに直接書いてしまいます。

例えば

<body>

<h1>大見出し</h1>

<p style=”color:red”>こんにちは!</p>

</body>

になります。

 

外部ファイルに指定して書き出す方法では

拡張子を.cssにしておいて下さい。

文字コードは最近は

UTF-8なので、UTF-8で保存しておいて下さい。

 

保存したら、正しく表示されているか確認しておいて下さい。

CSSの中にコメントを書いておく方法

「/*」「*/」の間に書いた文章が

コメントになります。

↓↓

/* コメント */

複数行書きたい場合は

/*

コメント

コメント

コメント

*/

になります。

 

スタイルを規定する3つのセット

セレクタ

プロパティ

 

例えば

h1{color: red;}

の場合、

 

h1

はセレクタ

 

color:

はプロパティ

 

red;

は値

 

セレクタに対して

プロパティと値のセットを

複数指定していくことで、

スタイルを規定していきます。

 

セレクタに対して

プロパティと値のセットが

どこからどこまでというのは

波括弧{}で指定します。

 

プロパティと値の間は

コロン;で区切ります。

 

行の終わりは

セミコロン;をつけるようにします。

 

セレクタの指定の仕方

 

全ての要素に対する場合

「*」を利用します

HTMLの要素を指定したい場合

直接、要素を指定していけば、大丈夫です。

 

ID要素

class要素

複数の要素

があります。

 

例えば

メインです!

divタグだけにスタイルを適用したい場合

 

/* ID要素 */

#main{font-size:36px;}

#のあとにID名を書きます

 

class要素の場合

こんにちは!

/* class要素 */

.test{font-size: 9px;}

.で指定していきます。

 

IDは#

classは.

と覚えます。

 

複数の要素の場合

,区切りで指定すれば大丈夫です。

 

枠線をつけたい場合は以下のようにします。

/* 複数の要素 */

#main,.test{botder: 1px solid #csc;}