スタイルシート見出し100本ノック！！＆スタイルシートで見出しメーカー作ってみたよ！ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-

あると便利なスタイルシートで見出しサンプル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; }

この見出しのサンプルは

シンプルスタイルシート見出しメーカーで作りました♪

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル