CSS入門

CSS(Cascading Style Sheet ：スタイルシートと呼ばれます)はthmlの効果を統一的に修正するものです。htmlに対してトッピング的、ソース的な味付けをする機能です。タイトルの文字色や大きさなどを統一的に変更できます。
(*cascadは滝の意味で、情報の連続的伝達も表す)

webページの統一感を持たせるのには、htmlですとタイトルにはどの文字色を、本文にはこの文字色をなどと一つ一つ定義していく必要があります。一方、CSSだとその機能が不要になります。

参考にしたサイト：文系学生のためのHTML講座/CSS入門 07CSS基礎

CSSを含むhtmlの記載

実際に例を見ていきましょう。以下の例では<style></style>の部分がCSSです。

<head>

<title>CSSの基礎</title>

<style>

h1 {

color: firebrick;

}

</style>

</head>

CSSの基本要素

もう少し具体的に見てましょう。
ここでは以下のように対応しています。何を対象(セレクター選択されたもの)に、何を(プロパティー:特性)、どのように(値)するかを決めます。

h1 {

color: firebrick;

}

→

　セレクター{

プロパティー: 値

}

以上でセレクター(対象)とプロパティー(属性)と値(value)の関係がわかりましたか？

セレクターの拡張

CSSを書くことでhtml内の全てを変えてしまうことができますが、見出しによっては異なる形(スタイル)にしたいこともありますね。こうした時は、スタイルシートに名前をつけて分けることができます。以下のように1番目(first)、2番目(second)、3番目(third)という具合にしてidを設定していきます。このidは後で#+idでセレクター(対象)を指すことになります。

<ul>

<li id="first">外部スタイルシート</li>

<li id="second">内部スタイルシート</li>

<li id="third">インラインスタイル</li>

</ul>

Id属性をセレクターとして利用する場合は#をつけます。

#firstはfirstで定義されたidが対象(セレクター)になり、特性(プロパティー)をcolorとして値としてはfirebrickにするとなります。

#first {

color: firebrick;

}

#third {

color: royalblue;

}

これで、id="first"で指定されている"外部スタイルシート"を対象としてcolorが値firebrick色に変更できます。

idは個別にCSSを規定していましたが、グループとして登録するにはclassを利用します。

<ul>
<li class="A">外部スタイルシート</li>
<li class="A">内部スタイルシート</li>
<li class="B">インラインスタイル</li>
</ul>

この場合は、外部スタイルシートと内部すらいるシートは同じグループとしてCSSで処理できます。

idでは#を用いましたが、classでは"."を付与します。
#id → .A
ですね。これによりAで示されたものが対象(セレクター)として選ばれてプロパティーを特定の値に変更します。

.A {
color: firebrick;
}

CSSの記述場所

CSS の記述場所（記述方法）は次の 3 種類あります。
・外部スタイルシート（CSS ファイル）「.css」というファイル
・内部スタイルシート（style 要素）（これまでの記述)
・インラインスタイル（style 属性）

外部スタイルシートでは hrefを利用してファイル名を指定します。例えば「href="test.css"」この時、htmlファイルととcssファイルが同じホルダにある場合になります。
異なるホルダにある場合は、フォルダのパスを指定します。例えば一つ上の「cssfiles」というホルダにある場合は、「href=../cssfiles/h1color01.css」となります。(".."は相対バスの表示方法で、一つ上の階層(directory)に上がるということです。同様に、./は同じフォルダ内(directoryもしくはパス)にあることを示します。
<head>

<link href="CSSファイルまでのパスを含めたファイル名" rel="stylesheet">
<head>

具体的にこの記載をフォルダ形式で見てみましょう。

下の図では"hrev="に続く「CSSファイルまでのパスを含めたファイル名」の部分を説明しています。

インラインスタイルでは、htmlの記載の部分に直接cssを記載していきます。
<セレクター style="プロパティ: 値">

<h1 style="color: white; ">CSSとは</h1>
<h1 style="background-color: firebrick;">CSSとは</h1>
この例ではヘッダーh1の文字色と文字の背景色を規定しています。これらは一つにまとめて以下のようにすることも可能です。
<h1 style="color: white; background-color: firebrick;">CSSとは</h1>

後出しジャンケンが勝敗を決める

CSSの記載は上の３つの方法があります。じゃどれが強いのかというと最後に実行される文が残ります。つまり後出しジャンケンで最後に出した人が勝つ分けです。
実際にどうなっているのかは一度それぞれのところに異なる指示をしてどの指示が優先するかを確認して肌で感じるのが１番です。

ulのスタイル指定はliに継承されるが・・・

原則、ulで規定されたスタイルはliに継承されます。しかし、liで規定されるとその規定が活きます。つまり、ユニフォームを着て皆同じ色になっていても、上からベストを重ね着するとそのベストの色が出ます。

Page updated

Google Sites

Report abuse