Webサイトを作っていると、「この文章だけ枠で囲みたい」「見出しを四角で囲って目立たせたい」と思うことがあります。
CSSでは、borderプロパティを使うだけで簡単に四角い枠線を作れます。 さらに、線の色や太さ、内側の余白を調整すれば、同じ枠線でも印象を大きく変えられます。
この記事では基本的な囲み方から、一部の文字だけを囲む方法、角丸などのカスタマイズまで順番に解説します。
CSSで文字を四角で囲む基本的な方法
文字を四角で囲む場合、基本となるのがCSSのborderです。
まずはHTMLとCSSを使ったシンプルな例から見ていきます。難しい指定は必要なく、数行のCSSだけで枠線を表示できます。
borderを使って枠線をつける
HTMLでは、枠で囲みたい文章にクラスを付けます。
<p class="box">この文章を四角で囲みます。</p>CSSは次のように指定します。
.box {
border: 1px solid #333;
}これだけで文章の周囲に四角い枠線が表示されます。
border: 1px solid #333;には、線の太さ・線の種類・線の色という3つの情報がまとめて指定されています。
| 指定 | 意味 |
|---|---|
1px | 線の太さ |
solid | 実線 |
#333 | 線の色 |
たとえば1pxを2pxに変更すれば線が太くなり、#333を別のカラーコードに変えれば好きな色の枠線を作れます。
paddingで文字と枠の間に余白を作る
borderだけでも枠は表示できますが、そのままでは文字と枠線の距離が近く、窮屈に見えることがあります。
そこで一緒に使いたいのが**padding**です。
.box {
border: 1px solid #333;
padding: 16px;
}paddingは、要素の内側に余白を作るCSSです。
数値を大きくするほど文字と枠線の距離が広がります。枠線を使うときは、borderだけではなくpaddingも調整すると読みやすくなります。
枠線のデザインをカスタマイズする
基本の書き方が分かれば、用途に合わせてデザインを変更できます。
枠線は情報を目立たせるために便利ですが、線が強すぎると本文より目立ってしまいます。ページ全体のデザインに合わせて太さや色を調整することが大切です。
線の太さ・色・種類を変更する
borderの値を変更すると、さまざまな枠線を作れます。
.box {
border: 2px dashed #777;
padding: 16px;
}この場合は、2pxの破線になります。
線の種類には、主に次のようなものがあります。
solid：実線dashed：破線dotted：点線double：二重線
すべてを覚える必要はありません。まずは汎用性の高い**solidを基本として、デザインに応じて変更する**のがおすすめです。
border-radiusで角を丸くする
少し柔らかい印象にしたい場合は、border-radiusを追加します。
.box {
border: 1px solid #333;
padding: 16px;
border-radius: 8px;
}border-radiusは枠の角を丸くするCSSです。
数値を大きくすると丸みが強くなります。反対に、直線的でシャープなデザインにしたい場合は、border-radiusを指定せず四角い状態のまま使えます。
文章全体ではなく一部の文字だけを囲む方法
ここまではp要素全体を囲みましたが、文章の中にある特定の文字だけを四角で囲むこともできます。
この場合はspan要素を使うと扱いやすくなります。
spanを使って特定の文字だけ囲む
たとえば「POINT」という文字だけを囲む場合は、次のように記述します。
<p><span class="label">POINT</span> ここに説明文が入ります。</p>.label {
display: inline-block;
border: 1px solid #333;
padding: 2px 8px;
}spanは文章の一部分を指定するときによく使われる要素です。
ここではdisplay: inline-block;を指定することで、文章の流れを大きく崩さずにpaddingや枠線を扱いやすくしています。
用途によって囲む範囲を使い分ける
文章全体を囲むのか、一部の文字だけを囲むのかによってHTMLを使い分けると、コードも分かりやすくなります。
目安としては次のように考えられます。
- 補足・注意事項などをまとめて囲む →
pやdiv - ラベルや短い単語を囲む →
span - 複数の要素をまとめて囲む →
div
見た目だけでHTMLを決めるのではなく、何をひとまとまりとして扱いたいのかを考えて選ぶと管理しやすくなります。
CSSで枠線がうまく表示されないときの確認ポイント
コードを書いたのに枠線が表示されない場合は、CSSそのものではなく、指定方法に原因があることもあります。
複雑な修正を始める前に、まずは基本的な部分を確認してみましょう。
class名とCSSの記述を確認する
最初に確認したいのが、HTMLとCSSのclass名です。
たとえばHTMLが、
<p class="box">文章</p>なら、CSSは、
.box {
border: 1px solid #333;
}となります。
boxとBoxのように大文字・小文字が違っていたり、CSS側の.を書き忘れていたりすると意図したスタイルが適用されません。
また、別のCSSによってスタイルが上書きされている場合もあります。まずはclass名、スペル、CSSが読み込まれているかを確認するのがおすすめです。
枠線が大きすぎる場合は要素の性質を確認する
「文字だけを囲みたかったのに、横幅いっぱいまで枠が伸びた」という場合があります。
pやdivなどは、初期状態では横幅いっぱいに広がりやすいブロック要素です。
文字の幅に合わせたい場合は、
.box {
display: inline-block;
border: 1px solid #333;
padding: 8px 12px;
}のようにinline-blockを指定する方法があります。
「枠線が表示されない」のか「表示されているけれど想定した形ではない」のかを分けて考えると、原因を見つけやすくなります。
【まとめ】borderを使えば文字を簡単に四角で囲める
CSSで文字を四角で囲みたいときは、基本的に**borderを使えばOKです。**
まずは、
.box {
border: 1px solid #333;
padding: 16px;
}この形を覚えておけば十分です。
そこから必要に応じてborder-radiusで角を丸くしたり、spanとinline-blockを使って一部の文字だけを囲んだりできます。
枠線は小さな装飾ですが、情報を整理したり、重要な部分へ視線を誘導したりするためにも使える表現です。線を付けること自体を目的にせず、どの情報を目立たせたいのかを考えながら使ってみてください。