Written by Manabu Bannai

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

CSS PROGRAMMING


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

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

まずは大見出しから。

大見出しh2

CSSは以下です。

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

次に、中見出しです。

中身出しh3

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;
}

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。