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

Sedori Plan

Web

CSSだけで簡単に作る見出し(hタグ)デザイン2(サンプル付き)

投稿日:

CSSだけで簡単に作る見出し(hタグ)デザイン2(サンプル付き)
以前の「CSSだけでカッコよく作る見出し(hタグ)デザイン(サンプル付き)」が好評でしたのでまたまとめてみました。

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

photo credit: POPOEVER via photopin cc

CSSのみ使った見出し

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

CSSのみ使った見出し

.midashi11 {
	background: none repeat scroll 0 0 #009FE3;
	border-radius: 6px 6px 6px 6px;
	clear: both;
	color: #FFFFFF;
	font-size: 116%;
	margin: 30px 0 20px;
	padding: 12px 0 10px 16px;
}

CSSのみ使った見出し

.midashi12 {
	border-left: 8px solid #2B4247;
	clear: both;
	display: block;
	font-size: 116%;
	height: 22px;
	line-height: 22px;
	margin-bottom: 15px;
	margin-top: 80px;
	padding-left: 10px;
}

CSSのみ使った見出し

.midashi13 {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background-color: #F9F9F9;
	border-color: #88ABDA;
	border-image: none;
	border-radius: 3px 3px 3px 3px;
	border-style: solid;
	border-width: 1px 1px 1px 5px;
	font-size: 116%;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 15px;
}

CSSのみ使った見出し

.midashi14 {
	border-bottom: 1px solid #CCC;
	border-top: 2px solid #F60;
	padding: 15px 0 15px 10px;
	font-size: 116%;
}

CSSのみ使った見出し

.midashi15 {
	background-color: #F3F3F3;
    border-bottom: 1px dotted #666666;
    border-top: 1px dotted #666666;
    font-size: 116%;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 15px;
}

CSSのみ使った見出し

.midashi16 {
    background-color: #FAF3DE;
    background-image: none;
    border-color: #CCCCCC #CCCCCC #634D24;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    color: #333333;
    font-size: 116%;
    font-weight: bold;
    line-height: 1.5em;
    padding: 15px;
}

CSSのみ使った見出し

.midashi17 {
	background: none repeat scroll 0 0 #FF6600;
    border-right: 440px solid #EEEEEE;
    color: #FFFFFF;
    text-align: left;
    width: 200px;
	padding: 15px;
	font-size: 116%;
}

CSSのみ使った見出し

.midashi18 {
    color: #ffffff ;
    background: #ec524e;
    font-size: 116%;
    padding: 15px;
    box-shadow:1px 3px 7px 0px  #ccc ;
    border-top:3px solid #ea9878;
}

CSSのみ使った見出し

.midashi19 {
	font-family: times, Times New Roman, times-roman, georgia, serif;
	color: #444;
	margin: 0;
	padding: 0px 0px 6px 0px;
	font-size: 51px;
	line-height: 44px;
	letter-spacing: -2px;
	font-weight: bold;
}

まとめ

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

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

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

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

しん

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

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.