Web開発やドキュメント作成において、情報を整理し、視認性を高めるために使われるのがビュレット(bullet)です。
黒丸(•)で表されるこの記号は、単なる装飾ではなく、HTMLのリスト構造やスタイルにも深く関わるUI/UXの要素です。
この記事では、ビュレットの意味や用途から、HTML/CSSでの実装方法、文字コード、さらには表記揺れについても詳しく解説します。
Web制作者やUI設計者、また文書構成に関心のある方にとって有益な内容をお届けします。
ビュレット(bullet)とは何か?
定義と名称のバリエーション
ビュレット(bullet)は、主に箇条書きの先頭に使われる黒丸(•)の記号です。
その名称は英語の“bullet(弾丸)”に由来しており、日本語では「ビュレット」「バレット」「ブレット」といった表記揺れがあります。
中黒(・)との違い
混同されがちな記号に中黒(・)がありますが、以下のような違いがあります:
IT分野におけるビュレットの具体的な用途
HTMLでの使用方法
順序なしリストでの自動表示
HTMLにおいて、<ul>
(unordered list)要素を使用すると、各<li>
タグの行頭には自動的にビュレットが表示されます。
例:
このコードをブラウザで表示すると、各リスト項目の先頭に黒丸(•)が付きます。
CSSでのカスタマイズ
CSSでは、list-style-type
プロパティを使ってビュレットの種類を変更できます。たとえば:
その他にも以下のような種類があります:
-
circle
: 白抜きの丸(◦) -
square
: 四角いビュレット(■) -
none
: ビュレットなし
文中で使う場合のエンティティ参照
文中にビュレットを挿入したい場合、HTMLの文字実体参照 •
を使うことで対応できます。
例:
ビュレットの文字コードと仕様
Unicodeでの定義
Unicodeには複数のビュレット記号が定義されています。
それぞれ異なる用途に使い分けられます:
これらの文字はJIS X 0213などの日本語文字コードにも含まれており、多くのフォントで表示可能です。
ビュレットの活用例と応用
UXデザインにおける役割
ビュレットは、情報の構造化や視覚的な強調に大きく貢献します。
とくに長いテキストにおいて、箇条書きは読者の負担を軽減し、重要な情報をすばやく伝える手段になります。
テクニカルドキュメントやAPIリファレンスでの使用
開発現場では、APIドキュメントや設計書で項目を箇条書きに整理する際の記号としてビュレットが用いられます。
これにより、コードや仕様の読みやすさが格段に向上します。
まとめ
ビュレット(bullet)は、箇条書きや文書の視認性向上に不可欠な記号であり、HTML/CSSではその構造とスタイルを柔軟に制御することが可能です。
-
箇条書きの基本記号として広く使用される
-
HTMLの
<ul>
要素で自動的に生成される -
CSSで見た目をカスタマイズ可能
-
Unicodeに複数のビュレットタイプが存在する
このように、ビュレットはただの装飾記号ではなく、情報の可視化・ユーザー体験の向上に貢献する重要なIT要素です。
Web制作や技術文書の品質向上に、ぜひ意識的に取り入れてみてください。