CSSの基本-CSS-

css-thumbnail

CSS(Cascading Style Sheets)は、HTMLやXMLなどタグによって意味を持ったドキュメントをブラウザで見たときに、伝わりやすく表示したり、デザイン性の高い見栄えにするための「スタイル」を指定します。

CSS(スタイルシート)とは

CSSを設定することにより各ページのデザインを統一したり、デバイス別にスタイルを変更させ最適な表示をすることが可能になります。

CSSの記述方法

基本的な記述方法は、セレクタの後ろに「{」と「}」を記述し、その中にプロパティと値を「:(コロン)」で区切って指定します。コロンの前にプロパティ、後に値を記述します。
この、プロパティと値の1つのまとまりを「宣言」と言います。

宣言を複数指定する場合は値の後に「;(セミコロン)」を記述し、その後に次に指定したい宣言を記述します。

宣言が複数個ある場合、最終宣言のセミコロンは省略することができます。ですが、記述ミスなどの防止などを考えて最終宣言にもセミコロンは付けたほうがいいです。

CSSの基本記述

CSSの記述は「どこの何をどうにする」が基本です。

セレクタ
「どこの(何の)」を表す部分が「セレクタ」です。
スタイルを適用したい箇所を、HTMLの各要素やクラス名、idなどで指定します。
プロパティ
「何を」を表す部分が「プロパティ」です。
セレクタのどの項目(色、背景、サイズ、位置など)を変更するのかを指定します。
「どうにする(どのように)」を表す部分が「値」です。
プロパティで指定した箇所をどうに変更するのかを指定します。

見やすく記述するーヒント-

ホームページの運営を行っていくとCSSのコードが増えていき、後々編集するときに見づらい場合があります。後で編集することを考えてセレクタなどの後に改行や半角スペースを入れるとコードが読みやすくなります。

見やすくするために

半角スペースなどの入れ方はそれぞれの好みによりますので、自身で後々見やすいコーディングが最良です。複数人で編集する場合などは記述ルールを設定しておくといいです。

ベンダープレフィックス(接頭辞)について

新しいCSSやHTMLには実際に使用できるまで動作確認と改良を行う期間が必要になります。W3Cでは新しい仕様を「勧告(公式に発表)」するまでに「作業草案」「勧告候補」「勧告案」の段階を設けています。

草案段階の仕様を先行実施する場合や独自の拡張機能を実装する時に付ける、各ブラウザベンダーごとの識別子をベンダプレフィックス(接頭辞)といいます。

作業草案(WD【Working Draft】)
W3Cやワーキンググループといったコミュニティによるレビューがおこなわれる段階で、W3Cのグループにより発行された大まかな規格文書。
勧告候補(CR【Candidate Recommendation】)
規格文書の重要な部分が決まる段階で、実装も含めたレビューを実施して情報を収集し、内容が修正されます。
勧告案(PR【Proposed Recommendation】)
十分に修正が重ねられ品質的に問題ないレベルと認められた文書です。この段階では多くの修正はありませんが、もし修正が必要な場合は作業草案、勧告候補のレベルに差し戻されます。
勧告(Rec【Recommendation】)
規格策定の最終段階。この段階に進むまでにその規格は理論面と実用面で幅広いレビューとテストを受け、規格に携わる者から承認を受けた文書です。

基本的には、勧告によりプロパティは使用可能になります。
しかし、草案段階でも以下表のベンダープレフィックスを対象となるプロパティの前に記述することにより先行実装が可能になります。

ベンダープレフィックス記述

Internet Explorer -ms-
Firefox -moz-
Google Chrome -webkit-
Safari -webkit-
Opera -o-
iOS標準ブラウザ -webkit-
Android標準ブラウザ -webkit-

ベンダープレフィックスはあくまでも各社独自の拡張形式ですので、正式な仕様に沿っていない場合、対応していない場合もあります。

ベンダープレフィックスは「勧告候補」になった時点で外すことが推奨されています。

表示に影響しないコメントを付ける(コメントアウト)

CSSでは、「/*」と「*/」の間に記述した内容はコメントになり実際の表示に影響を与えません。

コメントアウトの記述

コメントを記述することにより、修正箇所を特定する目印になったり、注釈やメモ書き残すことで後々の作業を効率的にします。後で適用するプロパティを無効にしておくこともできます。

CSSの適用方法

HTMLドキュメントにCSSで指定したスタイルを適用するには3つの方法があります。

外部のCSSファイルをHTMLドキュメントで読み込む(link要素を使う)

複数のHTMLドキュメントに同じCSSファイルを適用したい場合などデザインを容易に統一できます。

外部ファイルを適用

link要素はHTML内のheadタグ内に記述します。

CSSを読み込む場合、relは「stylesheet」になります。

この場合は、<link>を記述した全てのページにスタイルが適用されます。

HTML4.01、XHTML1.0で外部ファイルを読み込む場合ーヒント-

HTML4.01やXHTML1.0でファイルを読み込む場合はtype属性(type=”text/css”)の指定が必要です。また、XHTMLでは「/>」で最後を閉じてください。

CSSファイル内に別のCSSファイルを読み込む(@importを使う)ーヒント-

ファイルが大きくなりすぎで分割した場合や、複数のCSSファイルを読み込みたい場合には、@importを使用するとスッキリさせることができます。

importの記述

記述パターン1、2どちらの形式でも有効になりますので、記述しやすい方法を使用してください。

importを指定するには、文字コードを指定する@charset以外の@(アットマーク)より前に宣言、セレクタ宣言より前に記述するというルールがありますので注意してください。

HTMLドキュメントのhead内に記述する(style要素を使う)

個別のページにのみスタイルを指定したい場合は、対象のHTMLドキュメントのhead内に<style>タグを利用して記述します。

個別ページに適用

この場合は、記述したページ内のみスタイルが適用されます。

個別のタグごとに記述する(style要素を使う)

記述したタグ1つだけにスタイルを指定したい場合は、対象の要素に対してstyle属性を記述します。

個別要素に適用

この場合は、指定した要素のみにスタイルが適用されます。

CSSの基本関連記事