MENU
旅人の日常世界
  1. ホーム
  2. WEBデザイン
  3. 【文字デザイン】おしゃれな見出し参考例と作成方法

【文字デザイン】おしゃれな見出し参考例と作成方法

広告
WEBデザイン WordPress

ホームページにはタイトル（見出し）を付けてテキスト文を書くことが多いので、見出しを変わったデザインに変更したり、可愛らしくしたいという方に向けてCSSにてどのようなデザインが作成できるのかをコードを入れていていきます。

コピペOK !!
誰でもすぐに見出しをデザインできます

目次

しんぷるな見出し

タイトルはh1〜h6まであります。見出しの大きさ設定によってはh1やh3など違う見出しに使用する方も多いと思います。

<h2></h2>の箇所を<h1></h1>、<h3></h3>に変更して使用していただければ問題ありません。

h1~h6まで違うの使っているけれど、タイトルのデザインを変更したいという方にも対応できるようなコード入力方法も一緒に解説をしていきます。

タイトルデザインをする前にチェックするべきポイントがあります。

タイトル幅（h2）を変更すると左によってしまうことからタイトル全体が中心に配置することができません。

<div></div>を利用してdiv要素に「text-align:center;」を使いタイトル（h2）には「margin:0 auto;」を使うことでwidthを変更した際にタイトル全体を中心に配置することが可能になります。

下記デザインは文字サイズ、h2幅サイズの調コードは入れていません。
お好きな文字サイズ、width、height指定をお願い致します。

コード入力方法は「単色＋左線」のデザイン例にて解説しています。

h1~h6以外でタイトルにデザインをしたい場合はdiv要素を使用してCSSにて書きかることで対応が可能です。

この記事では「h2」を使用して解説をしていきます。

下線・上下線・点線・左線

一本下線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
	border-bottom: solid 4px #000000;
	padding: 10px 0;
    text-align:center;
}

線を引くコードは【border】を使用します。下に線を引くので【bottom】を使用

border-bottmと記載。

左：border-left

右：border-right

上：border-top

【solid】はしんぷるな1本線で表示されます。

線の太さを「4px」設定。線を細くしたい場合は1px、2pxと設定変更をお願いします。線の色は黒コードを入力しています。

【 text-align : center ; 】は文字を中央に設定しているコードです。

二重下線-1

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
	border-bottom: double 5px #000000;
	padding: 10px 0;
    text-align:center;
}

二重線は【double】を使用。

一本線の4pxは線の太さですが二重線の場合は線と線の間が5pxという見方になります。

二重下線-2

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2{
    border-bottom:solid 3px;
    padding-bottom:5px;
    margin-bottom:15px;
    position:relative;
    font-weight:normal;
}

h2:after {
    content:'';
    width:100%;
    height:1px;
    background-color:#000;
    display:block;
    position:absolute;
    left:0;
    bottom:-6px;
}

上の線を太くした二重線です。

点線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
	 border-bottom: 3px dotted #000;
	padding: 10px 0;
    text-align:center;
}

次は文字の色と線の色を変更してみましょう。

文字と点線の色を変更

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
	border-bottom: dashed 2px #00008b;
	padding: 10px 0;
    color:#ff0000;
    text-align:center;
}

書体を変更したい場合は「font-family」を使用します。

h2 {
  border-bottom: dashed 2px #00008b;
  padding: 10px 0;
  color:#ff0000;
  font-family:sans-serif;
  text-align:center;
}

左線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  padding: 0.2em 0.5em;
  border-left: solid 4px #892F23;
  text-align:center;
}

paddingの「 0.2em 0.5em」は上下左右の余白をどのくらい空けるかを示している数値です。

線を細くしたい場合は1px。太くしたい場合は3px以上に変更をお願いします。

左2重線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  padding: 0.2em 0.5em;
  border-left: 8px double #892F23;
  text-align:center;
}

上下線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  padding: 0.5rem 1rem;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  text-align:center;
}

上下点線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  padding: 0.5rem 1rem;
  border-top: 2px dotted #000;
  border-bottom: 2px dotted #000;
  text-align:center;
}

border-top、border-bottomの○pxは点の大きさです。3pxにすると大きくなり、1pxにすると小さくなります。

上下波線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  padding: 0.5rem 1rem;
  border-top: 3px dashed #000;
  border-bottom: 3px dashed #000;
  text-align:center;
}

今回は3pxに指定していますが、1~2pxにすると小さく細かい点線に近いものになります。
pxの数値を増やすと太く濃い破線になります。

背景色をつける

背景色を付けることでh1~h6のデザインの区別をつけることができて便利です。

単色を使ったシンプルな背景色

見出しデザイン

背景色を付ける際のCSSコードは「backgroud」を使用

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
　　background: #fafad2;
   text-align:center;
}

backgroudは色だけではなく背景画像としても利用されます。
コード：background-image:url(◯◯◯◯◯◯◯);

単色＋左線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
   border-left: 4px solid #FF66C4;
   background: #fafad2;
   text-align:center;
}

文字のみを中央に設定をしているが、h2を中央に設定はしていません

このままコピペだけすると下記のように全体の幅に対して文字が中央により、左線とのバランスが悪くなってしまいます。

見出しデザイン

どのようにしてh2を中央に配置するのか？

<div class="title-design">
<h2>
見出しデザイン
</h2>
</div>
.title-design{
	width:auto;
	height:auto;
	text-align:center;
}

.title-design h2{	
  border-left: 4px solid #FF66C4;
  background: #fafad2;
	
  width:250px;
	font-size:30px;
	margin:0 auto;
}

div要素を中央に配置して、h2は幅と文字サイズを入力、そして「margin:0 auto;」を入れることで文字が中央に寄ります

h2の文字大きさをfont-size:30px;、幅をwidth:250px;にて設定をしています。

詳細は別ページにて解説をしていきます

単色＋上線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {	
 border-top: 4px solid #FF66C4;
 background: #fafad2;
 text-align:center;
}

単色＋下線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  
　　padding: 1rem 2rem;
　　border-bottom: 2px solid #FF66C4;
　　background: #fafad2;
　　text-align:center;
}
ポイント 幅と高さを指定する場合は「width」「height」を使用して調整をしていきましょう。

色コードはWEB上に公開されています。

原色大辞典
日本の伝統色 和色大辞典 - Traditional Colors of Japan 日本の伝統色の名前とカラーコードが一目でわかるWEB色見本

おしゃれ見出しデザイン

背景や線は単色設定をしていましたが、ここからはデザインしてみましょう。

下線デザイン

2つの色を使用した下線

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  width:150px;
  text-align:center;

  border-bottom: solid 3px #004AAD;
  position: relative;
}

h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #FF914D;
  bottom: -3px;
  width: 30%;
}
ポイント 【position:relative;】 は単体では使用せず、【position: absolute;】と一緒に使用することが多いです。

「after」にて2色目の色の設置コードを入力します。width:30%;は重ね色の割合を示した数値です。h2のbottomは3pxにしているため「h2:after」のbottomを「-3px」にしてあります。

relative以外に使用されるのは下記4つです。

・fixed
・absolute
・static
・sticky

現在位置から相対位置を指定するposition: relative;

width: ○○%;は色の幅を指定しています。50%に指定すると半分で色が分かれます。

線先下線を矢印

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  position: relative;
  padding-left: 25px;
}

h2:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px #ee82ee;
}
h2:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px #ee82ee;
}

下線をストライプ

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
.h2 {
  position: relative;
	width:300px;
}
.h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

立体感のある見出し

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  color: #494949;
  background: #f4f4f4;
  border-left: solid 4px #FF914D;
  border-bottom: solid 2px #d7d7d7;
}

下線に色を入れることで立体的に見せています。

シャドウを入れたボックスデザイン

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  background: #DEF5F6;
  box-shadow: 0 0 4px #AFADAD;
}

box-shadowを入れることで背景に影をつけることが可能になります。

paddingを入れることで文字と囲いの幅調整が可能です。

グラデーションを入れる

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
   background: linear-gradient(to right, rgb(255, 86, 170), rgb(255, 255, 86));
   background-repeat: no-repeat;
   color: white;
   font-weight: bold;
}

全体を線を囲む

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  border: solid 2px #364e96;
  border-radius: 0.5em;/*角丸*/
}

角を丸くする「border-radius」を使用していますが、丸くしたくない場合は使用せずborderだけにしましょう。

上下左右の指定を指定なため囲む線になります。線の太さを2pxにしています。

付箋

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
    position: relative;
    margin-bottom: 0.2rem;
    border-left: 30px solid #EF9293;
    background-color: #fef4f4;
    color: #212121;
}

左側のカラー幅を変更したい場合はborder-leftの○pxを変更してください。

影付き付箋

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
    position: relative;
    margin-bottom: 0.2rem;
    border-left: 30px solid #EF9293;
    background-color: #fef4f4;
    color: #212121;
}

h2:after {
  position: absolute;
    right: 1px;
    bottom: 10px;
    width: 50%;
    height: 50%;
    box-shadow: 0 10px 15px #333;
    transform: rotate(4deg);
    z-index: -1;
    content: '';
}

ステッチ風

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  
}

ステッチの色を変更してみましょう。

見出しデザイン

ステッチの色を「白色」に変更
h2 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  
}

角を折り曲げたデザイン

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2{
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  color: #454545;
}

h2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

先端を尖らせる

見出しデザイン

HTML・CSSコード
h2{
　position: relative;
　padding: 5px 5px 5px 42px;
　background: #4169e1;
　color:#ffffff;
　line-height: 1.3;
　z-index:-1;
}

h2:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

両先端を尖らせる

見出しデザイン

HTML・CSSコード
h2 {
　position: relative;
  padding: 5px 26px 5px 42px;
  background: #4169e1;
  color: #ffffff;
  line-height: 1.3;
  z-index:-2;
}

h2:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}
h2:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}

両先端を尖らせる+下線を引く

見出しデザイン

HTML・CSSコード
h2 {
 position: relative;
 padding: 5px 26px 5px 42px;
 background: #fff0d9;
 line-height: 1.3;
 border-bottom: solid 3px orange;
 z-index:-2;
}

h2:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

h2:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}

背景をずらす

見出しデザイン

HTML・CSSコード
:root {
    --accent-color: #b2d5de;
}

.title-design43 {
	font-size:26px;
	margin:auto;
	margin-bottom: 0.2rem;
  box-shadow: 5px 5px 0 var(--accent-color);
  border: 2px solid var(--accent-color);
  color: #353535;
  font-weight: bold;
  text-align: center;  
}

「padding」を使用して上下空白の間隔を広げることが可能です。

「width」を使用して幅を調整してみましょう。

左右に線を配置

見出しデザイン

HTML・CSSコード
<h2>見出しデザイン</h2>
h2{
    display: flex;
	justify-content: center;
	align-items: center;
	font-size:20px;
}
h2::before,
h2::after {
	content: '';
	width: 50px;
	height: 3px;
	background-color: #e3bf00;
}

h2::before {
	margin-right: 20px;
}
h2::after {
	margin-left: 20px;
}

線の長さを変更させたい場合は「h2::before,h2::after」のwidthを変更させませす。

文字の大きさを変更した場合にタイトルが２行になることがあるため、全体のwidthを変更した場合はh2[ }にwidth設定をすることで全体の幅変更が可能です。

1 2
WEBデザイン WordPress
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次