トップ > スッキリかんたんスタイルシート


独自ドメインはこちら
プロパティの一覧
文字 色と背景 ボックス 配置 リスト いろいろ
font-family color border-width display list-style-type width,height,padding scrollbar
font-size background-color margin position list-style-image text-align,vertical-align cursor
font-weight background-image padding z-index list-style-position background page-break-before
font-style background-repeat border-style float border
font background-attachment border-color clear border-collapse
text-align background-position width overflow
vertical-align background height
line-height
letter-spacing
white-space

CSSの書式   

@ 「セレクタ」「プロパティ」「」の3つの組み合わせで定義する。
A 基本的な定義方法複数プロパティを定義する方法がある。
B コメントの記述の仕方

基本的な定義方法

h1要素の文字の色を赤に指定する。


複数プロパティを定義する方法

1つのセレクタに対して[;]セミコロンで区切って,定義する。
ここでは,文字の色を赤,文字の大きさを14pxに指定。


コメント

メモ代わりとして使うと便利です。
CSS定義を挟み込むことで,一時的にスタイルの設定を無効にすることもできます。


>>> 記述例・HTMLソース

CSSの設定方法   

CSSをHTML文書に定義する方法は3種類あります。

1.HTMLのheadタグ内にまとめて設定する

古いブラウザでStyle要素のソースが見えないように,コメントタグ<!-- -->とセットで記述する。

<style type="text/css">
<!--
h1 {color:blue;}
--></style>


2.HTMLのタグに直接設定する

一部の要素にだけCSSを使用したい場合に有効。

<h2 style="color:red;">赤!</h2>


3.外部のCSSファイルを読み込む

複数のHTMLファイルに対して,1つのCSSファイルでスタイルが設定できるので,デザインの統一や管理が効率的にできる。

HTMLのheadタグ内に下記リンクを書き込む。

<link rel="stylesheet" href="kihon001.css" type="text/css">


外部CSSの記述内容
body {background-color:#FFE6FF;}
p {font-size:12px;}


>>> 記述例・HTMLソース

セレクタの指定方法   

p要素やh1要素などのHTML要素に対して指定できる。class,idを要素に付加して要素内の特定の部分にスタイルを指定することもできる。

1.要素にスタイルを設定する

 (1)基本セレクタ

CSS--------------------------
h1 {color:#008000;}

HTML-------------------------
<h1>基本セレクタの適用</h1>


 (2)複数のセレクタ

,で区切って複数の要素を指定する。

CSS--------------------------
h2,h3 {color:#FF0000;}

HTML-------------------------
<h2>複数セレクタの適用</h2>
<h3>複数セレクタの適用</h3>


 (3)全称セレクタ

すべての要素を示す。

CSS--------------------------
* {background-color:#FEFCDA;}


2.任意の範囲にスタイルを設定する

 クラス名やID名では,最初の文字に数字やハイフンは使用できない。

 (1)クラスセレクタ

「.」から記述する。複数の要素に適用することができる。

CSS--------------------------
.abc {color:#ffffff;background-color:#000000;}

HTML-------------------------
<p class="abc">クラスセレクタの適用</p>


 (2)IDセレクタ

特定の1つの要素に適用させる。要素とID名の間に#を付ける。要素を省略して#から記述することもできる。

CSS--------------------------
p#def {border-style:solid; padding:5px;}

HTML-------------------------
<p id="def">IDセレクタの適用</p>


3.要素の相関関係でスタイルを設定する

 (1)子孫セレクタ

ここでは,p要素内のem要素に適用される。他のem要素には適用されない。

CSS--------------------------
p em {color:green;}

HTML-------------------------
<p>p要素内の<em>(ここが適用対象)</em>em要素に適用</p>


4.疑似クラス・疑似要素

 (1)疑似クラス

CSS--------------------------
a:link {color:#FF0000;}
a:hover {color:#0080FF;}

HTML-------------------------
<a href="#">リンク</a>

>>> 記述例・HTMLソース
スタイルシート関連書籍

つくろう!魅せよう! スッキリかんたんスタイルシート〜基本 スッキリかんたんスタイルシート〜文字 スッキリかんたんスタイルシート〜色と背景 スッキリかんたんスタイルシート〜リンク スッキリかんたんスタイルシート〜ボックス スッキリかんたんスタイルシート〜配置 スッキリかんたんスタイルシート〜リスト スッキリかんたんスタイルシート〜表 スッキリかんたんスタイルシート〜いろいろ スッキリかんたんスタイルシート〜HP構成
Copyright(C)1997. itoben style. All Rights Reserved.