fc2ブログ

カスタマイズ

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

CSSジェネレーター・プレビューサンプル

　ブログやホームページで、題字・タイトル・小見出しなどの装飾に利用出来る、オンラインスタイルシートジェネレーターです。
　操作感がちょっと特殊で、最初は若干使いづらいと思いますが、慣れれば逆にすいすいと、リアルタイムでプレビューを確認しながらテキスト・フォントをCSSカスタマイズ出来ます。

　CSSの要素も詰め込んでいますので、スタイルシートの勉強にも利用してみてください。こんなCSSがあったのか、CSSでこんなことが出来るのかと、新たな発見が出来るかも。





フォント
パディング
マージン
ボーダー
配置
フォントカスタム
フォントサイズ
font-size : px ;
太字
bold
normal
斜体
italic
normal
デコレーション
underline
overline
line-through
none
カラー
RED :
GREEN :
BLUE :
パディングカスタム
一括指定
上下・左右一括指定
個別指定
padding : px ;
padding(topdown) : px ;
padding(side) : px ;
padding-top : px ;
※右側の空白です。見た目に分からないですが、適応されています。
padding-right : px ;
padding-bottom : px ;
padding-left : px ;
マージンカスタム
一括指定
上下・左右一括指定
個別指定
margin : px ;
margin(topdown) : px ;
margin(side) : px ;
margin-top : px ;
※右側の空白です。見た目に分からないですが、適応されています。
margin-right : px ;
margin-bottom : px ;
margin-left : px ;
ボーダーカスタム
一括指定
上下・左右一括指定
個別指定
ボーダースタイル
none
solid
dotted
dashed
double
inset
outset
ridge
groove
border : px ;
RED :
GREEN :
BLUE :
ボーダースタイル
none
solid
dotted
dashed
double
inset
outset
ridge
groove
border(topdown) : px ;
RED :
GREEN :
BLUE :
ボーダースタイル
none
solid
dotted
dashed
double
inset
outset
ridge
groove
border(side) : px ;
RED :
GREEN :
BLUE :
ボーダースタイル
none
solid
dotted
dashed
double
inset
outset
ridge
groove
border-top : px ;
RED :
GREEN :
BLUE :
※右側の空白です。見た目に分からないですが、適応されています。
ボーダースタイル
none
solid
dotted
dashed
double
inset
outset
ridge
groove
border-right : px ;
RED :
GREEN :
BLUE :
ボーダースタイル
none
solid
dotted
dashed
double
inset
outset
ridge
groove
border-bottom : px ;
RED :
GREEN :
BLUE :
ボーダースタイル
none
solid
dotted
dashed
double
inset
outset
ridge
groove
border-left : px ;
RED :
GREEN :
BLUE :
文字配置
文字左右寄せ
left
center
right
字間
letter-spacing : px ;
行間
line-height : em ;
背景色
RED :
GREEN :
BLUE :
プレビュー
小見出しサンプル
テキスト（書き出しクリックでプレビューにも適応されます）
HTML直接記述タグ
  • 「CSS書き出し」ボタンでタグ生成。
  • 「HTML直接記述タグ」内のタグを貼り付けるだけでカスタムした小見出しをブログなどで利用出来ます。
  • 各「色」を再指定をする場合は、必ず「RED」「GREEN」「BLUE」すべての指定（カラーバーにマウスを乗せる）をしてください。（指定しない部分には、前回設定分がそのまま残ります。意図した色と違う色になってしまいますのでご注意ください。）
  • βバージョンと言うことで、不具合報告宜しくお願いいたします。
このエントリーをはてなブックマークに追加
Mon.06.24.2013
Page Top
Comment
Trackback
Comment Form
質問するときは？
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
« PREV  Home   NEXT »
スタンダード・デザインラボ・Ninja
Tools
小見出しメーカーサンプル
Project
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.