【シーエスエス:CSS】
Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、HTMLやXMLなどで書かれた文書をどのように修飾や表示させるかを指示することが出来るコンピュータ向けの言語を指します。
見た目を装飾するということと、文書の構造を作るという作業を分離するためにW3Cで定められたスタイルシートというしくみの中の仕様の一つで、現在Web上ではもっとも多く使われているため、一般的に、スタイルシートと言えばこのCSSを指すことがほとんどです。
CSSはHTMLとは分離しているため、下記のような特徴を持ちます。
- 同じHTMLでもメディアなどに合わせて見せ方を変えられる
- ユーザー、ブラウザ、サイト制作者それぞれが決めたデザインを重ねることが出来る
上記の中でもメディアによって見せ方を変えることが出来る点ではユーザーの画面のサイズによって最適な見せ方が出来るため、レスポンシブウェブデザインなどを作る際に役立ちます。
記述方法
CSSは次のような要素を持っており、その組み合わせで表示方法を指示していきます。
プロパティ : 値;
}
どのタグについての記述なのかを表します。このセレクタではidやclassといった属性も指定することが出来るため、同じタグにも複数の設定を使い分けることができます。
どのようなデザインを行うのか、指示を出すことができます。例えば文字のサイズ、色、背景色などです。このプロパティには様々な内容が用意されており、この組み合わせでデザインを作り上げていきます。
一つのセレクタ内でプロパティは複数指定することが出来ます。
プロパティの内容をどの程度反映させるのか、どのように反映させるのかの実際の数値などが入ります。例えば背景であればどんな色なのか、文字ならどの大きさなのかなど、具体的な数値が入っていきます。
CSSを実際のHTMLに適応させるには、複数の方法が存在していますが、読み込み速度に違いが出るため場所によって使い分けることをGoogleは推奨しています。
SEOとの関係
CSSはサイト装飾用の言語のため、実際にHTMLに書かれている記述の表示や非表示も自由に指定が出来ます。HTMLに存在するテキストを隠す行為はGoogleのガイドに反する行為のため、CSSでのデザインをする際には気を付けなければいけません。
また、Googleが推奨しているスマホサイトのレスポンシブウェブデザインはこのCSSを駆使したサイト構成です。今後SEOを行っていく上で知っておいて損のない知識がCSSとなります。