カテゴリー

キーワード

 
> 【CSS】CSSとは? カスケー...

【CSS】CSSとは? カスケーディング・スタイル・シートって? CSSの基礎知識を紹介します


2015 年 3 月 25 日 投稿    view: 6853
タグ:
このエントリーをはてなブックマークに追加

CSS 基礎知識

こんにちは、WEBマーケティング部の杉尾です。


今日から新たにCSSについても記事を書いていこうと思います。


よろしくお願いします。



そもそもCSSって?

CSSは(Cascading Style Sheets、カスケーディング・スタイル・シート)の略です。
文書のスタイルを指定するスタイルシート言語の一つです。


HTMLやXHTMLなどで作成されるWebページにスタイルを適用するために使います。


ちょっとトリビア

カスケーディング(cascading)は、カスケード(cascade)の活用形です。
カスケードは和訳すると『階段上に連続する滝』となります。
それがなぜスタイルに関係してくるか、すぐにはピンとこないかもしれません。


ですが、CSSの構造がわかると腑に落ちると思います。
CSSは上方で指定されたスタイルが下方に引き継がれ、最終的に文書へたどり着いて適用されるという『流れ』をとります。
『外部CSS』、『HTMLのhead内』、『HTMLタグへのスタイル』を段階として捉えるということですね。
これが『階段上に連続する滝』のように捉えられて、『カスケーディング・スタイル・シート』の語源となったようです。


なぜCSSを使うの?

文書を構成する要素と、装飾を示す要素を分けるためです。


HTML4.01以前は、HTMLそれ自体に文書構造を示す要素と、見た目(スタイル)を示す要素が混在していました。


それを排して、HTML4.01からはHTMLを『文書構造を示すためのもの』と再定義し、スタイル部分と分けるためにCSSが考案されたという経緯があります。


CSSはバージョンがあるの?

現在、CSSは、CSS2.1を元にCSS3の各モジュールが個別にW3Cによって勧告されていっています。


モジュールというのは『まとまりのある機能を持った部品』という意味です。


何を言っているか、ちょっとわかりませんよね?(笑)


くだけた表現で言うと、


基本CSS2.1で、CSS3も使えるようになってきているよ


というところでしょうか。


CSS3のどれが使えてどれが使えないかというのはブラウザによっても違ってきますので、詳しくは次回以降の記事で説明いたします。


CSSを使うメリット

文書構造とスタイルを分割することで、別々に管理することができます。
それによりいくつかのメリットが生まれます。


メンテナンス性の良さ

CSSを使えば、スタイルを一括変更することができます。


例えば、一つのページにボタンがいくつもあったとします。
HTMLタグに直接スタイルをつけていたら個別に書き換える必要があります。


それに対して、CSSを使っていれば一括で変更することができます。
(※全てのボタンに同じセレクタをつけている場合)


また、一つのCSSを複数のHTMLファイルに適用することができるので、サイト全体のスタイル変更も容易にできます。


メディアごとのスタイル指定

PC、タブレット端末、スマートフォン、音声、点字などさまざまなメディアに対応するようスタイルシートを分けることができます。


SEO効果が見込める

検索エンジンは正しいマークアップで作られたページを優先的に上位に表示します。


CSSを使えばHTMLタグに、装飾に関係する要素をつける必要がなくなります。
HTMLに余分な記述がなくなることで、検索エンジンに正しく解釈されるようになります。


アクセシビリティの向上

前項で書いた通り余分な記述がなくなりますので、ページの表示が速くなります。
それによりユーザーに心地よく使ってもらえるようになります。


まとめ

今日は基礎編の第一回目ということで、CSSの基礎知識について説明しました。


次回は書き方の実例、外部スタイルシートの設定方法を紹介したいと思います。


最後までお読みいただき、ありがとうございました。


【追記】書きました
【CSS】CSSの書き方と外部スタイルシート設定方法を紹介します
 

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事