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


おすすめサイト
HP作成NAVIホームページを作ろうと思ってる方にとても役に立つサイト。
スタイルシート講座初心者に分かりやすくスタイルシートを紹介しています。
クイックリファレンスHTMLタグ、スタイルシートなどをアルファベット順で見れる。
CSSレイアウト講座スタイルシートでレイアウトを作る方法などの紹介。
スクロール色設定スクロールバーの色を変えることができる便利なサイト。
MENU
前のページにもどる
トップページにもどる
HTML辞典 色の見本
スタイルシートの説明
このページは、HTML を手助けする スタイルシート(CSS) を色々と紹介したページです。
ホームページを作成する際にスタイルシートを使うと、非常に便利で、表現の幅が広がります。
スタイルシートについて
スタイルシートって何?
どんなことができるの?
どんなふうに使えばいいの?
文字の設定
文字の大きさ font-size:★;
文字の色 color:★;
文字を太字 font-weight:★;
文字を斜体 font-style:★;
文字の種類 font-family:★;
まとめて指定 font:★ ★ ★;
文字全般の設定
文字に下線 text-decoration:★;
1行目だけ余白 text-indent:★;
見たまま表示 white-space:★;
大小文字で表示 text-transform:★;
ルビをふる ruby-align:★;
ルビの位置 ruby-position:★;
スモールキャップ font-variant:★;
禁則処理 line-break:★;
単語の改行処理 word-break:★;
縦書きにする writing-mode:★;
縦組みにする layout-flow:★;
スクロール付きエリア overflow:★;
文字間隔の設定
文章の行間 line-height:★;
1字ずつの間隔 letter-spacing:★;
1単語ずつの間隔 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:★;
お役立ちサイト
ホームページ作成NAVI
超初心者のためのHP作成講座
Webページ作りのお勉強
フィルター(表示効果)の設定
半透明にする filter:alpha(★);
影をつける filter:dropshadow(★);
移動影をつける filter:shadow(★);
波状にする filter:wave(★);
1部分を透過 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 ↑  (ブラウザの対応)

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

▲上に移動