【CSS】コピペでかんたん！シンプルな「タイトルつき囲み枠」のつくり方

サイトに使えるシンプルな「タイトルつき囲み枠」をCSSでつくってみました。

枠と文字のどちらも、色・サイズを自由にカスタマイズできます。コピペでかんたんにできますので、よかったら使ってみてください。

「タイトルつき囲み枠」があると、いろいろな使い方ができて便利だよ！

「タイトルつき囲み枠」の実装方法
「タイトルつきの囲み枠」のコード
たとえばこんなカスタマイズ
まとめ：いろいろ使えて便利！

「タイトルつき囲み枠」の実装方法

今回紹介するコードは、どれもコピペするだけで使えます。

やり方はかんたん！紹介するコードをコピーして、CSSファイルに貼りつけるだけです。

WordPressをお使いの方は「style.css」（テーマを使っている方は子テーマの「style.css」）に貼りつければOKです。

「タイトルつきの囲み枠」のコード

まずは基本となる「タイトルつき囲み枠」を表示させてみましょう。

タイトルの文字サイズが少し小さめなのが特長です。これをもとに、必要に応じてカスタマイズしていきます。

最初に次のコードをCSSファイルに貼りつけます。

CSSファイルに貼りつけ

/*---------------------------------
タイトルつき囲み枠
--------------------------------*/
.point-box {
  position: relative;
  border: 2px solid #8BC34A; /* 枠の太さ・種類・色 */
  border-radius: 4px; /* 枠の丸み */
  margin: 1.8em 1em; /* 枠外の余白 */
  padding: 5px 15px;
}

.point-title {
  position: absolute;
  padding: 0 0.5em;
  left: 20px;
  top: -13px; /* タイトルの位置を調整 */
  color: #555555; /* タイトルの文字色 */
  font-weight: bold;
  font-size:0.9em; /* タイトルの文字サイズ */
  background-color: #ffffff;
}

上のコードをCSSファイルに貼りつけたら、実際に記事の中に「タイトルつき囲み枠」を入れてみましょう。

記事作成画面で「タイトルつきの囲み枠」を挿入したい箇所に次のHTMLを貼りつけます。

挿入したい箇所に貼りつけ

<div class="point-box">
<div class="point-title">好きなタイトル</div>
ここに文章を書きます。</div>

これで見本と同じような「タイトルつき囲み枠」が表示されます。

あとは、タイトルや本文を好きなようにアレンジすれば完成です。

つづいて、自分らしくカスタマイズしてみよう！

たとえばこんなカスタマイズ

「タイトルつき囲み枠」をカスタマイズする時は、先ほど貼りつけたCSSのコードを修正します。

先ほどのコードをもう一度みてみましょう。

/*---------------------------------
タイトルつき囲み枠
--------------------------------*/
.point-box {
  position: relative;
  border: 2px solid #8BC34A; /* 枠の太さ・種類・色 */
  border-radius: 4px; /* 枠の丸み */
  margin: 1.8em 1em; /* 枠外の余白 */
  padding: 5px 15px;
}

.point-title {
  position: absolute;
  padding: 0 0.5em;
  left: 20px;
  top: -13px; /* タイトルの位置を調整 */
  color: #555555; /* タイトルの文字色 */
  font-weight: bold;
  font-size:0.9em; /* タイトルの文字サイズ */
  background-color: #ffffff;
}

カスタマイズでよく使うところに、日本語で注釈が入っています。

カスタマイズするときは、次のように使います。