スタイルシート見出し100本ノック！！＆スタイルシートで見出しメーカー作ってみたよ！

2009/ 07/ 09

あると便利なスタイルシートで見出しサンプル100本！
といっても100パターン作ったわけではなくて、12パターン×10色で120種類という若干ずるい100本ノックとなっております･･･（笑）

クラス名が長すぎますが、もし需要があれば適宜変更してご自由にお使いください♪

で、これをやっているうちに面倒になってきたので
ちょっとツール？作ってみました。

シンプルスタイルシート見出しメーカー

4色選んで作成を押すと、下の12種類の見出しを選んだ色で出力してくれる
・・・だけのもの。

シンプルすぎてごめんなさいね。

お好みの色で作りたい方はよかったらこちらもどうぞ～♪

それでは、120本！いってみよー！！

見出しサンプル

menuRibbonBlue

menuRibbonLightBlue

menuTabBlue

menuTabLightBlue

menuTabDoubleBlue

menuTabDoubleLightBlue

menuLineBlue

menuLineLightBlue

menuLineLightWBlue

menuLineDoubleBlue

menuLineDoubleLightBlue

menuLineDoubleLightWBlue

HTML

menuRibbonBlue menuRibbonLightBlue menuTabBlue menuTabLightBlue menuTabDoubleBlue menuTabDoubleLightBlue menuLineBlue menuLineLightBlue menuLineLightWBlue menuLineDoubleBlue menuLineDoubleLightBlue menuLineDoubleLightWBlue

CSS

.menuRibbonBlue { margin:0 0 10px 0; padding:2px 8px; background:#029EBC; color:#EBF7FA; line-height:140%; font-weight:bold; } .menuRibbonLightBlue { margin:0 0 10px 0; padding:2px 8px; background:#80CEDD; color:#017589; line-height:140%; font-weight:bold; } .menuTabBlue { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #80CEDD; border-style:solid; background:#029EBC; color:#EBF7FA; line-height:140%; font-weight:bold; } .menuTabLightBlue { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#029EBC; border-style:solid; background:#80CEDD; color:#017589; line-height:140%; font-weight:bold; } .menuTabDoubleBlue { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #80CEDD; border-style:solid; background:#029EBC; color:#EBF7FA; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightBlue { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#029EBC; border-style:solid; background:#80CEDD; color:#017589; line-height:140%; font-weight:bold; text-align:center; } .menuLineBlue { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #80CEDD; border-style:solid; background:#029EBC; color:#EBF7FA; line-height:140%; font-weight:bold; } .menuLineLightBlue { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#029EBC; border-style:solid; background:#80CEDD; color:#017589; line-height:140%; font-weight:bold; } .menuLineDoubleBlue { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #80CEDD; border-style:solid; background:#029EBC; color:#EBF7FA; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWBlue { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#029EBC; border-style:solid; background:#fff; color:#017589; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightBlue { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#029EBC; border-style:solid; background:#80CEDD; color:#017589; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWBlue { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#029EBC; border-style:solid; background:#fff; color:#017589; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonGreen

menuRibbonLightGreen

menuTabGreen

menuTabLightGreen

menuTabDoubleGreen

menuTabDoubleLightGreen

menuLineGreen

menuLineLightGreen

menuLineLightWGreen

menuLineDoubleGreen

menuLineDoubleLightGreen

menuLineDoubleLightWGreen

HTML

menuRibbonGreen menuRibbonLightGreen menuTabGreen menuTabLightGreen menuTabDoubleGreen menuTabDoubleLightGreen menuLineGreen menuLineLightGreen menuLineLightWGreen menuLineDoubleGreen menuLineDoubleLightGreen menuLineDoubleLightWGreen

CSS

.menuRibbonGreen { margin:0 0 10px 0; padding:2px 8px; background:#7EBA03; color:#F3F9E8; line-height:140%; font-weight:bold; } .menuRibbonLightGreen { margin:0 0 10px 0; padding:2px 8px; background:#BEDC81; color:#5B8602; line-height:140%; font-weight:bold; } .menuTabGreen { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #BEDC81; border-style:solid; background:#7EBA03; color:#F3F9E8; line-height:140%; font-weight:bold; } .menuTabLightGreen { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#7EBA03; border-style:solid; background:#BEDC81; color:#5B8602; line-height:140%; font-weight:bold; } .menuTabDoubleGreen { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #BEDC81; border-style:solid; background:#7EBA03; color:#F3F9E8; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightGreen { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#7EBA03; border-style:solid; background:#BEDC81; color:#5B8602; line-height:140%; font-weight:bold; text-align:center; } .menuLineGreen { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #BEDC81; border-style:solid; background:#7EBA03; color:#F3F9E8; line-height:140%; font-weight:bold; } .menuLineLightGreen { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#7EBA03; border-style:solid; background:#BEDC81; color:#5B8602; line-height:140%; font-weight:bold; } .menuLineDoubleGreen { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #BEDC81; border-style:solid; background:#7EBA03; color:#F3F9E8; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWGreen { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#7EBA03; border-style:solid; background:#fff; color:#5B8602; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightGreen { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#7EBA03; border-style:solid; background:#BEDC81; color:#5B8602; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWGreen { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#7EBA03; border-style:solid; background:#fff; color:#5B8602; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonMint

menuRibbonLightMint

menuTabMint

menuTabLightMint

menuTabDoubleMint

menuTabDoubleLightMint

menuLineMint

menuLineLightMint

menuLineLightWMint

menuLineDoubleMint

menuLineDoubleLightMint

menuLineDoubleLightWMint

HTML

menuRibbonMint menuRibbonLightMint menuTabMint menuTabLightMint menuTabDoubleMint menuTabDoubleLightMint menuLineMint menuLineLightMint menuLineLightWMint menuLineDoubleMint menuLineDoubleLightMint menuLineDoubleLightWMint

CSS

.menuRibbonMint { margin:0 0 10px 0; padding:2px 8px; background:#CBDA10; color:#666600; line-height:140%; font-weight:bold; } .menuRibbonLightMint { margin:0 0 10px 0; padding:2px 8px; background:#E5EC87; color:#8A950B; line-height:140%; font-weight:bold; } .menuTabMint { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #E5EC87; border-style:solid; background:#CBDA10; color:#666600; line-height:140%; font-weight:bold; } .menuTabLightMint { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#CBDA10; border-style:solid; background:#E5EC87; color:#8A950B; line-height:140%; font-weight:bold; } .menuTabDoubleMint { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #E5EC87; border-style:solid; background:#CBDA10; color:#666600; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightMint { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#CBDA10; border-style:solid; background:#E5EC87; color:#8A950B; line-height:140%; font-weight:bold; text-align:center; } .menuLineMint { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #E5EC87; border-style:solid; background:#CBDA10; color:#666600; line-height:140%; font-weight:bold; } .menuLineLightMint { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#CBDA10; border-style:solid; background:#E5EC87; color:#8A950B; line-height:140%; font-weight:bold; } .menuLineDoubleMint { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #E5EC87; border-style:solid; background:#CBDA10; color:#666600; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWMint { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#CBDA10; border-style:solid; background:#fff; color:#8A950B; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightMint { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#CBDA10; border-style:solid; background:#E5EC87; color:#8A950B; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWMint { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#CBDA10; border-style:solid; background:#fff; color:#8A950B; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonYellow

menuRibbonLightYellow

menuTabYellow

menuTabLightYellow

menuTabDoubleYellow

menuTabDoubleLightYellow

menuLineYellow

menuLineLightYellow

menuLineLightWYellow

menuLineDoubleYellow

menuLineDoubleLightYellow

menuLineDoubleLightWYellow

HTML

menuRibbonYellow menuRibbonLightYellow menuTabYellow menuTabLightYellow menuTabDoubleYellow menuTabDoubleLightYellow menuLineYellow menuLineLightYellow menuLineLightWYellow menuLineDoubleYellow menuLineDoubleLightYellow menuLineDoubleLightWYellow

CSS

.menuRibbonYellow { margin:0 0 10px 0; padding:2px 8px; background:#F4C504; color:#644602; line-height:140%; font-weight:bold; } .menuRibbonLightYellow { margin:0 0 10px 0; padding:2px 8px; background:#F9E281; color:#A78603; line-height:140%; font-weight:bold; } .menuTabYellow { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #F9E281; border-style:solid; background:#F4C504; color:#644602; line-height:140%; font-weight:bold; } .menuTabLightYellow { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#F4C504; border-style:solid; background:#F9E281; color:#A78603; line-height:140%; font-weight:bold; } .menuTabDoubleYellow { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #F9E281; border-style:solid; background:#F4C504; color:#644602; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightYellow { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#F4C504; border-style:solid; background:#F9E281; color:#A78603; line-height:140%; font-weight:bold; text-align:center; } .menuLineYellow { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #F9E281; border-style:solid; background:#F4C504; color:#644602; line-height:140%; font-weight:bold; } .menuLineLightYellow { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#F4C504; border-style:solid; background:#F9E281; color:#A78603; line-height:140%; font-weight:bold; } .menuLineDoubleYellow { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #F9E281; border-style:solid; background:#F4C504; color:#644602; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWYellow { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#F4C504; border-style:solid; background:#fff; color:#A78603; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightYellow { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#F4C504; border-style:solid; background:#F9E281; color:#A78603; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWYellow { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#F4C504; border-style:solid; background:#fff; color:#A78603; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonOrange

menuRibbonLightOrange

menuTabOrange

menuTabLightOrange

menuTabDoubleOrange

menuTabDoubleLightOrange

menuLineOrange

menuLineLightOrange

menuLineLightWOrange

menuLineDoubleOrange

menuLineDoubleLightOrange

menuLineDoubleLightWOrange

HTML

menuRibbonOrange menuRibbonLightOrange menuTabOrange menuTabLightOrange menuTabDoubleOrange menuTabDoubleLightOrange menuLineOrange menuLineLightOrange menuLineLightWOrange menuLineDoubleOrange menuLineDoubleLightOrange menuLineDoubleLightWOrange

CSS

.menuRibbonOrange { margin:0 0 10px 0; padding:2px 8px; background:#f79708; color:#F9F3EC; line-height:140%; font-weight:bold; } .menuRibbonLightOrange { margin:0 0 10px 0; padding:2px 8px; background:#febe25; color:#d25c14; line-height:140%; font-weight:bold; } .menuTabOrange { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #febe25; border-style:solid; background:#f79708; color:#F9F3EC; line-height:140%; font-weight:bold; } .menuTabLightOrange { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#f79708; border-style:solid; background:#febe25; color:#d25c14; line-height:140%; font-weight:bold; } .menuTabDoubleOrange { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #febe25; border-style:solid; background:#f79708; color:#F9F3EC; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightOrange { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#f79708; border-style:solid; background:#febe25; color:#d25c14; line-height:140%; font-weight:bold; text-align:center; } .menuLineOrange { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #febe25; border-style:solid; background:#f79708; color:#F9F3EC; line-height:140%; font-weight:bold; } .menuLineLightOrange { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#f79708; border-style:solid; background:#febe25; color:#d25c14; line-height:140%; font-weight:bold; } .menuLineDoubleOrange { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #febe25; border-style:solid; background:#f79708; color:#F9F3EC; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWOrange { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#f79708; border-style:solid; background:#fff; color:#d25c14; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightOrange { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#f79708; border-style:solid; background:#febe25; color:#d25c14; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWOrange { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#f79708; border-style:solid; background:#fff; color:#d25c14; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonRed

menuRibbonLightRed

menuTabRed

menuTabLightRed

menuTabDoubleRed

menuTabDoubleLightRed

menuLineRed

menuLineLightRed

menuLineLightWRed

menuLineDoubleRed

menuLineDoubleLightRed

menuLineDoubleLightWRed

HTML

menuRibbonRed menuRibbonLightRed menuTabRed menuTabLightRed menuTabDoubleRed menuTabDoubleLightRed menuLineRed menuLineLightRed menuLineLightWRed menuLineDoubleRed menuLineDoubleLightRed menuLineDoubleLightWRed

CSS

.menuRibbonRed { margin:0 0 10px 0; padding:2px 8px; background:#C6485B; color:#FFE6E7; line-height:140%; font-weight:bold; } .menuRibbonLightRed { margin:0 0 10px 0; padding:2px 8px; background:#E2A3AD; color:#A73445; line-height:140%; font-weight:bold; } .menuTabRed { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #E2A3AD; border-style:solid; background:#C6485B; color:#FFE6E7; line-height:140%; font-weight:bold; } .menuTabLightRed { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#C6485B; border-style:solid; background:#E2A3AD; color:#A73445; line-height:140%; font-weight:bold; } .menuTabDoubleRed { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #E2A3AD; border-style:solid; background:#C6485B; color:#FFE6E7; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightRed { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#C6485B; border-style:solid; background:#E2A3AD; color:#A73445; line-height:140%; font-weight:bold; text-align:center; } .menuLineRed { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #E2A3AD; border-style:solid; background:#C6485B; color:#FFE6E7; line-height:140%; font-weight:bold; } .menuLineLightRed { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#C6485B; border-style:solid; background:#E2A3AD; color:#A73445; line-height:140%; font-weight:bold; } .menuLineDoubleRed { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #E2A3AD; border-style:solid; background:#C6485B; color:#FFE6E7; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWRed { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#C6485B; border-style:solid; background:#fff; color:#A73445; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightRed { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#C6485B; border-style:solid; background:#E2A3AD; color:#A73445; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWRed { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#C6485B; border-style:solid; background:#fff; color:#A73445; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonPurple

menuRibbonLightPurple

menuTabPurple

menuTabLightPurple

menuTabDoublePurple

menuTabDoubleLightPurple

menuLinePurple

menuLineLightPurple

menuLineLightWPurple

menuLineDoublePurple

menuLineDoubleLightPurple

menuLineDoubleLightWPurple

HTML

menuRibbonPurple menuRibbonLightPurple menuTabPurple menuTabLightPurple menuTabDoublePurple menuTabDoubleLightPurple menuLinePurple menuLineLightPurple menuLineLightWPurple menuLineDoublePurple menuLineDoubleLightPurple menuLineDoubleLightWPurple

CSS

.menuRibbonPurple { margin:0 0 10px 0; padding:2px 8px; background:#8c177e; color:#f7ebf9; line-height:140%; font-weight:bold; } .menuRibbonLightPurple { margin:0 0 10px 0; padding:2px 8px; background:#d9c1e2; color:#5a1644; line-height:140%; font-weight:bold; } .menuTabPurple { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #d9c1e2; border-style:solid; background:#8c177e; color:#f7ebf9; line-height:140%; font-weight:bold; } .menuTabLightPurple { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#8c177e; border-style:solid; background:#d9c1e2; color:#5a1644; line-height:140%; font-weight:bold; } .menuTabDoublePurple { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #d9c1e2; border-style:solid; background:#8c177e; color:#f7ebf9; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightPurple { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#8c177e; border-style:solid; background:#d9c1e2; color:#5a1644; line-height:140%; font-weight:bold; text-align:center; } .menuLinePurple { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #d9c1e2; border-style:solid; background:#8c177e; color:#f7ebf9; line-height:140%; font-weight:bold; } .menuLineLightPurple { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#8c177e; border-style:solid; background:#d9c1e2; color:#5a1644; line-height:140%; font-weight:bold; } .menuLineDoublePurple { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #d9c1e2; border-style:solid; background:#8c177e; color:#f7ebf9; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWPurple { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#8c177e; border-style:solid; background:#fff; color:#5a1644; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightPurple { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#8c177e; border-style:solid; background:#d9c1e2; color:#5a1644; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWPurple { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#8c177e; border-style:solid; background:#fff; color:#5a1644; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonPink

menuRibbonLightPink

menuTabPink

menuTabLightPink

menuTabDoublePink

menuTabDoubleLightPink

menuLinePink

menuLineLightPink

menuLineLightWPink

menuLineDoublePink

menuLineDoubleLightPink

menuLineDoubleLightWPink

HTML

menuRibbonPink menuRibbonLightPink menuTabPink menuTabLightPink menuTabDoublePink menuTabDoubleLightPink menuLinePink menuLineLightPink menuLineLightWPink menuLineDoublePink menuLineDoubleLightPink menuLineDoubleLightWPink

CSS

.menuRibbonPink { margin:0 0 10px 0; padding:2px 8px; background:#E184A5; color:#FEEFEF; line-height:140%; font-weight:bold; } .menuRibbonLightPink { margin:0 0 10px 0; padding:2px 8px; background:#F0ACC0; color:#D75B87; line-height:140%; font-weight:bold; } .menuTabPink { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #F0ACC0; border-style:solid; background:#E184A5; color:#FEEFEF; line-height:140%; font-weight:bold; } .menuTabLightPink { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#E184A5; border-style:solid; background:#F0ACC0; color:#D75B87; line-height:140%; font-weight:bold; } .menuTabDoublePink { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #F0ACC0; border-style:solid; background:#E184A5; color:#FEEFEF; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightPink { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#E184A5; border-style:solid; background:#F0ACC0; color:#D75B87; line-height:140%; font-weight:bold; text-align:center; } .menuLinePink { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #F0ACC0; border-style:solid; background:#E184A5; color:#FEEFEF; line-height:140%; font-weight:bold; } .menuLineLightPink { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#E184A5; border-style:solid; background:#F0ACC0; color:#D75B87; line-height:140%; font-weight:bold; } .menuLineDoublePink { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #F0ACC0; border-style:solid; background:#E184A5; color:#FEEFEF; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWPink { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#E184A5; border-style:solid; background:#fff; color:#D75B87; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightPink { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#E184A5; border-style:solid; background:#F0ACC0; color:#D75B87; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWPink { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#E184A5; border-style:solid; background:#fff; color:#D75B87; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonBrown

menuRibbonLightBrown

menuTabBrown

menuTabLightBrown

menuTabDoubleBrown

menuTabDoubleLightBrown

menuLineBrown

menuLineLightBrown

menuLineLightWBrown

menuLineDoubleBrown

menuLineDoubleLightBrown

menuLineDoubleLightWBrown

HTML

menuRibbonBrown menuRibbonLightBrown menuTabBrown menuTabLightBrown menuTabDoubleBrown menuTabDoubleLightBrown menuLineBrown menuLineLightBrown menuLineLightWBrown menuLineDoubleBrown menuLineDoubleLightBrown menuLineDoubleLightWBrown

CSS

.menuRibbonBrown { margin:0 0 10px 0; padding:2px 8px; background:#5c3739; color:#d6c7c7; line-height:140%; font-weight:bold; } .menuRibbonLightBrown { margin:0 0 10px 0; padding:2px 8px; background:#8d6d6d; color:#3A2929; line-height:140%; font-weight:bold; } .menuTabBrown { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #8d6d6d; border-style:solid; background:#5c3739; color:#d6c7c7; line-height:140%; font-weight:bold; } .menuTabLightBrown { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#5c3739; border-style:solid; background:#8d6d6d; color:#3A2929; line-height:140%; font-weight:bold; } .menuTabDoubleBrown { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #8d6d6d; border-style:solid; background:#5c3739; color:#d6c7c7; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightBrown { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#5c3739; border-style:solid; background:#8d6d6d; color:#3A2929; line-height:140%; font-weight:bold; text-align:center; } .menuLineBrown { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #8d6d6d; border-style:solid; background:#5c3739; color:#d6c7c7; line-height:140%; font-weight:bold; } .menuLineLightBrown { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#5c3739; border-style:solid; background:#8d6d6d; color:#3A2929; line-height:140%; font-weight:bold; } .menuLineDoubleBrown { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #8d6d6d; border-style:solid; background:#5c3739; color:#d6c7c7; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWBrown { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#5c3739; border-style:solid; background:#fff; color:#3A2929; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightBrown { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#5c3739; border-style:solid; background:#8d6d6d; color:#3A2929; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWBrown { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#5c3739; border-style:solid; background:#fff; color:#3A2929; line-height:140%; font-weight:bold; }

見出しサンプル

menuRibbonGray

menuRibbonLightGray

menuTabGray

menuTabLightGray

menuTabDoubleGray

menuTabDoubleLightGray

menuLineGray

menuLineLightGray

menuLineLightWGray

menuLineDoubleGray

menuLineDoubleLightGray

menuLineDoubleLightWGray

HTML

menuRibbonGray menuRibbonLightGray menuTabGray menuTabLightGray menuTabDoubleGray menuTabDoubleLightGray menuLineGray menuLineLightGray menuLineLightWGray menuLineDoubleGray menuLineDoubleLightGray menuLineDoubleLightWGray

CSS

.menuRibbonGray { margin:0 0 10px 0; padding:2px 8px; background:#6D6D6D; color:#EFEFEF; line-height:140%; font-weight:bold; } .menuRibbonLightGray { margin:0 0 10px 0; padding:2px 8px; background:#CCCCCC; color:#494949; line-height:140%; font-weight:bold; } .menuTabGray { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color: #CCCCCC; border-style:solid; background:#6D6D6D; color:#EFEFEF; line-height:140%; font-weight:bold; } .menuTabLightGray { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 0 5px; border-color:#6D6D6D; border-style:solid; background:#CCCCCC; color:#494949; line-height:140%; font-weight:bold; } .menuTabDoubleGray { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color: #CCCCCC; border-style:solid; background:#6D6D6D; color:#EFEFEF; line-height:140%; font-weight:bold; text-align:center; } .menuTabDoubleLightGray { margin:0 0 10px 0; padding:2px 8px; border-width:0 5px; border-color:#6D6D6D; border-style:solid; background:#CCCCCC; color:#494949; line-height:140%; font-weight:bold; text-align:center; } .menuLineGray { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0; border-color: #CCCCCC; border-style:solid; background:#6D6D6D; color:#EFEFEF; line-height:140%; font-weight:bold; } .menuLineLightGray { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#6D6D6D; border-style:solid; background:#CCCCCC; color:#494949; line-height:140%; font-weight:bold; } .menuLineDoubleGray { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #CCCCCC; border-style:solid; background:#6D6D6D; color:#EFEFEF; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightWGray { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#6D6D6D; border-style:solid; background:#fff; color:#494949; line-height:140%; font-weight:bold; text-align:center; } .menuLineDoubleLightGray { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color:#6D6D6D; border-style:solid; background:#CCCCCC; color:#494949; line-height:140%; font-weight:bold; text-align:center; } .menuLineLightWGray { margin:0 0 10px 0; padding:2px 8px; border-width:0 0 5px 0 ; border-color:#6D6D6D; border-style:solid; background:#fff; color:#494949; line-height:140%; font-weight:bold; }

VIVID COLORS + BLOG

Comment -コメント一覧-

Comment -コメントをどうぞ-

Trackback URL -トラックバックURL-

Trackback -トラックバック一覧-