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

スタイルシート見出しメーカーは、好きな色でシンプルなスタイルシートの見出しを作成するだけのシンプルなツールです。
サンプルカラーから調整してもよし、自分で好きに着色してもよし、使い方は出来上がったソースをコピペするだけなので簡単です。
あなたのホームページ作りにちょっとでもお役に立てればうれしいです♪

スタイルシート見出しメーカーの使い方

サンプルカラーセットを用意しました。　好きな色をクリックしてみてね。

ブルー

グリーン

ミント

イエロー

オレンジ

レッド

パープル

ピンク

グレー

ブラウン

七夕

みつばち

すいか

クリスマス

チョコレート

ロック?

自分好みに調整してみよう！色を変えたいボックスを選んで右から色を選ぼう！

こんな感じに作れます。

↓見出し表示サンプル

menuRibbon

menuRibbonLight

menuTab

menuTabLight

menuTabDouble

menuTabDoubleLight

menuLine

menuLineLight

menuLineLightW

menuLineDouble

menuLineDoubleLight

menuLineDoubleLightW

HTML

<p class="menuRibbon">menuRibbon</p>
<p class="menuRibbonLight">menuRibbonLight</p>
<p class="menuTab">menuTab</p>
<p class="menuTabLight">menuTabLight</p>
<p class="menuTabDouble">menuTabDouble</p>
<p class="menuTabDoubleLight">menuTabDoubleLight</p>
<p class="menuLine">menuLine</p>
<p class="menuLineLight">menuLineLight</p>
<p class="menuLineLightW">menuLineLightW</p>
<p class="menuLineDouble">menuLineDouble</p>
<p class="menuLineDoubleLight">menuLineDoubleLight</p>
<p class="menuLineDoubleLightW">menuLineDoubleLightW</p>

CSS

.menuRibbon {
	margin:0 0 10px 0;
	padding:2px 8px;
	background:#029EBC;
	color:#EBF7FA;
	line-height:140%;
	font-weight:bold;
}

.menuRibbonLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	background:#80CEDD;
	color:#017589;
	line-height:140%;
	font-weight:bold;
}

.menuTab {
	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;
}

.menuTabLight {
	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;
}

.menuTabDouble {
	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;
}

.menuTabDoubleLight {
	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;
}

.menuLine {
	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;
}

.menuLineLight {
	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;
}

.menuLineDouble {
	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;
}

.menuLineDoubleLightW {
	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;
}

.menuLineDoubleLight {
	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;
}

.menuLineLightW {
	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;
}

このツールについて

スタイルシートで見出しを作るとき、同じ色味で色んなパターンがさくっとできたら便利だな、と思っていたのですが、
そういうツールがなかったので作ってみました。
もしバグなどありましたらご連絡いただけるとうれしいです＞＜

詳しい使い方などが説明不足で初心者にわかりにくいものになっていてごめんなさい。
近いうちに実際にブログで使う手順などのページを準備したいと思います！

見出しとして成り立つよう、スタイルをたくさん当てているため、使うサイトによっては余分なスタイルシートなどもあるかと思いますがその辺は自由に調整して使ってください♪

バグ報告・ご意見ご感想などは
yuki930[at]gmail.com　までお願いします♪
（↑[at]を@に変換）

このサイトをやっているひと

YUKIと申します。twitterやってます。
福岡で働くWEBデザイナーです。
仕事以外でも趣味でいろいろサイトを作っています。

無料の素材屋さんやHTML,CSSのtipsサイトにたくさんたくさんお世話になりながら勉強して、今ではWEBデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい！とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでも誰かの役に立てればとてもうれしいです^^

他の運営中サイト
　◇ビビッドカラーズ-0からはじめるホームページ＆ブログ- （ブログテンプレートや素材の配布サイト）
　◇[PHOTO STOCKER]　（無料で使える高解像度のフォトストッカー。写真素材。商用もOK!）
　◇シンプルパターン研究所（無料のパターン、テクスチャ配布サイト）
　◇VIVID COLORS + BLOG（WEBのことなどあれこれ）
　◇YUKIのつれづれなる日常の記録（日常メモ帳）

ほかいろいろ。

ついったーもやってます。

☆HTML,CSS,JQuery関連書籍☆