CSSで作るタイトルバー/見出しデザインパーツ

この記事が良ければ、ぜひシェアお願いします

意外とWordPressのテーマで、タイトルバー/見出しとして使われるh1~h6タグのCSS定義がされていない場合って多いんですよね。テーマを適用してh3タグで見出しを書いてみたら、「あらら、なんか文字がちょっと大きくなっただけだぞ」なんてことが何度かありました。

タイトルバーを画像と組み合わせて使うパターンも個人的には好きなのですが、画像選定も考えるとCSSのみで定義できると便利ですよね。

今後のWEBサイト制作(&自分の備忘)も兼ねて、CSSで作るタイトルバー/見出しデザインのパーツを掲載していきます。

CSSで作るタイトルバー/見出しデザイン

セマンティックスなマークアップ HTML4編』でも書かさせてもらいましたが、記事タイトルや見出しはhxタグを使う方が構造的に理解してもらいやすいです。ですので、divタグを使って表現することもできますが、ご自分のサイトでCSS定義する際には属性クラスに適用することをオススメします。(このページでは、既存hxタグの定義と競合してしまうので、divタグにクラス指定をしています。)


CSSタイトルバー/見出しデザイン例1
.css-titlebar-ex1{
	font-size : 14px;
	font-weight : bold;
	color : #ffffff;
	background-color : #696969;
	text-align : center;
	letter-spacing : 1px;
	padding-left : 0px;
	line-height : 2em;
	width : 400px;
}


CSSタイトルバー/見出しデザイン例2

【CSS】

.css-titlebar-ex2{
	border-left:7px solid #696969;
	padding:.6em .8em
}


CSSタイトルバー/見出しデザイン例3

【CSS】

.css-titlebar-ex3{
	border-left:7px solid #696969;
	border-bottom:1px solid #696969;
	padding:.6em .8em
}


CSSタイトルバー/見出しデザイン例4

【CSS】

.css-titlebar-ex4{
	background:#eee;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:7px solid #e3297d;
	border-bottom:1px solid #ccc;
	padding:.8em .9em
}


CSSタイトルバー/見出しデザイン例5

【CSS】

.css-titlebar-ex5{
	background:#eee;
	border-bottom:7px solid #ccc;
	padding:.8em .9em .3em
}


CSSタイトルバー/見出しデザイン例6

【CSS】

.css-titlebar-ex6{
	background:#eee;
	border-left:7px double #ccc;
	padding:.8em .9em
}


CSSタイトルバー/見出しデザイン例7

【HTML】

<div class="css-titlebar-ex7a">
<h7 class="css-titlebar-ex7b">CSSタイトルバー/見出しデザイン例7</h7>
</div>

【CSS】

#post .css-titlebar-ex7a{
        border:#ccc solid 1px;
        display:block;
        padding:.2em .3em
}
#post .css-titlebar-ex7b{
        border-left:#ccc solid 6px;
        padding:.3em .3em .3em .8em
}


CSSタイトルバー/見出しデザイン例8
サブタイトルや説明文など

【HTML】

<div class="css-titlebar-ex8a">CSSタイトルバー/見出しデザイン例8
        <span class="css-titlebar-ex8b">サブタイトルや説明文など</span>
</div>

【CSS】

.css-titlebar-ex8a{
    border-left:7px solid #ccc;
    padding:.8em .9em;
    background-color: #ffffe0;
}
.css-titlebar-ex8b{
    display: block;
    padding-top:.2em;
    font-size:.8em;
    color:#ccc;
}


※引き続き執筆&修正中です。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク