なんか※印が逆インデント的な事になってる事、あるよね！

どーもー。仕事の備忘録的な為に作ったブログなのにコンプライアンス的な事ばっか気になってあんまりかける事がないよ！！大人って大変だよね〜。気にしなきゃ行けないことまみれだよ。でもそろそろ気にするのも心の底からめんどくさくなってきたので、くだらない事からちまりちまりと書いてきます。書き続けられるか...は、ミス三日以下坊主なのであんま期待しないでください。内容も。

さーてさて、なんか右の図みたいに、※（米印）だけがこう、左にはみ出てて、それ以下の文章が右にインデントされてたり、しますよね。デザインする側的にはつい、こういったちまい処理したくなっちゃうんだけど、このちまいのが以外とめんどくさかったり、あるよね。私だけじゃないよね、この気持ち！！

以下、続きからこの地味なやつの対処法。

多分、こういうデザインデータがやってきた時「どうコイツを捌いてやろうかフヒヒ」とか考える訳です。

その１：咄嗟に考えつくのは改行して全角スペースを入れるってやつ。

まー、ダメとは言わんさ。スペースでも。
だけんどもさ、見た目としては保証されたかもしれないけど文章としては不可思議な所にスペースが来る訳で。
「ちょっと！文章として成り立ってないわよ！ｷｰｰｰ!」と万が一怒られてしまっても何も言い訳出来ない。
すみません、ちょっと出来心で...と言うしかない。
それにCMSとか入ってて編集する度にスペースの位置考えて入力するのもめんどいし、なにより文章としてこれはあかん。
ブラウザや人の設定によってもスペースの解釈って違うしね。

その２：じゃあ、※を画像にして配置してみる？

うん、スペースよりも（個人的には）有効な手だと思う。
これならCMSでの入力だってへっちゃらだし、文章中に変なスペース入れる必要だってない。
ない...けど...。
文字サイズ、大きくしたり小さくしたりしたら、画像だとバレてしまうやん？いや、バレても良いんだけどさ、いいんだけどさ！！
それに、私はMacなので良いけどアンチエイリアスの効いてない（もしくはその逆もあり）windowsとかで見たら画像だとバレてしまうやん？いや、バ（ry
とにかく、なんか、こう...頑張ってマークアップとかしてて、この部分だけ負けた気分になるというか...俺はこんなちっぽけな※粒に負けたのか...ってなる。

その3：マイナスインデントしてみようか！

前置きなげーーーよ！やっと本題です。スマンかった！正直スマンかった。
とにかく、最近の私はこの方法でやってます。※のヤツをぎったんぎったんにしてやってます。
　∧＿∧
　(　･ω･)＝つ≡つ
　(っ　≡つ＝つ
　/　　　) ﾊﾞﾊﾞﾊﾞﾊﾞ
　( /￣∪

まずは、HTML。すごく...普通

<p>※注意！この辺りにはクマが出没します。そう言ってる間にも奴らが息を潜めてこちらの様子を伺ってうわなにするやめ...</p>

次はCSS。

 p{
 	text-indent: -1em;
 	margin-left: 1em;
 	}

まずは※分をマイナスインデントで左に。
text-indentは本来、文章の始めを一マスインデント（スペース）させる時とかに使います。
webにはあまりなじみのない文中のインデントですが、紙モノのエディトリアルの方とかに文章もらったりすると、よく文頭にスペースでインデントが入ってたりします。
余談ですが、知り合いの文章書きな方曰く、このインデントは非常に重要だそうです、文章界では。。。

で、戻りますがtext-indentで文頭をマイナスで一文字分左に動かしちゃいます。
そうすると※だけ本来の<p>のボックスからピョコロっとはみ出ると思います。ピョロンと。
で、基本的にこの処理をするボックス（この場合は<p>）に固定幅が与えられていない事が前提だったりするんですが、
最後にこのピョロっとボックスからはみ出た※分をmargin-leftでマイナスインデントした分だけずらします。こんだけ！

※もマークですが、文中において飾り要素ではなく意味があるものなので、
文章の一部としてあった方がいいんじゃないかなーどうかなーといった感じです。

とにかく、最近の私はこういう※注が来たときは、こういう方法で料理してやってますぐえへへ

おわり