CSS

CSSでアスタリスクや米印 (※) をいい感じに表示したい! indentの使い方をまとめました 【サンプル付き】

みなさん、こんにちは。どんぶラッコです。

早速ですが、今日作りたいテキストはこちらです!

See the Pen 米印を左に表示する by cha1ra (@cha1ra) on CodePen.

そう、※や✳︎などで注意書きを書くことがあると思いますが、2行目以降を米印分だけみぎにズラす方法です。

何も考えずに書いてしまうと、インデントされません。

と言うことで、今回のCSS実装の考え方をお伝えしたいと思います!

サンプルコード

HTML

<p class="asterisk">あなたはほか無論その反対家によって方のためを引込んだでし。</p>

文章は適当です。

ポイントとしては、今回の実装では 米印は CSS側で描画する ので、本文には含めなくてOKだと言うことです。

CSS

.asterisk {
  padding-left: 1rem;
}

.asterisk::before {
  content: "※";
  margin-left: -1rem;
}

これは何をやっているか、簡単に解説しておきます。

まずは padding-left:1rem で描画位置を1文字分みぎにズラしています。

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文字分ズラすのではなく、 .asterisktext-indent: -1rem を指定する方法をとっている方もいました。どちらも同じ表示になるので問題ないです!

一つ気をつけて欲しいのが改行です。pタグ冒頭で改行をしてしまうと、改行分だけ見た目がズレてしまいます。

気をつけてくださいね!


と言うことで今回は注釈のTipsでした!みなさんも活用してください♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です