訪問者数
47167
Since 2002.11.11
Last Update: 2002.10.26






ご意見・ご感想は メール または myroomBBS までお願いします。

D's Cafe: Kitchen - CSS

ここで使っているスタイルです。
CSSファイルを複数用意して、JavaScriptで切り替えできるようにしています。
使用例ということでsff1.cssの中身を公開。
CSSそのものの解説ではないので、組み込み方等は適当に調べてください。

bodyタグ (HTML本体)
背景: 背景色 画像 スクロール固定 繰り返しパターン
background: #000000 url("img/bg1.png") fixed repeat-y
文字色
color: #FFFFFF
リンク
未訪問
a:link {color: #FFFF00}
訪問済み
a:visited {color: #40FF40}
カーソルが上に来た時
a:hover {color: #FF0000}
tdタグ (表・セル)
境界線: 左、上のみ 色 線幅
border-style: solid none none solid
border-color: #4080FF
border-width: 1px
thタグ (表・見出し)
背景: 画像 繰り返しパターン
background: url("img/th1.png") repeat-x
h2, h3タグ (見出し)
文字スタイル
font-style: italic
左余白
padding-left: 16
文字色
color: #C0C0FF
背景
background: url("img/bg1.png") repeat-y
境界線-下
border-bottom: solid #4080FF 1px
*ネスケ7では単位pxの指定が必要
文字サイズ
font-size: 1.5em (h3では1.2em)
*ここだけ個別に指定
dtタグ (定義型リスト)
文字
font-style: italic
font-size: 1.2em
*IEではfont: で一括指定可。
以下h2, h3とほぼ同様
padding-left: 8;
color: #C0C0FF;
background: url("img/bg1.png") repeat-y;
border-bottom: solid #4080FF 1px
ddタグ (定義型リスト)
上下の余白
padding: 0.5em 0 1em
preタグ (整形済みテキスト)
文字サイズ、背景色、余白
font-size: 0.9em;
background: #C0C0FF;
margin: 0.2em 0;
padding: 0.5em 0
ulタグ (リスト)
リストマーク画像
list-style-image: url("img/ball1.png")
クラス: counter (カウンター用)
background: #000000 url("img/bg1.png") repeat-y;
border: ridge #4080FF 4px
クラス: menubox (メニュー周り)
width: 144;
height: 144;
overflow: hidden
*ここのoverflowがミソ(ないといろいろ不都合)
クラス: btnl (ボタン左側)
position: relative;
left: 0;
top: 0;
border: none
*border以外はあまり意味なし
クラス: btnr (ボタン右側)
position: relative;
left: 64;
top: -112;
border: none
*これでメニューのボタンを2列に
クラス: line (罫線用)
background: url("img/hr1.png") repeat-x;
height: 8;
overflow: hidden
*overflowがないとheightが無意味に
クラス: item (項目用)
font-style: italic;
font-size: 1.2em;
text-align: center;
background: #000080
クラス: linkhead (Linkのラベル用)
font-style: italic;
font-weight: bold;
font-size: 1.2em;
text-align: right;
color: #C0C0FF;
border-bottom: solid #4080FF 1px
クラス: linkfield (背景付セル)
background: url("img/bg1.png") repeat-y;
border: none;
text-align: center;
vertical-align: top
使用例

h2

h3

th
td (item) td (Normal)
td (item) td (linkfield)
dt
dd
  • List
  • List
  • List
pre


LinkHead
Home / D's Cafe / CD List / Release / Event / Diary / Link / myroom

Gポイントポイ活 Amazon Yahoo 楽天

無料ホームページ 楽天モバイル[UNLIMITが今なら1円] 海外格安航空券 海外旅行保険が無料!