サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム

スタイルシートは、見栄えやレイアウトなどの表示に関する指定を行うものです。スタイルシートを用いるとHTMLだけでは表現できない様々なデザインが可能になります。

サンプルソースはご自由にカスタマイズなどをしてお使いください。

 スタイルシートメニュー
  1. 基本事項
  2. 背景色・背景画像
  3. 文字の装飾・フォント
  4. テキストの配置・変更
  5. 余白や枠のレイアウト
  6. マウス・リスト・バー
  7. 配置・位置・回り込み
  8. その他
  9. フィルタ (IE 5.5↑)
 10. フィルタ (IE 4.0↑)
 11. CSSサンプル集

基本事項

スタイルシートについて   基本的な書き方・単位など
スタイルシートの継承 スタイルシートリンク集
任意のタグだけに適用  ページ全体に適用
別ファイルから適用 定義済みスタイルを適用
指定した範囲に適用

背景色・背景画像の設定

背景色 background-color   画像の位置 background-position
背景画像 background-image 画像固定 background-attachment
画像の並び background-repeat 背景の一括指定 background

文字の装飾・フォントの設定

文字色の指定 color   フォントスタイル font-style
リンクの文字色・スタイル フォントの太さ font-weight
フォント飾り text-decoration フォントサイズ font-size
文字の変換 text-transform フォントの種類 font-family
ルビの揃え ruby-align スモールキャピタル font-variant
ルビの位置 ruby-position フォントの一括指定 font

テキストなどの配置・変更

行の高さの指定 line-height   行揃えの指定 text-align
インデントの挿入 text-indent 縦方向の位置 vertical-align
スペースや改行 white-space 禁則処理 line-break
縦書きに変換 writing-mode 文字間隔の指定 letter-spacing
縦書きに変換 layout-flow 単語間隔の指定 word-spacing
文字の並び direction フォームの全角/半角 ime-mode
ページ全体を縦書きにする

余白や枠のレイアウト

枠の太さ border-width   幅と高さの指定 width height
枠の色 border-color マージン(余白) margin
枠の形式 border-style 枠と内容の間の空間 padding
枠の一括指定 border

マウスカーソル・リスト・バーの変更

カーソルの変更 cursor   リストの形式 list-style-type
カーソルに画像を指定 リストの配置 list-style-position
スクロールバー scrollbar リストの画像 list-style-image
バーの色を細かく変更 リストの一括指定 list-style

配置・位置・回り込み

要素の性質 display   位置 top bottom left right
配置方法 position 表示・非表示 visibility
左右の配置と回込み float 重ねたときの優先順位 z-index
回り込みの解除 clear スクロールバーを表示 overflow

その他

文字間隔 layout-grid-char   テーブルの表示 table-layout
行間隔 layout-grid-line セル枠の表示 border-collapse
字間隔表示 layout-grid-type 改ページの位置 page-break
有効・無効 layout-grid-mode 外部スクリプト behavior
行間や文字間隔 layout-grid

フィルタ (IE 5.5↑ DirectX)

透明度の指定 (Alpha)   指定した色を透過 (Chroma)
影をつける (DropShadow) 影をつける (Shadow)
ぼかしの指定 (Blur) ぶれの指定 (MotionBlur)
波打たせる (Wave) 輝かせる (Glow)
型抜きをする (MaskFilter) モザイクをかける (Pixelate)
浮き立たせる (Emboss) へこませる (Engrave)
グラデーション (Gradient) 複数の効果を適用 (BasicImage)

フィルタ (IE 4.0↑)

透明度の指定 (Alpha)   指定した色を透過 (Chroma)
影をつける (DropShadow) 影をつける (Shadow)
ぶれの指定 (Blur) 波打たせる (Wave)
輝かせる (Glow) マスク (Mask)
左右反転 (FlipH) 上下反転 (FlipV)
色反転 (Invert) グレイスケール (Gray)
X線写真にする (Xray)

リンク<A> サンプル集

背景色変更・上下にライン   フォントの種類・サイズなど
ボタンのようにヘコませる 画像のようなリンク領域
引き出すようなボタンリンク オンマウスでカーソルを変更

スクロールバー サンプル集

立体のないスクロールバー   少し変わったスクロールバー
立体のあるスクロールバー 通常のスクロールバー

水平線<HR> サンプル集

基本的な指定方法   立体的な水平線
点線・二重線など グラデーションなどのフィルタ
画像を使った水平線

見出し<H1>〜<H3> サンプル集

シンプルな見出し   少し凝った見出し(左揃え)
画像を使った見出し 少し凝った見出し(中央揃え)

テーブル<TABLE> サンプル集

立体的なテーブル   縦線・横線などを消す
点線・二重線などを使う

特集・トピックス

検索エンジン最適化でアクセスアップ
今すぐ始める。ウェブで広告収入!
独自ドメインをGET! お勧めレンタルサーバー
使える! Web作成関連ソフト
ウェブデザイナーやSOHOになるためには?


eWeb ホーム





 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, CSS Samples. All rights reserved. - Home