CSSファイル
CSSとは、
HTMLファイルで作られた骨組みを装飾するもの。
要素の高さや大きさ、背景色、並び方、テキストの色やフォント、アニメーションなどを設定できる。
HTMLの文章にCSSを適用するためには、まずcssを記入するファイルを作成する必要がある。
続いて、test.htmlにstyle.cssを読み込みます。
そのためには、htmlの <head> タグ内に <link>というタグを設置します。linkタグのrel属性にstylesheetを、href属性に読み込みたいファイルの名前を書くことで、そのhtmlにCSSを読み込むことができます。
test.htmlにスタイルシート（style.css）を書き込む
test.htmlの <head> タグ内に書きましょう。
test.html
1 2 3 |
<head>
<link rel="stylesheet" href="style.css">
</head>
|
このコードはCSSを読み込むためのコードという認識で大丈夫。
セレクタの理解
CSSを使ってHTML文章を装飾していく上で基本になるのは、「セレクタ」。
セレクタは「CSSを適用したいhtml要素を選択するため」のもの。
・セレクタ
基本の形は「セレクタ { プロパティ: 値; }」となり、セレクタ構造を示すために{}を、プロパティの値を指定する場合は、 :を使い、値の最後には ;を書く。
・HTMLのpの文字色を赤に変えたい場合
CSSは、読みやすくするため以下のように段を組んで書くことが一般的。
その他のセレクタ
同じ要素が複数ある場合に、特定の要素にのみプロパティを適用したい場合は、
要素にidやclassといった属性値を付与し、その値で要素を特定する、という方法を取る。要素にアダ名をつけるようなイメージ。
・idセレクタ
HTMLの特定の要素にid属性をつけ、それを目印にして、スタイルを適用するもの。
id属性は、HTMLの文章の中でid名を一度のみ使うことができる。
HTMLではid="xxx"と書くことで、id名(xxx)をつけることができ、CSSでは、#xxxとシャープの後にid名を指定。
・classセレクタ
全てのhtmlタグにはclassという属性を付与することができる。これは、あるhtml要素に対してつける識別子。
class属性は、HTMLの文章の中で同じ名前で何度も使うことができる。
HTMLでは、class="xxx"(xxx)と書くが、
CSSでは、「.xxx」とピリオドの後にclass名を指定する。
基本的にはclassを利用する
特定の要素にスタイルを適用したい場合、基本的にはその要素にclassで名前をつけて、cssファイルでclassを指定して装飾。idを利用することが少ないのは、ある名前のidが1箇所でしか指定できないため。
よって、同じ指定をしたい要素が複数ある時に使い勝手が良くない。
classセレクタとidセレクタが必要な理由
このように、HTML中に数ある要素から選択したい要素を特定し、それぞれに対してCSSを当てるためにclassセレクタとidセレクタがある。
複数の要素に一括でCSSを当てたいときはclassセレクタを使い、全体の中で1つしかない要素であることを明示する場合はidを使う。
1 |
<p class="title">このサイトは、●●です。</p>
|
テキストを変化させるプロパティ
あるhtml要素の中に入っているテキストの文字色を変えるためにはcolorプロパティを利用する。
・colorプロパティ
文字の色はカラー名,hex,rgb,cmyk,rgbaなどで指定することができる。
一般的には、カラー名,hex,rgb,rgba。
指定したcolorプロパティは、その子要素まで適用される。
p要素の中身の文字を赤くする場合
1 2 3 |
p {
color: red;
}
|
ブラウザでtest.htmlを開きっぱなしの場合、リロードをする必要がある。
