CSSでタイトルバー(見出し)を表現したい!

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

Last search itemsを見ると、タイトルバー(=見出し)をCSSでどう表現したらよいのかなぁと悩んでいる人が多い人を見かけます。ちょっと前だと、backgroundに画像を指定して、タイトルバーを表現するのが一般的でしたが、「もはや画像を使うのも面倒くさい!」と思う人も多いのではないかと思います。(私もそんな一人です)

最近、自分でテーマをカスタマイズするにあたって、その作者が作っているスタイルに引っ張られることがしばしばあり、やっぱりテーマは自分で作った方がいいなぁと思いつつ、今回はCSSでの一般的なタイトルバーをご紹介したいと思います。

ちなみに、凝ったタイトルバーにしたい方は、素材サイトは下記のサイトを参考にされると良いと思います!

>素材パーツ「タイトルバー・見出しデザイン(CSS)」

CSSのみでのタイトルバー

上のように私のサイトでも使っている赤のタイトルバーですが、こちらもCSSだけで表現しています。もちろん、画像を使っていないので、通信料が削減できるというメリットもありますが、全てこのコードで統一しているので、テーマを変えた場合でもちょっとした変更だけでタイトルバーの色合いも変えられるというメリットがあります。

ちなみに、コードの書き方としては、CSSにこのようなコードを埋め込んでおけばOKです!

.titlebar{
font-size: 16px;  /* フォントサイズ */
color: #202020;  /* フォントカラー */
padding: 3px 0px 3px 20px ;  /* 内側の余白指定 */
font-weight : bold ;  /* フォントウェイト */
border-left: solid 15px #c8575c;  /* 左ボーダーのスタイル */
border-bottom: solid 1px #c8575c;  /* 下ボーダーのスタイル */
background: #ffffff;  /* 背景色 */
}

フォントサイズや余白指定など、それぞれ不明な点はCSSリファレンスに従ってアレンジしてもらって構いません!ちなみに、border-leftで指定している”solid”を”double”や”groove”など、ちょっと違う見せ方にすることもできますよ!

『まずはブログサイトとして体裁を整えたい』という方には良いと思います。ちなみに、セマンティックスなマークアップ編でもお伝えしましたが、単純にdivタグでclass指定するのでも良いですが、見出しとして使うのであれば、hxタグを使うのが良いと思いますよ。

スポンサーリンク

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

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