
ブログで結構使うので。
注釈っていうのはコレです。
※から始まる、文章を補足するための文章ですね。ブロガーならよく使うんじゃないでしょうか?
単純に先頭に※を付けるだけでもいいんですが、それだけだと文章が2行以上になった場合ダサくなります。
※このように文章が長くなってしまった場合、2行目以降の先頭の文字が※の下に入り込んでしまうので、見栄えが少し悪くなります。
気になる人は気になる所なので、CSSで解決しましょう。
サンプル
※むかしむかしある所に、おじいさんとおばあさんがいました。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。おばあさんが選洗濯をしていると、川の上流から大きな桃が流れてきました。家に持って帰って叩き割ると、中から赤ん坊が出てきました。桃から生まれた桃太郎です。元気です。めでたしめでたし。
|
<div class="notes">むかしむかしある所に…めでたしめでたし。</div> |
|
.notes{ font-size: 0.85em; color: #666; text-indent: -1em; padding-left: 1em; } |
1文字目を左に1em字下げした後、全体を右に1em移動させています。これで1行目のみ字下げすることが出来ますね。
さらに応用
おまけ程度ですが、こんなことも出来ます。
むかしむかしある所に、おじいさんとおばあさんがいました。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。おばあさんが選洗濯をしていると、川の上流から大きな桃が流れてきました。家に持って帰って叩き割ると、中から赤ん坊が出てきました。桃から生まれた桃太郎です。元気です。めでたしめでたし。
※と文章の間に、0.3emの余白を取っています。あと、擬似要素を使って※を自動で付与するようにしてみました。
見かけ上の違いはほとんど無いんですが、こっちのほうが綺麗に並んでいるっぽくないですか?
|
<div class="notes">むかしむかしある所に…めでたしめでたし。</div> |
|
.notes{ font-size: 0.85em; padding-left: 1em; color: #666; } .notes:before{ content: "※"; } .notes:first-letter{ margin-left: -1.3em; } |
以上、注釈を綺麗に表示するCSSでした。
関連するかもしれない記事