hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

CSSファイル

CSSとは、

HTMLファイルで作られた骨組みを装飾するもの。

要素の高さや大きさ、背景色、並び方、テキストの色やフォント、アニメーションなどを設定できる。

 

HTMLの文章に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は、読みやすくするため以下のように段を組んで書くことが一般的。

 

その他のセレクタ

同じ要素が複数ある場合に、特定の要素にのみプロパティを適用したい場合は、

要素にidclassといった属性値を付与し、その値で要素を特定する、という方法を取る。要素にアダ名をつけるようなイメージ。

・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を開きっぱなしの場合、リロードをする必要がある。