アジェンダ

• 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）