HTMLの <li> タグ内のテキストに青い枠線を付けるには、CSSの border プロパティを使用します。ただし、<li> タグは通常、リストマーカー（黒丸や番号）を持つブロックレベル要素として表示されるため、単純に border を適用すると、マーカーを含む <li> 要素全体に枠線が付きます。
テキストの周囲にぴったりと青い枠線を付けたい場合は、いくつかのCSSテクニックを組み合わせる必要があります。
方法 1：display: inline-block; を使用する
<li> 要素を inline-block に変更し、その周囲に枠線を適用します。これにより、要素はコンテンツの幅に合わせて表示され、テキストの周囲に枠線が描画されます。
HTML
<!DOCTYPE html>
<html>
<head>
<title>liテキストに青い枠線</title>
<style>
li {
display: inline-block;
border: 2px solid blue;
padding: 5px; /* 必要に応じて内側の余白を追加 */
}
ul, ol {
list-style-type: none; /* デフォルトのマーカーを非表示にする場合 */
}
</style>
</head>
<body>
<ul>
<li>テキストに青い枠線</li>
<li>別のテキスト</li>
</ul>
<ol>
<li>番号付きテキストに青い枠線</li>
<li>さらに別の番号付きテキスト</li>
</ol>
</body>
</html>
解説:
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> はインライン要素なので、テキストの周囲にぴったりと枠線が付きます。
HTML
<!DOCTYPE html>
<html>
<head>
<title>liテキストに青い枠線（span使用）</title>
<style>
li span {
border: 2px solid blue;
padding: 5px; /* 必要に応じて */
}
ul, ol {
list-style-type: none; /* デフォルトのマーカーを非表示にする場合 */
}
</style>
</head>
<body>
<ul>
<li><span>テキストに青い枠線</span></li>
<li><span>別のテキスト</span></li>
</ul>
<ol>
<li><span>番号付きテキストに青い枠線</span></li>
<li><span>さらに別の番号付きテキスト</span></li>
</ol>
</body>
</html>
解説:
<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 ファイルで定義することをお勧めします。
0 件のコメント:
コメントを投稿