HTMLとCSSで囲み枠の幅を文字に合わせる方法とは？【コード付】

前回の記事で、文字の囲み枠を簡単に表示させる方法をご紹介しました。

ネットで公開されているコードをそのまま使うのもいいんですが、自分のサイトに合わせて色を変えたり、線の太さを変えたりすることはよくあります。

これは、コードを見ると指定されている色が分かりますので、その部分だけ自分の好きな色に変えればＯＫです。

例えば、青い囲み線からオレンジ色の囲み線に変えたい場合は、コード中の「#ffc06e」を「#ffa500」に変えればできます。

色は『原色大辞典』でお好きな色を探してみてください。

border: solid 2px #ffc06e;/*線*/

↓

border: solid 5px #ffa500;/*線*/

線の太さも、数字を変えるだけでお好みの太さに変更できます。上記の例で、線の太さを「2px」→「5px」に変更すると、下の図のように変わりますので、お好きな太さに調整してみてください。

↓

今回は、囲み枠を文字の長さに合わせて自動調整する方法、そして囲み枠の角を丸くする方法をご紹介します。

HTMLとCSSで囲み枠の幅を文字に合わせる方法

前回の記事の方法で囲み枠を作成すると、画面いっぱいの長さの囲み枠ができます。

要点を箇条書きで書く場合など、囲み枠の右端に大きな空白ができる場合は、文字の長さに合わせた囲み枠の方が見栄えがいいですよね。

一行コードを追加するだけで簡単にできます！
子テーマのスタイルシート（style.scc）を開いてください。

display:inline-block;　を追加してください。

【CSS】

/* 文字の長さに合わせる */
.box-txt {
 display:inline-block;
 padding: 0.5em 1em;
 margin: 2em 0;
 font-weight: bold;
 border: solid 2px #0000ff;
}
.box-txt p {
 margin: 0; 
 padding: 0;
}

それでは確認してみましょう。

テキストエディターで、以下のように入力してください。（または、Addquicktagに登録）

【HTML】

<div class="box-text">
 <p>ここに文章</p> 
</div>

短くなりましたね。テキストの長さに合わせて自動的に枠の幅が変わります。

囲み枠の角を丸くする

囲み枠の角を丸くすると、見た目がやわらかい印象になります。

どれも、一行コードを追加するだけで簡単にできます！

同じく、子テーマのスタイルシート（style.css）とビジュアルエディターのスタイルシート（editor-style.css）に以下のコードを追加します。

４つ角を同じ大きさで丸くする場合のコード

【CSS】

/* 4つ角すべて同じ丸み */
.box-4maru {
 padding: 0.5em 1em;
 margin: 2em 0;
 font-weight: bold;
 border: solid 2px #0000ff;
 border-radius: 10px;/*角の丸み*/
}
.box-4maru p {
 margin: 0; 
 padding: 0;
}

【HTML】

<div class="box-4maru">
 <p>ここに文章</p> 
</div>

それでは確認してみましょう。

４つ角がすべて同じ大きさで丸くなりましたね。

※数字を変えれば、丸みの大きさを調整できますので、お好みの丸さになるまで数字をいじって確認してみてください。

角ごとに丸み具合を変える場合のコード

【CSS】

/* 角ごとに丸みを変える */
.box-maru {
 padding: 0.5em 1em;
 margin: 2em 0;
 font-weight: bold;
 border: solid 2px #0000ff;
 border-radius: 10px 0 10px 0;/*左上、右上、右下、左下*/
}
.box-maru p {
 margin: 0; 
 padding: 0;
}

数字の順に、左上、右上、右下、左下の角の丸みを指定します。

丸みをつけたくない角がある場合は、「0」と指定します。

【HTML】

<div class="box-maru">
 <p>ここに文章</p> 
</div>

それでは確認してみましょう。

左上と右下の角だけ丸みをつけてみました。

丸みをつける位置や数字を変えたりして試してみるのもおもしろいですね。

こんな時（↓）に便利だと思います。

４つ角すべてを丸くすると、ラベルとぴったり合わなくなってかっこ悪い。

↓
左上の角だけ丸くしない。（直角のままにする）

【CSS】

/* こんな時便利（変更後） */
.box-after {
 position: relative;
 margin: 2em 0;
 padding: 0.5em 1em;
 border: solid 3px #0000ff;
 border-radius: 0 10px 10px 10px;
}
.box-after .box-title {
 position: absolute;
 top: -27px;
 left: -3px;
 padding: 0 9px;
 height: 25px;
 line-height: 25px;
 vertical-align: middle;
 font-size: 17px;
 background: #0000ff;
 color: #ffffff;
 font-weight: bold;
 border-radius: 5px 5px 0 0;
}
.box-after p {
 margin: 0; 
 padding: 0;
}

【HTML】

<div class="box-after"><span class="box-title">POINT</span>
<p>ここに文章</p>
</div>

まとめ

コードを少しいじれば、自分のオリジナルの囲み枠を作ることができます。

スタイルシート（CSS）をいじるのはちょっと・・・という方でも、これは超簡単にできますので、練習がてらやってみてはどうでしょうか。勉強にもなると思います。