CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。
CSSのみで実装するシンプルな見出しデザイン21パターン
蛍光ペンのような線をひいたCSS見出しデザイン
蛍光ペンで線を引いたような見出しデザインです。display: inline
で複数行にも対応させています。
2色を重ねた線とCSS見出しデザイン
2色の線を重ねたような見出しデザインです。青の線は疑似要素を使ってposition: absolute
で配置しています。left: 50%
とtransform: translateX(-50%)
で中央に配置しています。左側に配置したい場合はleft: 0
で実装可能です。
左右に線を配置したCSS見出しデザイン
疑似要素2つを使って線を表現したデザインです。
線2本とテキストをflexboxを使用して上下左右の中央配置にして、::before { margin-right: 20px }
と::after { margin-left: 20px }
でテキストと線の間の余白を指定しています。
吹き出しのCSS見出しデザイン
左右に線を配置した見出しの線をtransform: rotate
で回転させて吹き出しのように見せています。
大文字英字と斜め線の見出しデザイン
text-transform: uppercase
で大文字にした英字と疑似要素::after
で斜めの線を表現した見出しデザインです。
今回は英字をdata属性で表示しています。疑似要素::before
のcontent: attr(data-en)
でHTMLのdata-en="Recruit"
を読み込み、スタイルを施しています。これはRecruitを<span>
で括っても良いです。
斜線はleft: 50%
とtransform: translate(-50%) rotate(30deg)
で回転させて斜めにし、中央配置にしています。
半透明の英字と斜め線の見出しデザイン
大文字英字と斜め線の見出しの英字を半透明にして背景にした見出しデザインです。position: absolute
とtop: -20px
left: 50%
transform: translateX(-50%)
で左右中央の上に少しずらして配置しています。
英字のフォントによってはフォントサイズや配置の変更が必要になるので調整が難しいスタイルではありますが、バランス良く配置できるとおしゃれになります。
手書き風の英字と見出しデザイン
手書き風のフォントを使った英字と組み合わせた見出しデザイン。今回はAdobe FontsのLuxus Brutを使用してみました。
疑似要素::before
でcontent: attr(data-en)
を使ってテキストを読み込み、スタイルを指定しています。transform: rotate(-5deg)
でテキストを斜めに表現しています。
このテキストを斜めに傾ける表現ですが、フォントのデザインによっては効果的になります。今回のような大文字と小文字のサイズが大きく違う手書き風フォントのであれば、違和感で目を留めやすく斜めにしてもバランス良く見えるので、私はよく利用しています。
線と英字を組み合わせた見出しデザイン01
シンプルに線と英字をメインの見出しの上に配置したデザイン。
英字を<span>
で括り、<span>
の疑似要素::before
で線を表現。
<span>
内のテキストと疑似要素の線をdisplay: flex
とalign-items: center
で上下中央配置にしています。
線と英字を組み合わせた見出しデザイン02
線と英字を組み合わせた見出し01とは別の方法で、英字をdata属性を使って読み込んでいます。
線と英字を組み合わせた見出しデザイン03
英字を背景にして下線をひいた見出しデザイン。メインの見出し(日本語)と英字の重なりの関係からメインの見出しを<span>
で括り、z-index
で重なり順を指定しています。
数字と線を組み合わせた見出しデザイン01
疑似要素::before
のcontent: attr(data-number)
で数字を読み込み、margin-bottom: 30px
メインの見出し(日本語)との間に余白を指定。
::after
で線を表現して、position: absolute
で英字の下に配置しています。
数字と線を組み合わせた見出しデザイン02
数字と見出しを横並びにしたデザイン。テキスト量が多くなる場合には見出しにpadding-left: 30px
で余白をあけてから、疑似要素::before
をposition: absolute
で配置することで改行位置を整えることができます。
数字と線を組み合わせた見出しデザイン03
線と数字をシンプルに配置した見出しデザイン。数字を英字にしても使えますね。
data-number="03"
でなくとも<span>
でも問題ないです。
数字と線を組み合わせた見出しデザイン04
半透明の数字と背景にして見出しと重ねたデザイン。テキスト量が多くなって改行する場合にはバランスが崩れやすいので数字の配置には気をつけてください。
シンプルに丸と組み合わせた見出しデザイン
見出しの下に丸をつけたシンプルなデザイン。あまり装飾を施したくないシンプルなサイトで使えます。
シンプルに三角と組み合わせた見出しデザイン
見出しの下に三角をつけたシンプルなデザイン。こちらもシンプルなサイトによく使います。小見出しが多いですね。
縦線を施したCSS見出し
background-image: repeating-linear-gradient
で縦線を繰り返して表現させています。
background-size: 4px 4px
で繰り返す背景(縦線)のサイズ線を指定。同時に線幅も指定しています。
背景をbackground-repeat: repeat-x
で横に繰り返し、background-position: center bottom
で要素のbottomに配置すれば、縦線のあしらいが完成です。
padding-bottom: 10px
は縦線との余白をとっています。前後の要素とのバランスで調整してください。
破線を施したCSS見出し
縦線を施した見出しの別パターン。破線はborder
でも実装可能ですが、線との幅を自由に調整ができるので、線と線との間の余白をあけたい場合にはこちらのスタイルを指定しています。
斜線を施したCSS見出し
こちらも縦線を施した見出しの別パターン。
height: 8px
とbackground-size: 8px 8px
に同じ数値を指定。これで線幅を調整しています。
網掛け線を施したCSS見出し
斜線を施した見出しの線に逆角度から同じ線をひいた網掛け線の見出しデザインです。
斜線を背景にしたCSS見出しデザイン
斜線を施した見出しの斜線を背景にしたデザイン。若干線の幅を太くするとバランスが良くなります。重なり順を調整するために<span>
を使用しています。
本拙著『Webデザインアイデアレシピ』には、本記事の内容の他にもボタンデザインや画像装飾、レイアウトに使えるCSS Tipsを多数紹介しています。