見出しテキストの左右に｢＼ ／｣の装飾を付ける 画像なし HTML/CSS サンプル

見出しテキストの左右に｢＼ ／｣の装飾を付ける 画像なし HTML/CSS サンプル

CODE

<h1><span>お問い合わせ</span></h1>
h1 {
  text-align: center;
}

h1 > span {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.4rem;
  position: relative;
}

h1 > span:before {
  content: "・・・・・";
  position: absolute;
  top: 0.5rem;
  left: -3.8rem;
  font-size: 1.5rem;
  letter-spacing: -1rem;
  transform: rotate(55deg);
  color: #00a1e9;
}

h1 > span:after {
  content: "・・・・・";
  position: absolute;
  top: 1.3rem;
  right: -2.6rem;
  font-size: 1.5rem;
  letter-spacing: -1rem;
  transform: rotate(-55deg);
  color: #00a1e9;
}

DEMO

※サンプルでは少し見た目が崩れますが、実際の利用においては問題ありません…

See the Pen title-sample-003 by CODE IDEA (@codeidea) on CodePen.

※ブラウザにデフォルトで付いているスタイルを消すため、リセットCSS「destyle.css」を使っています。

※CSSの指定方法は一例であり、同じ見た目を違う書き方で表現することもできます。絶対正しいというものではありません。

MEMO

h1 の中の見出しテキストを span でくくり、spanに囲まれたテキストの両脇にパーツが出るようになっています。
文字の長さが増減してもついてきます。2行には対応していません。文字とパーツの間隔は適宜調整を入れてください。

クラス名、各数値、色の指定、文言は用途に合わせて変えてください。

見出しカテゴリの最新記事