2014/01/03 (更新日: 2016/08/13)

【CSS】コピペで超簡単に作れる大見出し・中見出しのまとめ

見出しって大事ですよね。

記事を読んでいて、見出しがないと途中で飽きたりしてきます。
そこで今回は、CSSで超簡単に作れる見出しまとめを書いていきます。

まずは大見出しから。

大見出しh2

CSSは以下です。

h2 {
    border-bottom: 1px dotted #2795b6;
    border-left: 8px solid #2795b6;
    padding: 9px 8px;
    font-size: 24px;
    color: #2d2d2d;
}

次に、中見出しです。

CSSは以下です。

h3 {
    font-size: 20px;
    padding-left: 11px;
    border-left: solid 10px #2795b6;
    margin-left: 3px;
    color: #2d2d2d;
}

以下は、おまけです。
ちょっと凝った見出しを使いたい人向け。

見出しh2-2

CSSは以下です。

h2 {
	font-size: 20px;
	padding-top: 15px;
	padding-bottom: 8px;
	padding-left: 46px;
	background-image: url(https://manablog.org/wp-content/themes/karui/images/mokuji.png);
	background-repeat: no-repeat;
	background-position: left center;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #6D9AB7;
}

※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。

CSS