TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～CSS第1の1回～

アジェンダ

• CSSとは
• CSSの書き方
  • CSSを書くのに必要な情報
  • CSSを記述する場所
• CSSの適応優先順位
• 用語
• CSSのバージョンについて

CSSとは

CSSとは、文書の見た目を決めるためのもの。

CSSの書き方

CSSを書くのに必要な情報

「どこの」「なにを」「どうするか」という3つの情報が必要になる。

CSSを記述する場所

• 使用率高 ： 外部のCSSファイルに記載する。
• 使用率中 ： HTMLファイルの、headタグの中(styleタグを使用する)
• 使用率低 ： HTMLファイルの、各タグの中(style属性を使用する)

外部ファイルに記載するメリット

CSSに変更を加える際、修正する箇所が少なく済むメリットがある。

外部ファイルに記載したCSSは、(基本的には)全てのWebページに反映される。
HTMLに記載した場合、そのWebページにしか反映されないので、全てのWebページのHTMLファイルに同じ内容を記載することになる。

CSSの適応優先順位

同じ箇所に複数のスタイルが指摘された際、最も優先順位の高いスタイルが適応される。
優先順位は以下のルールで決められる。

• !importantを付けたものが優先される。(※最優先)
• 後に書かれたものが優先される。
• セレクタの書き方

1. 要素を特定したidセレクタ(HTMLのタグとid属性を指定)
2. 要素を特定しないidセレクタ(id属性を指定)
3. 要素を特定したclassセレクタ(HTMLのタグとclass属性を指定)
4. 要素を特定しないclassセレクタ(class属性を指定)
5. タイプセレクタ(HTMLのタグを指定)
6. 全称セレクタ(*を使用して全体を指定)

• スタイルを指定する媒体

1. Webページ製作者が指定したCSS
2. Webページを閲覧するユーザが指定したCSS
3. Webブラウザ独自のCSS

用語

セレクタ

「どこの」を指定するためのもの。

プロパティ

「なにを」を指定するためのもの。

値

「どうする」を指定するためのもの。

CSSのバージョンについて

CSSの最新バージョンは、まだ策定中であっても、Webブラウザによっては先行搭載している機能もある。
先行搭載された機能を使用する場合は、プレフィックスを記述する必要がある。

おわりに

今回は、CSSの基礎知識についての内容だった。
まだわからない内容があるが、実際にCSSを書いたら理解できると思うので、とりあえず進む！

次回 >> ここ

参考

1-1 CSSとは何か？（はじめてのCSS）
1-2 CSSの書き方（はじめてのCSS）