テキストの周囲にぴったりと青い枠線を付けたい場合は、いくつかのCSSテクニックを組み合わせる必要があります。
方法 1:display: inline-block;
を使用する
<li>
要素を inline-block
に変更し、その周囲に枠線を適用します。これにより、要素はコンテンツの幅に合わせて表示され、テキストの周囲に枠線が描画されます。
解説:
display: inline-block;
: <li>
要素をインライン要素のようにコンテンツの幅に合わせて表示しつつ、ブロックレベル要素のように padding
や border
を適用できるようにします。
border: 2px solid blue;
: 太さ 2px
の実線 (solid
) で青色 (blue
) の枠線を適用します。
padding: 5px;
: テキストと枠線の間に内側の余白を追加します(任意)。
ul, ol { list-style-type: none; }
: デフォルトのリストマーカー(黒丸や番号)を非表示にしています。テキストだけに枠線を付けたい場合は、通常マーカーは不要になるため、非表示にすることが多いです。
方法 2:<span>
でテキストを囲み、<span>
に枠線を適用する
<li>
タグ内のテキストを <span>
タグで囲み、その <span>
に青い枠線を適用します。<span>
はインライン要素なので、テキストの周囲にぴったりと枠線が付きます。
解説:
<li><span>...</span></li>
: <li>
タグ内のテキストを <span>
タグで囲みます。
li span { border: 2px solid blue; padding: 5px; }
: <li>
タグ内にある <span>
要素に青い枠線と内側の余白を適用します。
どちらの方法を選ぶべきか?
- 方法 1 (
display: inline-block;
): <li>
要素自体に枠線を付けるため、構造がシンプルです。ただし、マーカーを非表示にする必要があります。
- 方法 2 (
<span>
を使用): テキストコンテンツのみに枠線を付ける意図が明確になります。マーカーを残したい場合や、より細かいスタイリングが必要な場合に便利です。
どちらの方法も、目的の「<li>
タグでテキストに青い枠線を付ける」を実現できます。デザインの要件や、他のスタイリングとの兼ね合いで適切な方を選択してください。スタイルは、HTMLの <style>
タグ内、または外部の CSS ファイルで定義することをお勧めします。