Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2014年2月11日 Web制作

注釈(※付きの文章)を綺麗に表示するCSSを作ってみた|2行以上もOK


notesブログで結構使うので。
注釈っていうのはコレです。
※補足的なアレ。
※から始まる、文章を補足するための文章ですね。ブロガーならよく使うんじゃないでしょうか?

単純に先頭に※を付けるだけでもいいんですが、それだけだと文章が2行以上になった場合ダサくなります。
※このように文章が長くなってしまった場合、2行目以降の先頭の文字が※の下に入り込んでしまうので、見栄えが少し悪くなります。
気になる人は気になる所なので、CSSで解決しましょう。

サンプル

※むかしむかしある所に、おじいさんとおばあさんがいました。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。おばあさんが選洗濯をしていると、川の上流から大きな桃が流れてきました。家に持って帰って叩き割ると、中から赤ん坊が出てきました。桃から生まれた桃太郎です。元気です。めでたしめでたし。
1文字目を左に1em字下げした後、全体を右に1em移動させています。これで1行目のみ字下げすることが出来ますね。

さらに応用

おまけ程度ですが、こんなことも出来ます。
むかしむかしある所に、おじいさんとおばあさんがいました。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。おばあさんが選洗濯をしていると、川の上流から大きな桃が流れてきました。家に持って帰って叩き割ると、中から赤ん坊が出てきました。桃から生まれた桃太郎です。元気です。めでたしめでたし。
※と文章の間に、0.3emの余白を取っています。あと、擬似要素を使って※を自動で付与するようにしてみました。
見かけ上の違いはほとんど無いんですが、こっちのほうが綺麗に並んでいるっぽくないですか? 以上、注釈を綺麗に表示するCSSでした。
関連するかもしれない記事