トップページ 利用規約 掲示板 ランキング 初心者説明 質問集 リンクする 相互リンク
タグの説明 テーブルタグ スタイルシート 色の見本 素材屋リンク 作成リンク WEBスペース レンタルリンク
スタイルシートについて
■ スタイルシートって何？
■ どんなことができるの？
■ どんなふうに使えばいいの？
スタイルシートの使い方
■ タグに直接書いていく場合
■ head内に記入する場合
■ 外部ファイルを用意する場合
お役立ちサイト
■ ホームページ作成ＮＡＶＩ
■ 超初心者のためのHP作成講座
■ Webページ作りのお勉強
文字の設定
■ 文字の大きさ 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-:★ ★ ★;
サイト全体の設定
■ 指定タグ全部に反映 {★}
■ 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:★;
フィルター（表示効果）の設定
■ 半透明にする 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 ↑　　（ブラウザの対応）

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

▲目次へ

お役立ちリンク集： sozai-R 素材NAVI イラスト素材プチッチ HP作成無料 ホームページ制作会社 ジェバアーツ 格安ホームページの制作屋