みなさん、こんにちは。どんぶラッコです。
早速ですが、今日作りたいテキストはこちらです！
See the Pen 米印を左に表示する by cha1ra (@cha1ra) on CodePen.
そう、※や✳︎などで注意書きを書くことがあると思いますが、２行目以降を米印分だけみぎにズラす方法です。
何も考えずに書いてしまうと、インデントされません。
と言うことで、今回のCSS実装の考え方をお伝えしたいと思います！
サンプルコード
HTML
<p class="asterisk">あなたはほか無論その反対家によって方のためを引込んだでし。</p>文章は適当です。
ポイントとしては、今回の実装では 米印は CSS側で描画する ので、本文には含めなくてOKだと言うことです。
CSS
.asterisk {
padding-left: 1rem;
}
.asterisk::before {
content: "※";
margin-left: -1rem;
}これは何をやっているか、簡単に解説しておきます。
まずは padding-left:1rem で描画位置を１文字分みぎにズラしています。
1rem とは、 root + em です。 emはフォントの大きさを1として大きさの相対指定ができるものでした。 remとemの違いは、remはrootなので、大元のhtmlタグのフォントの大きさを1とします。emは親要素のfont-sizeを1と考える点が違いますね。
わかりやすいように背景色を付けてみました
次に .asterisk::beforeの擬似要素で米印を追加していきます。
beforeは当該要素の前にコンテンツを挿入できるやつでしたね。
.asterisk::before {
content: "※";
/* margin-left: -1rem; */
}このように、試しに margin-left をコメントアウトしてみると、単純に「※」要素が追加されていることがわかります。
そして、仕上げに表示位置を margin-left: -1rem 、つまり、マイナス方向に1文字分移動してね、と指示を出してます。
注意: 改行しないでね
解説は以上です！人によっては before要素の marginをマイナス1文字分ズラすのではなく、 .asterisk に text-indent: -1rem を指定する方法をとっている方もいました。どちらも同じ表示になるので問題ないです！
一つ気をつけて欲しいのが改行です。pタグ冒頭で改行をしてしまうと、改行分だけ見た目がズレてしまいます。
気をつけてくださいね！
と言うことで今回は注釈のTipsでした！みなさんも活用してください♪
