SOICHI BLOG

【コピペOK】CSSで作るタイトル周りのデザイン
HOME > ホームページ制作 > CSS > 【コピペOK】CSSで作るタイトル周りのデザイン

【コピペOK】CSSで作るタイトル周りのデザイン

投稿日： 更新日：
CATEGORY
#

CSSだけで作れるタイトルのデザイン集です。ここを見てすぐ実装できるようにコピペできる形で掲載します。どんなタイトルデザインにしようか迷った時にも見返せるように記録に残しておきます。

シンプルな下線のみのデザイン

万能なデザインで、どんなタイプのサイトに入れても違和感はないと思います。borderのpx数を変更して下線幅を太くすれば力強いデザインになります。

DEMO

タイトルデザイン

HTML

<h3>タイトルデザイン</h3>

CSS

h3{
  border-bottom:solid 1px #ddd;
  padding:0 0.5em;
  font-weight:lighter;
  font-size:1em;
}

下線が点線になっているデザイン

上記のデザインの点線バージョンです。普通の線よりポップな印象になります。

DEMO

タイトルデザイン

HTML

<h3>タイトルデザイン</h3>

CSS

h3{
  border-bottom:dashed 1px #ddd;
  padding:0 0.5em;
}

下線が点線になっているデザインその2

一つ前のデザインにかなり似ていますがborderにdottedを指定して更に細かい点線となっています。

DEMO

タイトルデザイン

HTML

<h3>タイトルデザイン</h3>

CSS

h3{
  border-bottom:dotted 1px #555;
  padding:0 0.5em;
}

タイトル横に太線があるデザイン

こちらも良く見かけるデザインです。シンプルですが一目見てタイトルだと分かりますのでとても使い勝手がいいです。個人的にお気に入りですぐ使ってしまうデザインです。

DEMO

デザインパターン

HTML

<h3>タイトルデザイン</h3>

CSS

h3{
  border-left:solid 5px #555;
  padding:0.5em 0 0.5em 0.5em; 
}

タイトルを枠で囲んだデザイン

枠線で囲むタイプのデザイン。きっちりした印象になります。

DEMO

タイトルデザイン

HTML

<h3>タイトルデザイン</h3>

CSS

h3.title{
  border:solid 1px #aaa;
  padding:0.5em;
}

太線と枠を合わせたデザイン

先に紹介した「タイトル横に太線があるデザイン」と「タイトルを枠で囲んだデザイン」を合わせたようなデザイン。上記で紹介したデザインより目立ちやすく、一目みてタイトルだと分かるデザインです。

DEMO

タイトルデザイン

HTML

<h3>タイトルデザイン</h3>

CSS

h3{
  border:solid 1px #aaa;
  padding:0.5em 0.5em 0.5em 0.8em;
  position:relative;
  box-sizing:border-box;
}
h3:before{
  content:"";
  display:block;
  width:5px;
  height:calc(100% + 2px);
  background:#555;
  position:absolute;
  top:-1px;
  left:-1px;
}

角丸になった枠のデザイン

「タイトルを枠で囲んだデザイン」に角丸の要素を追加して柔らかい印象になります。

DEMO

タイトルデザイン

HTML

<h3>タイトルデザイン</h3>

CSS

h3{
  border:solid 1px #aaa;
  padding:0.5em;
  border-radius:5px;
}

タイトル前に記号がついたデザイン

タイトル前に★など記号を付けるデザイン。こちらはCSSの疑似要素で文字を入力しています。

DEMO

タイトルデザイン

HTML

<h3>タイトルデザイン</h3>

CSS

h3:before{
  content:"★";
  color:#ddd;
  font-weight:normal;
}

タイトルの文末から線が伸びるデザイン

タイトルの下ではなく、文末から横に線が伸びるデザイン。デザイン上2行になってしまうと違和感のある形になるため、短い単語のものや1行で収まるタイトルへの使用がおすすめ。

DEMO

タイトルデザイン

HTML

<h3><span>タイトルデザイン</span></h3>

CSS

h3{
  position:relative;
}
h3 span{
  display:inline-block;
  background:#fff;
  padding-right:0.5em;
}
h3:after{
  content:"";
  display:block;
  width:100%;
  z-index:-1;
  height:1px;
  background:#ddd;
  position:absolute;
  top:calc(50% - 1px);
  left:0;
}

タイトルの文末から線＋英文字のデザイン

こちらも1行での利用を推奨するデザインです。英字は疑似要素で作成しています。

DEMO

タイトルデザイン

HTML

<h3><span>タイトルデザイン</span></h3>

CSS

h3{
  position:relative;
  display:block;
}
h3 span{
  display:inline-block;
  background:#fff;
  padding-right:0.5em;
}
h3:before{
  content:"komidashi";
  display:inline-block;
  padding-left:1em;
  background:#fff;
  font-style:italic;
  letter-spacing:0.1em;
  color:#ddd;
  display:block;
  position:absolute;
  right:0;
  z-index:2;
}
h3:after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  background:#ddd;
  position:absolute;
  top:calc(50% - 1px);
  left:0;
  z-index:-1;
}

まとめ

CSSで作るタイトル周りのデザインでした。また、アイディアができたら追加していく予定です。

   

© 2025 - SOICHI BLOG