スタイルシートの説明

トップページ	利用規約	掲示板	サーバー紹介	レンタル紹介	素材屋紹介	リンクする	相互リンク
アフィリエイト	初心者	HTML	TABLEタグ	スタイルシート	色の見本	タグ練習	タグ辞典

おすすめサイト

ＨＰ作成ＮＡＶＩ	…	ホームページを作ろうと思ってる方にとても役に立つサイト。
スタイルシート講座	…	初心者に分かりやすくスタイルシートを紹介しています。
クイックリファレンス	…	HTMLタグ、スタイルシートなどをアルファベット順で見れる。
CSSレイアウト講座	…	スタイルシートでレイアウトを作る方法などの紹介。
スクロール色設定	…	スクロールバーの色を変えることができる便利なサイト。

前のページにもどる

トップページにもどる

HTML辞典　色の見本

スタイルシートの説明

このページは、HTML を手助けするスタイルシート（CSS）を色々と紹介したページです。
ホームページを作成する際にスタイルシートを使うと、非常に便利で、表現の幅が広がります。

スタイルシートについて

■ スタイルシートって何？
■ どんなことができるの？
■ どんなふうに使えばいいの？

文字の設定

■ 文字の大きさ font-size:★;
■ 文字の色 color:★;
■ 文字を太字 font-weight:★;
■ 文字を斜体 font-style:★;
■ 文字の種類 font-family:★;
■ まとめて指定 font:★ ★ ★;

文字全般の設定

■ 文字に下線 text-decoration:★;
■ １行目だけ余白 text-indent:★;
■ 見たまま表示 white-space:★;
■ 大小文字で表示 text-transform:★;
■ ルビをふる ruby-align:★;
■ ルビの位置 ruby-position:★;
■ スモールキャップ font-variant:★;
■ 禁則処理 line-break:★;
■ 単語の改行処理 word-break:★;
■ 縦書きにする writing-mode:★;
■ 縦組みにする layout-flow:★;
■ スクロール付きエリア overflow:★;

文字間隔の設定

■ 文章の行間 line-height:★;
■ １字ずつの間隔 letter-spacing:★;
■ １単語ずつの間隔 word-spacing:★;
■ 文字・行間隔 layout-grid-type:★;

リストの設定

■ マークを変更 list-type:★;
■ マーク画像 list-image:url(★);
■ マークを内側 list-position:★;
■ まとめて指定 list-:★ ★ ★;

スタイルシートの使い方

■ タグに直接書いていく場合
■ head内に記入する場合
■ 外部ファイルを用意する場合

サイト全体の設定

■ 指定タグ全部に反映 {★}
■ ID の指定 id="★"
■ CLASS の指定 class="★"
■ リンク装飾 a:link {★}
■ 基本余白の変更 body {margin:★;}
■ スクロールバー色 scrollvar:★;

位置の設定

■ 横の表示位置 text-align:★;
■ 縦の表示位置 vertical-align:★;
■ 左右の回り込み float:★;
■ 回り込み解除 clear:★;
■ 指定位置に固定配置 position:★;
■ 相対的な位置に配置 position:★;
■ 重なる順番を決める z-index:★;

ボックスの設定

■ 中身の余白 padding:★;
■ 外側の余白 margin:★;
■ 縦横幅を指定 width:★; height:★;
■ 線の種類 border-style:★;
■ 線の太さ border-width:★;
■ 線の色 border-color:★;
■ まとめて指定 border:★;

背景の設定

■ 背景色 background-color:★;
■ 背景画像 background-image:★;
■ 背景画像並び方 -repeat:★;
■ 背景画像の位置 -position:★;
■ 背景画像固定 -attachment:★;
■ まとめて指定 background:★;

お役立ちサイト

■ ホームページ作成ＮＡＶＩ
■ 超初心者のためのHP作成講座
■ Webページ作りのお勉強

フィルター（表示効果）の設定

■ 半透明にする filter:alpha(★);
■ 影をつける filter:dropshadow(★);
■ 移動影をつける filter:shadow(★);
■ 波状にする filter:wave(★);
■ １部分を透過 filter:chroma(★);
■ ぼやけさす filter:blur(★);
■ ブレさす filter:motionblur(★);
■ 浮き出す filter:glow(★);
■ 色を反転 filter:invert(★);
■ 白黒にする filter:gray(★);
■ X線フィルタ filter:xray(★);
■ マスク filter:maskfilter(★);
■ 方向を横反転 filter:fliph(★);
■ 方向を縦反転 filter:flipv(★);
■ モザイク処理 filter:pixelate(★);
■ エンボス処理 filter:emboss(★);
■ へこみ処理 filter:engrave(★);
■ 複数を適応 filter:basicimage(★);
■ グラデーション filter:gradient(★);
■ スポットライト filter:light(★);

表の設定

■ 表の表示を早める table-layout:★;
■ 表の内枠線処理 border-collapse:★;

その他

■ カーソルを変える cursor:★;
■ 入力形式指定 ime-mode:★;
■ 印刷改ページ page-break-before:★;
■ 表示させない display:★;
■ 見えなくする visibility:★;

ページの説明

※ 各ページの表の見方を紹介します。間違いなどがありましたら報告お願いします。

ここにスタイルシートの項目名（詳細情報）
対応	Internet Explorer 6 ↑ 　Netscape 7 ↑　　（ブラウザの対応）サイトを閲覧しているブラウザ（ソフト）の対応状況を記載しています。対応してないブラウザや、バージョン（数字）には効果がありません。
字体	実際に使用するスタイルシートの字体が書かれています。
指定	上のスタイルシートの指定方法が書かれています。 ★部分に単語や数字を入れることによって効果がでます。
効果	このスタイルシートを使うとどうなるかということが書かれています。
例１	こんな風に書いて使用するというテキストサンプルが見られます。
結果	上の例で使用したスタイルシートの結果が見られます。
解説	このスタイルシートや、例などに対しての解説が書かれています。

▲上に移動