2022/02/23 学習開始!

HTML・CSS基礎⑦CSS基礎

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基礎

ブログランキング・にほんブログ村へ

この記事を書いた人
あいざわ

劇場を作ることを人生の目標に、プログラミング学習をはじめたデザイナー。

●学習したことをノート替わりにまとめたり
●学習ロードマップ・学習方法
●個人開発アプリの開発記録

などを残していきます。

あいざわをフォローする
HTML / CSS学習ログ
スポンサーリンク
あいざわをフォローする
スポンサーリンク
LOGBLO.
タイトルとURLをコピーしました