HOME > オンラインマニュアル > ホームページ作成ガイド > CSS編 > スタイルシートの基礎知識

ホームページ作成ガイド



CSS編

スタイルシートの基礎知識

1. スタイルシートってなに?
 

スタイルシートとはHTML文書の表示結果(見ため)を調整する「仕組み」です。

スタイルシートには大きく分けて2種類あります。ひとつがW3C(注1)が中心となって策定し、現在標準とされているCSS(注2)で、もうひとつがJavaScriptで記述するJSSS(注3)です。

  • (注1)World Wide Web Consortium
  • (注2)Cascading Style Sheets
  • (注3)Java Script Style Sheets


2. スタイルシートの沿革は?
 

近年ますますWebページはデザイン重視の傾向が続いていますが、Webページを記述するHTMLは元々論理構造を記述するのには向いていますがデザインについては範囲外でした。
 そのためデザイン機能への要求に応えようとしたHTML3.0ドラフトは複雑になりすぎ、ついに使われることはなかったのです。

そこでHTML3.2より論理構造をHTML、デザインをCSS(Cascading Style Sheets)が受け持つことになったのです。そして、最初に策定されたCSS Lebel 1の策定から2年後に、さらに機能拡張されたCSS Lebel 2が策定され、現在主要なブラウザはこのCSSに対応するようになっています。


 

3. スタイルシートってなにができるの?
 
    ★フォント系★
    フォントファミリー、サイズ、太さ、斜体、スモールキャピタル、行幅

    ★色と背景効果系★
    前景色(文字色)、背景色、背景画像の調整

    ★テキスト属性系★
    単語間隔、文字間隔、下線など、垂直位置、水平位置揃え、大文字小文字、行頭インデント

    ★ボックス系★
    マージン・パディング、ボーダー(枠線)

    ★表示位置調整★
    表示の横幅・縦幅、フロートと回り込み、回り込みの解除

    ★その他の表示調整系★
    表示形式、空白の取り扱い、リストマークの調整

 CSS Level2ではそれに加えて次の機能が追加されています。

    表示位置の絶対的な指定
    自動生成文字(引用符や通し番号)
    印刷への対処
    TABLE
    ユーザーインターフェイス(カーソルやシステムカラーへの参照)
    音声再生


 

4. スタイルシートの書式は?
 

スタイルシートの書式は以下のとおりになります。

 
セレクタ{属性: 値;}

※"セレクタ{ 宣言 }" と記述している参考書もあります。

属性の後ろは ":"(半角コロン)、値の後ろは ";"(半角セミコロン)で区切り、属性・値の前後には"{ }" を記載します。


お問合せ

お問合せフォーム (365日24時間受付)

フリーダイヤル:0120-40-2610
(平日9:00~18:00)

サービスの特長

お申込み

ドメインチェック

重要なお知らせ

ご契約のお客さま

旧サービスご利用のお客さま

パートナー制度