Cascading Style SheetsCSS(スタイルシート)

CSSは正式にはカスケード・スタイル・シート、略してスタイルシートと言われています。

基本的にスタイルシートとは文章のデザインの設定をまとめたファイルで、ホームページ・ウェブサイトばかりでなく、ワープロのワードやエクセルような表計算ソフトにも使用されています。ホームページ・ウェブサイトで使われているスタイルシートはCSSが主流ですので、スタイルシート=CSSとして説明します。

ホームページ・ウェブサイトはHTML言語で制作されていますが、HTMLだけで記述すると見出しや文章などページ本来の構成内容よりも、レイアウトや文字の大きさ・色などのデザイン要素が多くなり、制作が複雑化するとともに、検索ロボットの読み込みも困難になります。

そこで、見出しや文章などページ本来の構成要素とレイアウトや文字の大きさ・色などのデザイン要素を分けて記述する方法が考え出されました。そのデザイン要素をまとめて記述したファイルがCSSです。

例えば、ある範囲を次のように表示させたいとします。
■フォントの大きさ20pix、文字色を白、背景を青


文字のスタイル


この設定をHTMLだけで記述すると次のようになります。
<font color="#FFFFFF" size="20" style="background-color:#0033CC">文字のスタイル</font>

これをCSSで設定すると次のような簡単な書き方になります。
<span class="ss">文字のスタイル</span>

CSSは文字の修飾の以外にも、ヘッダ・サイドバー・本文を表示する場所や範囲などのレイアウトを設定することもできます。


今後のCSS CSS3

ホームページ・ウェブサイトの標準を定める機関W3Cは次世代のCSSとしてCSS3を作成中です。
CSS3では背景色の角を丸くする角丸機能や、文字や画像の背景に影を付ける機能、グラデーションを背景にする機能など、今まで画像ファイルを使って実現してきた様々な表現が、スタイルの設定だけで表示できるようになります。また、今までフラッシュなどで表現していたアニメーション機能も簡単に作成できるなど、表現幅が非常に広がります。

ただ、CSS3の機能を取り入れたブラウザはクロームやサファリなどに限られており今すぐCSS3に移行することはできません。エクスプローラー9が普及するまでは現在のCSS2で充分だと思われます。


Webの基礎知識
■最新情報■
目標プロセス分析シート
( 2012.03.16)
ホームページを公開していると、サイトオーナーにはSEOコンサルタントやインター...

ico からのお知らせ (2)

最新ウェブNEWS (3)

ウェブ基本用語 (7)

ウェブの技術 (6)

ホームページ制作計画 (7)

ウェブデザイン (0)

ウェブビジネス (1)

SEO対策 (3)

このサイトの文章・画像その他の情報の著作権は「ico(アイ・シー・オー)」に属しています。 このページに掲載の文章や写真の無断転載を禁じます。
COPYRIGHTS (C) 2012 For internet communication office ALL RIGHTS RESERVED.