【復習2】HTML &CSS 初級編

※画像は全てProgateより引用

CSSとは、HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語です。

CSSは、HTMLとは別のファイルに記述します。HTMLで用意した要素に対して、CSSを用いて「どこの」「何を」「どうする」かを指定する事が出来ます。下図の例では「h1要素の」「color（色を）」「red（赤）」にしています。（このときの対象（要素名）をセレクタ、変更項目をプロパティと言います）

【文字の色を変える】

文字の色を変えるにはcolorプロパティを使います。「color: #ff0000 ;」のように、16進数のカラーコードで色を指定します。カラーコードについて詳しく知る必要はありませんのでスルーでOKです。主要な色であれば、redなどのように指定することが出来ます。CSSを書くときの注意点ですが、図のようにインデント（字下げ）をし、CSSのプロパティの末尾にはコロン（:）、行末にはセミコロン（;）をつける必要があることに注意。

HTMLと同様にCSSファイルでもコメントを記述することが出来ます。CSSの場合は/* */で囲んだ行がコメントになります。（コメントはブラウザ上に表示されないので自分のメモ用として活用するための機能です）

【文字の大きさを変える】

文字の大きさを指定知るにはfont-sizeプロパティを用います。単位をpx（ピクセル）。

【文字の種類を変える】

font-familyプロパティを用いると、フォントの種類を指定することが出来ます。「font-familiy: フォント名;」とする事で、要素にそのフォントを適用出来ます。フォント名にスペースがある場合は、ダブルクォーテーションで囲む事みます。font-familiyには「明朝体」や「ゴシック体」など様々なフォントを指定することが出来ます。

【背景色を変える】

背景色を変えるにはbackground-colorプロパティを用います。色の指定の方法はcolorプロパティと同様です。

【横幅、高さを変える】

要素の横幅、高さを変更したいときには、それぞれwidthプロパティ、heightプロパティを用います。width、height共にpxで指定するのでpxを忘れないようにしましょう。

特定の要素にのみCSSを適用するには？？

<li>要素が複数ある場合に、下の図のようにCSSを指定すると、全てのリスト要素が赤くなってしまいます。では、1つのリスト要素だけを赤くするにはどうすればようでしょうか？

【タグに名前をつける】

要素にはclassを使って名前をつけることが出来ます。classをつけることにより、それぞれの要素を識別し、別々のCSSを適用することが出来ます。class名でCSSを指定する場合、先頭にドット「.」が必要な点に注意してください。（ただし、タグには必要ない）

複数のclassの要素に同じclassをつけた場合、それら全てに同じCSSが適用されます。

おさらい：classにCSSを指定する際に、先頭のドット（.）を忘れてしまうとCSSが適用されません。classの場合はドットが必要で、タグの場合は必要ないということをしっかりと覚えておきましょう。