スタイルシート講座

■ はじめに

■ スタイルシートとは？

CSS（カスケーディング・スタイルシート)と呼ばれています。CSSはホームページの視覚表現（デザイン性のアップ）を指定する言語で、Web標準化とその推進を目的として活動しているW3Cという団体によって提唱されました。HTMLタグに慣れてきたら、ホームページのデザイン性をアップさせてみましょう。

■ スタイルシートの基礎

CSSはWebページの視覚表現を指定する言語であり、単にスタイルシートとも呼ばれます。CSSでは多種多様なスタイルを指定できるため、より正しく細かくデザインすることが実現できます。また、外部ファイル化によって複数のページに統一的なスタイルを適用して出力メディアを分岐処理してデバイスごとに最適なスタイルを適用することもできます。

１番簡単な方法として、＜span style="color: #0000ff;"＞青色です＜/span＞これで、簡単に文字が青色になったと思いますが「青色です」という文字がある度に毎回書くのは面倒なので、これをまとめて指定したいと思います。

例）
＜html＞
＜head＞
＜title＞スタイルシート＜/title＞
＜style type="text/css"＞
＜!--
h1 {color: #0000ff ;}
-->
＜/style＞
＜/head＞
＜body＞
＜h1＞青色です＜/h1＞
＜h1＞赤色です＜/h1＞
＜/body＞
＜/html＞

h1 {color: #0000ff; }　と指定してあるので、文字を＜h1＞〜＜/h1＞で囲んであげると「青です」も「赤です」も青色になります。h 1〜ｈ６要素やstrong要素は、Web標準に基づいた適切なマークアップになるので、SEO対策としても大切です。