h1〜h4のタイトルに飾り罫を付ける時

記事公開日：2018.01.15

ホームページ制作ツール

あけましておめでとうございます。
2018年もトライ＆エラーを恐れずに、新しい方法を取り入れながらホームページ制作に取り組んでいきたいと思っています。

今までhタグに飾り罫など付ける時、<span>で囲っていたのですが、囲まなくても罫線の長さを文字に合わせられる方法を見つけました。

display :inline-block;　を追加すれば罫線などの飾りが文字に合わせて伸び縮みしてくれます。

h2 {
  display :inline-block;
  border: solid 4px gray;
}

1

2

3

4

h2 {

display :inline-block;

border: solid 4px gray;

}

すばらしい！ありがとうございます。

今回参考にさせていただいたサイトです
【CSS】borderの長さを調整する方法3つ：文字に応じて可変など

長野県長野市のホームページ制作・チラシ・パンフレット・カタログ・ショップカード・パッケージ・スマートフォンサイト制作