「CSS」のみで作る タイトル・見出しのデザイン

画像を使わない「CSS」のみで作れる、ページタイトルや記事の小見出しタイトル（h1~h6）のデザインとして使えそうなアイデアを考えてみました。

各コードサンプルも掲載していますので、よろしければご参考ください。

サンプルのカラーは、グレー系を使用していますが、サイトのデザインに合わせて変更してみてください。また、タイトルは、h3で作成していますが、こちらもサイトの構成に合わせてほかのタグに変更してください。

また、思い付き次第追加していきたいと思います。

独自ドメインがずっと無料！国内シェアNo.1【ロリポップ！】

全タイプ一覧

タイプ一覧はこちらからどうぞ

下記にそれぞれのコードサンプルがあります。

罫線タイプ

左二重線

See the Pen Title design - Left double line by web-basic-archive (@web-basic-archive) on CodePen.

左二重線 + 下線

See the Pen Title design - Left double line + underline by web-basic-archive (@web-basic-archive) on CodePen.

上下線

See the Pen Title design - Up and down line by web-basic-archive (@web-basic-archive) on CodePen.

上下二重線

See the Pen Title design - Up and down double line by web-basic-archive (@web-basic-archive) on CodePen.

左線スラッシュ

See the Pen Title design - Left line slash by web-basic-archive (@web-basic-archive) on CodePen.

左線スラッシュ + 下線

See the Pen Title design - Left line slash + underline by web-basic-archive (@web-basic-archive) on CodePen.

左右水平線

See the Pen Title design -Left and right horizontal line by web-basic-archive (@web-basic-archive) on CodePen.

左右水平線二重

See the Pen Title design - Left and right horizontal double line by web-basic-archive (@web-basic-archive) on CodePen.

下線アクセント

下線点線

See the Pen Title design - Underlined dotted line by web-basic-archive (@web-basic-archive) on CodePen.

下線四角

See the Pen Title design - Underlined square by web-basic-archive (@web-basic-archive) on CodePen.

下線丸

See the Pen Title design - Underlined circle by web-basic-archive (@web-basic-archive) on CodePen.

下線クロス

See the Pen Title design - Underlined cross by web-basic-archive (@web-basic-archive) on CodePen.

下線角丸

See the Pen Title design - Underlined rounded corners by web-basic-archive (@web-basic-archive) on CodePen.

下線スラッシュ

See the Pen Title design - Underlined slash by web-basic-archive (@web-basic-archive) on CodePen.

下線左スラッシュ

See the Pen Title design - Underlined left slash by web-basic-archive (@web-basic-archive) on CodePen.

下線波線

See the Pen Title design - Underline wavy line by web-basic-archive (@web-basic-archive) on CodePen.

ストライプ

左ストライプ

See the Pen Title design - Left stripe by web-basic-archive (@web-basic-archive) on CodePen.

左ストライプカラー

See the Pen Title design - Left color stripe by web-basic-archive (@web-basic-archive) on CodePen.

下線ストライプ

See the Pen Title design - Underline stripe by web-basic-archive (@web-basic-archive) on CodePen.

背景ストライプ

See the Pen Title design - Background stripes by web-basic-archive (@web-basic-archive) on CodePen.

枠線タイプ

枠線左三角

See the Pen Title design - Border left triangle by web-basic-archive (@web-basic-archive) on CodePen.

枠線背景ずれ

See the Pen Title design - Border background shift by web-basic-archive (@web-basic-archive) on CodePen.

枠線隅四角

See the Pen Title design - Border square by web-basic-archive (@web-basic-archive) on CodePen.

枠線隅切取り

See the Pen Title design - Border corner cut by web-basic-archive (@web-basic-archive) on CodePen.

アイキャッチ

アイキャッチ丸

See the Pen Title design - Eye catch circle by web-basic-archive (@web-basic-archive) on CodePen.

アイキャッチ菱形

See the Pen Title design - Eye catch rhombus by web-basic-archive (@web-basic-archive) on CodePen.

アイキャッチ枠線三角

See the Pen Title design - Eye catch border triangle by web-basic-archive (@web-basic-archive) on CodePen.

アイキャッチ角丸

See the Pen Title design - Eye catch rounded corners by web-basic-archive (@web-basic-archive) on CodePen.

アイキャッチ長方形スラッシュ

See the Pen Title design - Eye catch rectangle slash by web-basic-archive (@web-basic-archive) on CodePen.

吹き出し

吹き出し左右線

See the Pen Title design - Callout left/right line by web-basic-archive (@web-basic-archive) on CodePen.

吹き出し左右線2

See the Pen Title design - Callout left/right line2 by web-basic-archive (@web-basic-archive) on CodePen.

吹き出し中央下

See the Pen Title design - Speech bubble center bottom by web-basic-archive (@web-basic-archive) on CodePen.