cssで実現!見出しで使えるタイトルロゴのデザイン

出典 : Designed by Freepik

画像を使わずCSSだけで実現できる、可愛いタイトルロゴのデザインの紹介です! ホームページやブログのヘッダー、見出しなどにはピッタリのデザインとなってます。

またオシャレというよりも可愛いをテーマにしたタイトルロゴ・見出しなので、女性をターゲットにしたサイトやブログにはピッタリかと思います。 掲載しているデザインは全てHTMLとCSSをコピペするだけで実装できるので、気に入ったのがあればぜひお試しを!

可愛いタイトルロゴ・見出しデザイン

掲載しているタイトルロゴ・見出しデザインの文字には、google fonts(webフォント)を使用しています。 google fonts(webフォント)の使い方・導入方法は下記のページを参考にして下さい。 3分くらいでとても簡単に実装できるのでお試しを。

Google Fontsの使い方と装飾方法
Google Fontsの使い方と装飾方法
Googleが提供しているwebサービスの「Google Web Fonts」は、無料で使用できるwebフォント...

また一部のタイトルロゴ・見出しデザインで「Lettering.JS」jQueryプラグインを使用しています。 導入に必要なコードはデザインごとに記述していますが、上記のプラグインをダウンロードし配置する必要があります。
ダウンロード(無料)は下記より

https://github.com/davatron5000/Lettering.js

ですが「Lettering.JS」では、HTMLコード内にspanタグを埋め込む目的で使用しているので、もしjQueryの導入方法がわからない場合は、手書きでspanタグを記述しても同様のデザインができます。

傾けた影付きのタイトルロゴ

スクリーンショット
  • 対応:PC,Mobile
  • 使用google fonts:Baloo Bhaina

丸めの可愛いデザインのグーグルフォントを傾けて、3種類の影を付けています。 それぞれの影の色を変える事で、立体的なタイトルロゴ風の見出しとなっています。 ただし背景の色が白の場合は、文字の色などを変更して使用して下さい。

HTML・CSSコードを見る

<p class="sample">Title and heading</p>
.sample{
  font-family: 'Baloo Bhaina', cursive;  /* 使うgoogle fontによって変更 */
  font-size: 47px;
  font-weight: bold;
  color: #fff;	
  margin: 0px;
  text-shadow: 3px 3px 0 #99bbe2, 6px 6px 0 #6798d2, 9px 9px 0 #2769b7;
  -webkit-transform: skewY(-7deg);  /* 傾きを調整 */
  -ms-transform: skewY(-7deg);
  -moz-transform: skewY(-7deg);
  -o-transform: skewY(-7deg);
  transform: skewY(-7deg);
}

トゥーンタウン風のタイトルロゴ・見出しデザイン

スクリーンショット
  • 対応:PC,Mobile
  • jquery使用
  • 使用google fonts:Wendy One

トゥーンタウンのパクリ風デザイン。 Lettering.JSを使用し、一文字ごとにspanタグを導入する事で、文字ごとに角度や大きさを調整しています。 また文字の縁取りや影などはtext-shadowで再現しています。

HTML・CSSコードを見る

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.lettering.js"></script>
<script>
	$(document).ready(function() {
		$(".sample").lettering();
	});
</script>

<!-- 省略 -->

<p class="sample">TOONTOWN</p>
/* 背景のデザイン */
body{
  background-color: #fd80a2;
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(255,255,255,0.04) 13px, rgba(255,255,255,0.04) 26px);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(255,255,255,0.04) 13px, rgba(255,255,255,0.04) 26px);
}
/* タイトルロゴ・見出しデザインの設定 */
.sample{
  font-family: 'Wendy One', sans-serif;
  text-shadow: 3px 3px 0px rgba(4,158,246,1), 0px 0px 2px rgba(4,158,246,1),0px 0px 2px rgba(4,158,246,1),0px 0px 2px rgba(4,158,246,1);
  letter-spacing: -6px;
  color:#FFD34B;
  margin:0;
}
.sample span{ 
  font-size: 60px;
  line-height: 40px;
  display: inline-block;
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.sample span:first-child{
  font-size:100px;
}
.sample span:nth-child(2n){
  -webkit-transform: translateX(-12px) translateY(-7px) scale(1.1) rotate(6deg);
  transform: translateX(-12px) translateY(-7px) scale(1.1) rotate(6deg);
}

.sample span:nth-child(3n){
  -webkit-transform: translateX(-10px) translateY(-10px) scale(1.1) rotate(10deg);
  transform: translateX(-10px) translateY(-10px) scale(1.1) rotate(10deg);
}

.sample span:nth-child(4n){
  -webkit-transform: translateX(-10px) scale(1.0) rotate(10deg);
  transform: translateX(-10px) scale(1.0) rotate(10deg);
}

.sample span:nth-child(5n){
  -webkit-transform: translateX(0px) scale(1.1) rotate(-10deg);
  transform: translateX(0px) scale(1.1) rotate(-10deg);
}

.sample span:nth-child(6n){
  -webkit-transform:  scale(1.2) rotate(8deg);
  transform: scale(1.2) rotate(8deg);
}

.sample span:nth-child(7n){
  -webkit-transform: scale(1.0) rotate(3deg);
  transform: scale(1.0) rotate(3deg);
}
.sample span:nth-child(8n){
  -webkit-transform: scale(1.2) rotate(10deg);
  transform: scale(1.2) rotate(10deg);
}

動きのある見出し・タイトルデザイン

スクリーンショット
  • 対応:PC,Mobile
  • jquery使用
  • Font Awesome使用

マウスホバーで隠れた文字が出現する、アニメーションのタイトルロゴです。 見出しに使えるかわかりませんが、検索フォームなどにピッタリかもしれません。 またLettering.JSで各文字にspanタグを入れてますが、テキストの最後に半角スペース(空白)を入れる用にして下さい。 またマークにfont awesomeのwebフォントを使用しているので、「font awesomeの使い方」を参考にし、導入して下さい。

HTML・CSSコードを見る

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.lettering.js"></script>
<script>
	$(document).ready(function() {
		$(".sample").lettering();
	});
</script>

<!-- 省略 -->

<h1 class="sample">AMAZON </h1>  <!-- 文字の最後に空白を入れる -->
.sample{
  font-size: 30px;
  width: 400px;
  height: 60px;
  position: relative;
  padding:0 0 0 92px;
}

.sample span{
  color: #fff;
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  margin: 25px 0 0 2px;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.sample span:nth-child(odd){
  background: #a3d39c;
}
.sample span:nth-child(even){
  background: #ffba00; 
}
.sample span:nth-child(1){
  -webkit-transform: translate(-100%, 20px);
  transform: translate(-100%, 20px);
}
.sample span:nth-child(2){
	-webkit-transform: translate(-200%, 0px);
	transform: translate(-200%, 0px);
}
.sample span:nth-child(3){
	-webkit-transform: translate(-300%, 60px);
	transform: translate(-300%, 60px);
}
.sample span:nth-child(4){
  -webkit-transform: translate(-400%, 0px);
  transform: translate(-400%, 0px);
}
.sample span:nth-child(5){
  -webkit-transform: translate(-500%, 100px);
  transform: translate(-500%, 100px);
}
.sample span:nth-child(6){
  -webkit-transform: translate(-600%, 0px);
  transform: translate(-600%, 0px);
}
.sample span:not(:last-child){
  font-family: "Arial Black", sans-serif;
  opacity: 0;
  pointer-events: none;
}
.sample span:last-child{
  position: absolute;
  top: 0;
  left: 0;
  width: 85px;
  height: 85px;
  margin: 0;
  background: #ffba00; 
  font-size: 50px;
  line-height: 85px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2), inset 1px 1px 30px rgba(255,167,0,0.3);
  z-index: 99;
}
.sample span:last-child:before{
  font-family: 'FontAwesome';
  content:"\f270";  /* マークにfontawesomeを使用 */
}
.sample:hover span:not(:last-child){
	opacity: 1;
	-webkit-transform: translate(0%);
	transform: translate(0%);
}
.sample:hover span:last-child{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

シンプルなアニメーションタイトル

スクリーンショット
  • 対応:PC,Mobile
  • jquery使用
  • Font Awesome使用

横にスライドして隠れた文字が出現するシンプルなアニメーションの見出し・タイトルデザインです。 jqueryを使用していますが、spanタグを文字ごとに入れるために使用しているので、手動でspanを入れてもらえれば動作します。 アニメーションはCSSで再現し、アイコンには同じくFont awesomeを使用しています。

HTML・CSSコードを見る

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.lettering.js"></script>
<script>
	$(document).ready(function() {
		$(".sample").lettering();
	});
</script>

<!-- 省略 -->

<h1 class="sample">AMAZON </h1>  <!-- 文字の最後に空白を入れる -->
.sample{
  font-size: 30px;
  width: 400px;
  height: 60px;
  position: relative;
  padding:0 0 0 92px;
}

.sample span{
  color: #fff;
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  margin: 25px 0 0 2px;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.sample span:nth-child(odd){
  background: #a3d39c;
}
.sample span:nth-child(even){
  background: #ffba00; 
}
.sample span:nth-child(1){
  -webkit-transform: translate(-100%) translate(20px);
  transform: translate(-100%) translate(20px);
}
.sample span:nth-child(2){
  -webkit-transform: translate(-200%) translate(40px);
  transform: translate(-200%) translate(40px);
}
.sample span:nth-child(3){
  -webkit-transform: translate(-300%) translate(60px);
  transform: translate(-300%) translate(60px);
}
.sample span:nth-child(4){
  -webkit-transform: translate(-400%) translate(80px);
  transform: translate(-400%) translate(80px);
}
.sample span:nth-child(5){
  -webkit-transform: translate(-500%) translate(100px);
  transform: translate(-500%) translate(100px);
}
.sample span:nth-child(6){
  -webkit-transform: translate(-600%) translate(120px);
  transform: translate(-600%) translate(120px);
}
.sample span:not(:last-child){
  font-family: "Arial Black", sans-serif;
  opacity: 0;
  pointer-events: none;
}
.sample span:last-child{
  position: absolute;
  top: 0;
  left: 0;
  width: 85px;
  height: 85px;
  margin: 0;
  background: #ffba00; 
  font-size: 50px;
  line-height: 85px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2), inset 1px 1px 30px rgba(255,167,0,0.3);
  z-index: 99;
}
.sample span:last-child:before{
  font-family: 'FontAwesome';
  content:"\f270";  /* マークにfontawesomeを使用 */
}
.sample:hover span:not(:last-child){
	opacity: 1;
	-webkit-transform: translate(0%);
	transform: translate(0%);
}
.sample:hover span:last-child{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

可愛い見出しデザイン

スクリーンショット
  • 対応:PC,Mobile
  • jquery使用
  • 使用google fonts:Baloo Bhaina

子供向けのような可愛い感じのタイトルロゴです。 ポップな感じにしたい時に是非!

HTML・CSSコードを見る

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.lettering.js"></script>
<script>
	$(document).ready(function() {
		$(".sample").lettering();
	});
</script>

<!-- 省略 -->

<h1 class="sample">AMAZON</h1>
.sample{
  color: #fff;
  font-family: 'Baloo Bhaina', cursive;
}

.sample span{ 
  background: #fbcdcf;
  display: inline-block;
  position: relative;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.9em;
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2), inset -1px -1px 8px rgba(255,255,255,1),inset 1px 1px 8px rgba(255,255,255,1);
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  text-align: center;
  margin: 0 15px 0 0;
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.sample span:nth-child(6n-4){
  background: #eae4f1;
  -webkit-transform: translateY(-3px) rotate(8deg);
  -ms-transform: translateY(-3px) rotate(8deg);
  transform: translateY(-3px) rotate(8deg);
}
.sample span:nth-child(6n-3){
  background: #ffd800;
  -webkit-transform: translateY(3px) rotate(-4deg);
  -ms-transform: translateY(3px) rotate(-4deg);
  transform: translateY(3px) rotate(-4deg);
}
.sample span:nth-child(6n-2){
  background: #6dcff6;
  -webkit-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
}
.sample span:nth-child(6n-1){
  background: #a2dcaa;
  -webkit-transform: translateY(-2px) rotate(-6deg);
  -ms-transform: translateY(-2px) rotate(-6deg);
  transform: translateY(-2px) rotate(-6deg);
}
.sample span:nth-child(6n){
  background: #f9b563;
  -webkit-transform: translateY(8px) rotate(12deg);
  -ms-transform: translateY(8px) rotate(12deg);
  transform: translateY(8px) rotate(12deg);
}

ホバーで広がる可愛いタイトルデザイン

スクリーンショット
  • 対応:PC,Mobile
  • jquery使用
  • 使用google fonts:Baloo Bhaina

マウスホバーで広がり、色がハッキリ映る可愛いタイトルデザインです。 動きのあるタイトルロゴにはもちろん、見出しにも使えるかもしれません。 ユニークな感じのデザインにしたい時にオススメです。

HTML・CSSコードを見る

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.lettering.js"></script>
<script>
	$(document).ready(function() {
		$(".sample").lettering();
	});
</script>

<!-- 省略 -->

<h1 class="sample">AMAZON</h1>
.sample{
  color: #fff;
  font-family: 'Baloo Bhaina', cursive;
}

.sample span{ 
  background: #fbcdcf;
  display: inline-block;
  position: relative;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.9em;
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2), inset -1px -1px 8px rgba(255,255,255,1),inset 1px 1px 8px rgba(255,255,255,1);
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  text-align: center;
  margin: 0 15px 0 0;
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.sample span:nth-child(1){
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  display: inline-block;
  z-index:99;
}

.sample span:nth-child(2){
  background: #eae4f1;
  -webkit-transform: translate(-150%) translate(40px) translateY(-3px) rotate(8deg);
  -ms-transform: translate(-150%) translate(40px) translateY(-3px) rotate(8deg);
  transform: translate(-150%) translate(40px) translateY(-3px) rotate(8deg);
}

.sample span:nth-child(3){
  background: #ffd800;
  -webkit-transform: translate(-250%) translate(60px) translateY(3px) rotate(-4deg);
  -ms-transform: translate(-250%) translate(60px) translateY(3px) rotate(-4deg);
  transform: translate(-250%) translate(60px) translateY(3px) rotate(-4deg);
}
.sample span:nth-child(4){
  background: #6dcff6;
  -webkit-transform: translate(-350%) translate(80px) rotate(6deg);
  -ms-transform: translate(-350%) translate(80px) rotate(6deg);
  transform: translate(-350%) translate(80px) rotate(6deg);
}
.sample span:nth-child(5){
  background: #a2dcaa;
  -webkit-transform: translate(-450%) translate(100px) translateY(-2px) rotate(-6deg);
  -ms-transform: translate(-450%) translate(100px) translateY(-2px) rotate(-6deg);
  transform: translate(-450%) translate(100px) translateY(-2px) rotate(-6deg);
}
.sample span:nth-child(6){
  background: #f9b563;
  -webkit-transform: translate(-550%) translate(120px) translateY(8px) rotate(12deg);
  -ms-transform: translate(-550%) translate(120px) translateY(8px) rotate(12deg);
  transform: translate(-550%) translate(120px) translateY(8px) rotate(12deg);
}
.sample span:not(:first-child){
  opacity: 0.3;
  pointer-events: none;
}
.sample:hover span:not(:first-child){
    opacity: 1;
    -webkit-transform: translate(0%);
    transform: translate(0%);
}

各タイトルロゴ・見出しデザインの設定方法

出典 : Designed by Freepik

各タイトルロゴ・見出しデザインでは、「Lettering.JS」jQueryプラグインを使って、文字ごとにspanタグを挿入しています。 jQueryの導入方法がわからない場合は、手動で文字ごとにspanタグを入れてもらえれば問題なくCSSが反映されます。

また文字の角度や大きさなどは、挿入したspanタグごとに設定しています。 translateX(~px)で左右の移動、translateY(~px)で上下の移動距離を設定しています。 scale(~)は文字の拡大、rotate(~)で文字の傾きを指定しています。

また3番目、4番目、6番目に掲載した「動きのある見出し・タイトルデザイン」「シンプルなアニメーションタイトル」「ホバーで広がる可愛いタイトルデザイン」は、ちょうど6文字でのタイトルを想定した設定しかしていないため、文字数を増減させる場合、CSSコードを追加する必要があります。

例えば文字を増やす場合であれば.sample span:nth-child(7){~}というように()内の番号を増やし、お好みで角度や移動距離などを設定して下さい。 また減らす場合であれば、.sample span:nth-child(6){~}の部分を削除して下さい。

上記以外のタイトルロゴ・見出しデザインのサンプルであれば、何文字でも問題なくCSSが反映されます。 また一部font awesomeのアイコンフォントを使用していますが、ホームページやブログの方で読み込めるようにしてもらうだけで使えるので是非お試しください。

まとめ

こんな感じでCSSだけでも動きのあるアニメーションロゴタイトルや、画像のような見出しを作ることができます。 今回はjQueryを使ってますが、あくまでspanタグを挿入する目的でしか使用してないので、完全にCSSだけでの再現となってます。

あと、とりあえず可愛いくポップな感じのタイトルデザインを紹介したかったので、使えそうなものがあるかわかりませんが、気に入ったのがあればぜひ使って見て下さいね!