Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

CSSだけでカッコよく作る見出し(hタグ)デザイン(サンプル付き)

更新日:

CSSだけでカッコよく作る見出し(hタグ)デザイン(サンプル付き)

サイトを作っているときに、「カッコよくhタグをデザインしたいな~」って
思ったときがあって、でも「画像は使いたくない」ということがあります。

参考 RedTeamDesign

いろいろ調べて、制作のときに使ったことがあるスタイル、いつか使ってみようと思ったhタグのスタイルをご紹介します。

photo credit: Jeff Croft via photopin cc

CSSのみ使った見出し

※左の縦のボーダーは無視してください。

見出し

.midashi1 {
	border-bottom: 1px dashed #aaa;
	border-left: 7px solid #aaa;		
	border-left: 7px solid rgba(0,0,0,.2);
	margin: 0 -15px 15px -22px;
	padding: 5px 15px;
}

見出し

.midashi2 {
	border-bottom: 1px solid #aaa;
	margin: 15px 0;
	padding: 5px 0;
	position: relative;
}

.midashi2:before,
.midashi2:after {
	content: '';
	border-right: 20px solid #fff;
	border-top: 15px solid #aaa;
	bottom: -15px;
	position: absolute;
	left: 25px;
}

.midashi2:after {
	border-top-color: #fff;
	border-right-color: transparent;
	bottom: -13px;
	left: 26px;
}

見出し

.midashi3 {
  position: relative;
  margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
  margin-right: -22px;
  padding: 15px;
  background: #e5e5e5;
  background: linear-gradient(#f5f5f5, #e5e5e5);
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
}

.midashi3:before,
.midashi3:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  content:'';
  border-top: 6px solid #555;
  border-left: 6px solid transparent;
}

.midashi3:before {
  border-top: 6px solid #555;
  border-right: 6px solid transparent;
  border-left: none;
  left: auto;
  right: 0;
  bottom: -6px;
}

見出し

.midashi4 {
	position: relative;
	border-color: #eee;
	border-style: solid;
	border-width: 5px 5px 5px 0;
	background: #fff;
	/*margin: 0 0 15px -15px;*/
	padding: 5px 15px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.midashi4:after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 15px;
	right: 15px;
	width: 70%;
	height: 10px;
	background: rgba(0, 0, 0, .7);
	box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
	transform: rotate(2deg);		
}

見出し

.midashi5 {
    overflow: hidden;
    text-align: center;
}

.midashi5 span:before {
    margin-right: 0.5em;
    right: 100%;
}

.midashi5 span:before,
.midashi5 span:after {
    border-bottom: 2px solid #999999;
    border-top: 2px solid #999999;
    content: "";
    height: 0.4em;
    margin-top: -0.2em;
    position: absolute;
    top: 50%;
    width: 200em;
}

.midashi5 span:after {
    left: 100%;
    margin-left: 0.5em;
}

.midashi5 span:before,
.midashi5 span:after {
    border-bottom: 2px solid #999999;
    border-top: 2px solid #999999;
    content: "";
    height: 0.4em;
    margin-top: -0.2em;
    position: absolute;
    top: 50%;
    width: 200em;
}

.midashi5 span {
    position: relative;
}

見出し

.midashi6 {
    background: none repeat scroll 0 0 #222222;
    color: #555555;
    font-size: 22px;
    margin: 0 auto;
    padding: 20px;
    text-shadow: 0 2px 3px #171717;
}

見出し

.midashi7 {
	background:#eee;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:7px solid #e3297d;
	border-bottom:1px solid #ccc;
	padding:.3em .4em;
	font-size: 22px;
}

見出し

.midashi8 {
	background:#eee;
	border-left:7px solid #ccc;
	padding:.3em .4em;
	font-size: 22px;
}

見出し

.midashi9{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:.3em .4em;
	font-size: 22px;
}

見出し

.midashi10{
     text-shadow: 0px -2px 0px #333,
                  0px 2px 3px #666;
				  background-color: #333;
				  font-size: 22px;
				  padding:.3em .4em;
}

まとめ

これらのスタイルで作った見出しのサンプルをつくりました!

[サンプル] CSSだけでカッコよく作る見出し(hタグ)デザイン

ぜひ、試してみてください。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.