CSSとは
Cascading Style Sheet(カスケーティングスタイルシート)の略。
HTMLに対して色、大きさ、配置などを指定してページをデザインするための言語で、どこの、何を、どうするかを指定できる。
概要 : ホームページ＝HTML(構造的な文書)+ CSS(見た目)
範囲：CSS3
仕様 :w3c という団体が策定している。
(caniuse.com:どの機能がどのブラウザに対応しているかを調べられるサイトが便利)
CSSを使うメリット
CSSで文書の見栄えを指定することで、文書構造とスタイルを分けて管理でき、様々なメリットが生まれる。
・文書構造を保ったままスタイルを指定できる
HTMLで文書のスタイルを指定してしまうと、文書構造が分からなくなる問題が起こってしまう。CSSを使うことで文書構造に影響を与えずにスタイルを指定できるようになる。
・メンテナンス性が向上する
HTMLでスタイルを指定する場合、見出しの色やサイズを変えようとすると、見出しが使用されている全ての箇所を変更する必要があるが、CSSではこうしたスタイルを一括で管理できる。
また、複数の文書でスタイルを共有できるため、格段にメンテナンス性が向上する。
・SEO効果やアクセシビリティ向上が期待できる
HTMLによるスタイルの指定をやめて情報を適切にマークアップすることで、検索エンジンに正しく解釈されるウェブページになる。
またCSSでスタイル指定することで、文書から余分なマークアップを排除して、スタイルに関する記述を一箇所にまとめ、ウェブページを軽量化することができる。
これらの改善で、多くの場合SEO効果やアクセシビリティ向上が期待できる。
・メディアごとにスタイル指定できる
CSSではPC,スマホなど様々なメディアごとに適用するスタイルを指定し、分けることができる。
メディアごとにスタイルを指定することで、それぞれのメディアに合ったスタイルでウェブページを表示させることができるようになる。
基本の記述方法
セレクタ { プロパティ : 値 ; }
セレクタ : スタイルを適用する対象(要素名)
プロパティ : スタイルの内容
h1 {
color: #000;
font-size:10px;
}
コメントの書き方
/∗から∗/で囲んだ範囲はコメントとなり、ブラウザには無視されるので。一時的にCSSを無効にしたり、CSSソース内にメモを残す際に使用する。
/*色を黒にして、フォントサイズを10pxにする*/
h1 {
color: #000;
font-size:10px;
}
HTMLにCSSを適用する
・<link>要素で外部CSSファイルを呼び出して適用する。
スタイルシートを記述したCSSファイルをHTMLファイルとは別に作成し、HTMLファイル内から呼び出す。
呼び出しには、HTML文書の<head>要素内に要素を記述して、外部CSSファイルを指定。
適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために、<head>要素のtype属性の値にはtext/cssを指定する。
スタイルの修正のしやすさなどを考慮すると、この方法でスタイルシートを設定するのがおすすめ。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="text/css" href="xxx.css"> <title></title> </head>
・要素にstyle属性を追加して局所的に適用する
要素にstyle属性を追加して、HTMLソース中に直接スタイル指定を記述する。 style属性によるスタイル指定をする場合には、 文書内で使用されるスタイルシートがCSSによるものであることをブラウザなどに知らせるために、 <head>要素内に<meta>要素を記述してスタイル言語の値にtext/cssを指定する。 多くの場合、この指定をしなくてもブラウザによって自動的に判断されますが、誤動作を避けるためにも記述したほうが○。
style属性によるスタイル指定は、部分的にスタイルを優先指定する際などには便利ですが、 HTMLソースが複雑になってスタイル管理が煩雑になりがち。効率の良いスタイル管理を目指す場合には、 CSS部分を外部ファイル化するのが一般的。
・<style>要素で文書単位に適用する
HTML文書の<style>要素内に<style>要素を記述し、文書単位にスタイルシートを設定する。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定する。
今回はここまで。
次回はセレクタについてまとめていきたいと思います^^