html･CSSで「※」米印（注釈）をつける方法4選

文章を書くとき注釈を後述するために「※」米印を使うことはよくあります。

「でも米印ってどうやってつければいいんだろう？」

html･CSSで「※」米印（注釈）をつける方法を4つ紹介します。

ul liやtable、text-indent、beforeなどを使います。

方法1.テキストをつける

「※」は「こめ」と打ち、変換するとでてきます。環境依存文字ではないためそのまま利用可能です。

1行で済むとき、インデントがいらないときはテキストで済ますとカンタンです。

<p>※ 注釈テキスト</p>

「※」と「注釈テキスト」の間に半角スペースをいれるかは任意ですが、テキストが数字から始まるとややこしくなるためスペースを入れることをオススメします。

米印を小さくする方法

注釈の元となる米印は小さめに表示するといいでしょう。

米印をsupタグで囲むと上寄せで小さく表示できます。

<p>テキストテキスト注釈したい部分<sup>※</sup>テキストテキスト</p>

方法2.tableを使う（htmlだけ）

米印にインデントをつけそろえたいとき、tableを使うとカンタンです。

2列のtableを作り、左に「※」、右に注釈テキストを記載します。

<table>
    <tr>
        <td valign="top" nowrap>※</td><td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
    <tr>
        <td valign="top" nowrap>※</td><td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
</table>

左のtdには「valign="top"」を指定します。

これは右が2行以上になったときでも※を上寄せにしてテキストが続いているように見せるためです。

ちなみにCSSで指定する場合は「vertical-align:top」です。

左のtd内テキストが「※1」のように2文字以上になる場合は「nowrap」を指定しましょう。

これはtd内テキストの改行を防ぐものです。

CSSで指定する場合は「white-space: nowrap」です。

tableは「cellspacing」でマスとマスの隙間指定できますが、指定しなくても少し空いています。このままでよいでしょう。

方法3.text-indentを使う

「tableはカッコ悪い」「ul liを使ってCSSでインデントのある米印を指定したい」という方へ、CSSとbeforeを使った米印のつけ方を説明します。

<style>
.example{
    list-style: none;
    padding-left: 1.5em;
    margin-left: 0.5em;
}
.example li{
    text-indent: -1.5em;
}
</style>
<ul class="example">
    <li>※ テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    <li>※ テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>

方法1で解説したように「※」と半角スペースをテキストでつけます。

そして「text-indent」でインデントを調整します。

「text-indent」は1行目だけ任意の数値分ひっこめたり押し出したりできるCSSです。

「※」と半角スペース分だけひっこめたいので、1.5文字分「1.5em」を指定します。

「text-indent」で押し出しただけではテキストが画面からはみ出してしまうため、paddingやmarginで調節します。

方法4.beforeを使う

「テキストに※とスペースをつけるのはカッコ悪い！それもCSSでやりたい！」という方へ、beforeを使う方法を解説します。

<style>
.example2{
    list-style: none;
    padding-left: 1.5em;
    margin-left: 0.5em;
}
.example2 li{
    text-indent: -1.5em;
}
.example2 li:before{
    content: "※";
    margin-right: 0.5em;
}
</style>
<ul class="example2">
    <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>

基本は「方法3.text-indentを使う」と同じです。

追加したのはbeforeです。beforeのcontentに「※」を指定します。

空白スペースではカッコ悪いので、margin-rightを指定してスペースを確保します。

【まとめ】html･CSSで「※」米印（注釈）をつける方法

方法1.テキストをつける

1行で済むとき、インデントがいらないときはテキストで済ますとカンタンです。

方法2.tableを使う

2列のtableを作り、左に「※」、右に注釈テキストを記載します。

方法3.text-indentを使う

text-indentで※とスペース分だけひっこめます。

方法4.beforeを使う

※をhtml上ではなくbeforeを使ってCSSで指定します。

以上、html･CSSで「※」米印（注釈）をつける方法4選でした。