見出しの見本市

見出しの見本

詳細は以下のページを参照
http://tabibitojin.com/blog-design-headline-css/

標準タイプ(塗りつぶし)

標準的に使える見出しデザインです。

塗りつぶし基本

見出しサンプル – 塗りつぶし01

角丸

見出しサンプル – 塗りつぶし02

影付き(ボックス)

見出しサンプル – 塗りつぶし03

影付き(ボックス – 内側)

見出しサンプル – 塗りつぶし04

影付き(テキスト)

見出しサンプル – 塗りつぶし05

影付き(ボックス – 内側 + テキスト)

見出しサンプル – 塗りつぶし06

標準タイプ(ワク)

枠デザイン基本

見出しサンプル – ワク01

角丸

見出しサンプル – ワク02

影付き(ボックス)

見出しサンプル – ワク03

影付き(ボックス – 内側1)

見出しサンプル – ワク041

影付き(ボックス – 内側2)

見出しサンプル – ワク042

影付き(テキスト)

見出しサンプル – ワク05

影付き(ボックス – 内側 + テキスト)

見出しサンプル – ワク06

左+下

見出しサンプル – ワク07

左+下(背景色あり)

見出しサンプル – ワク08

左+右

見出しサンプル – ワク09

上+下(シンプル)

見出しサンプル – ワク10

 グラデーション

 

ふっくらグラデーション

見出しサンプル – グラデ01

 

左右グラデーション1

見出しサンプル – グラで02

 

左右グラデーション2

見出しサンプル – グラで03

 

2色ふっくらグラデーション

見出しサンプル – グラで04

 

 特徴的な形 – 下三角

下三角

見出しサンプル – 特徴的01

下三角 – 白背景

見出しサンプル – 特徴的02

下三角 – 輪郭のみ

見出しサンプル – 特徴的03

下三角 – 上下のみ

見出しサンプル – 特徴的04

 特徴的な形 – 前後に丸

先頭に丸

見出しサンプル – 特徴的051

先頭に丸

見出しサンプル – 特徴的052

左右に丸

見出しサンプル – 特徴的06

 特徴的な形 – 前後に三角

先頭に三角

見出しサンプル – 特徴的071

最後に三角

見出しサンプル – 特徴的072

左右にに三角

見出しサンプル – 特徴的073

先頭に三角(反転)

見出しサンプル – 特徴的081

最後に三角(反転)

見出しサンプル – 特徴的082

左右にに三角(反転)

見出しサンプル – 特徴的083

右に三角リボン

見出しサンプル – 特徴的09

 特徴的な形 – 前後/上下に棒

先頭に棒

見出しサンプル – 特徴的101

左右に棒

見出しサンプル – 特徴的102

上に棒

見出しサンプル – 特徴的111

下に棒

見出しサンプル – 特徴的112

 特徴的な形 – 二重枠

2重ワク(背景色あり)

見出しサンプル – 特徴的121

2重ワク(背景色なし)

見出しサンプル – 特徴的122

2 Responses to “見出しの見本市”

  1. […] Google Chrome の開発ツールを使うと、リアルタイムで確認できるのでとっても便利です。 Google Chromeの開発者ツールでCSSを思いのままに操る!※)このページではプロテクトがかかっていて開発ツールは使えません。以下のテストサイトでお試しください。http://tabibitocafe.com/theme-keni-heading-design/sample001/ […]

  2. […] Google Chrome の開発ツールを使うと、リアルタイムで確認できるのでとっても便利です。 Google Chromeの開発者ツールでCSSを思いのままに操る! ※)このページではプロテクトがかかっていて開発ツールは使えません。以下のテストサイトでお試しください。 http://tabibitocafe.com/theme-keni-heading-design/sample001/ […]

サブコンテンツ

このページの先頭へ