HTMLでのフォーム作成についての記事はこちら
CSSとは
CSSとは、Webページの見た目を指定するための言語のこと。HTML要素の色や大きさ、背景色、位置などを、整えたり装飾したりします。
CSSファイルをHTMLファイルで読み込む
CSSの使い方には
- CSSファイルを作ってHTMLファイルで読み込む
- HTMLファイル内にstyleタグを記述する
- HTMLタグ内にstyle属性を記述する
上記、3つの使用方法がありますが、最も一般的な使用方法は、CSSファイルを作ってHTMLファイルで読み込むことです。
HTMLのheadタグ内にCSSファイルを読み込むコードを記述します。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
rel属性には読み込むファイルの種類を記述します。CSSを読み込む場合はstyleseetとします。
href属性には相対パスでCSSファイルを指定します。
CSSの書き方
セレクタ
スタイルを適用する対象のことで、HTMLの要素、class、idなどを指定します。
プロパティ
適用するスタイルの内容のことです。
様々なプロパティがありますが、すべて覚える必要はなく、必要なときにどのプロパティを使えばいいかを調べて使えばいいです。
値
スタイルの適用の仕方のこと。
colorプロパティであれば、redやblue。
font-sizeであれば、16pxや、1.5emなど。
プロパティは複数指定できる
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
コメントの書き方
コメントを書いてメモを残すことで、あとからコードを見たとき、わかりやすいようにします。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
セレクタとは
スタイルを適用する対象のことで、HTMLの要素、class、idなどを指定します。
要素名で指定
要素名でセレクタを指定すると、そのページの指定した要素すべてにCSSが適用される。
要素の一部だけにCSSを適用したい場合にはidとclassを指定する。
idとclass
idとclassはどちらも、要素に初めから貼り付けた付箋のようなものですが、
- id:一つの要素に個別のスタイルを持たせたいときに使用
- class:複数の要素に対して汎用性の高いスタイルを適用したいときに使用
という風に使い分けます。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
複数のセレクタを指定する
複数のセレクタに、同じスタイルを適用する際は、セレクタとセレクタの間を,で区切り記述します。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
HTMLの親・子・孫要素
ある要素を親としたとき、その中に入っている要素を子要素、子要素の中の要素を孫要素という。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
子孫要素にCSSを適用する
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
直下の要素の文字色だけを変える場合は、以下のように記述する。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
この場合、oya要素の文字、孫要素の文字は変わらず、oya要素の直下の要素である子要素の文字色のみ変わる。
今日の積み上げ
- CSS基礎