1文字分だけ字下げする

こんにちは、さるまりんです。

※ここはさるまりんのガレージです。
うっかり忘れてしまっても大丈夫なようにここに書いてます。

上のような2行のテキストがあって、2行目も米印分後ろに字下げしたいって思うことないですか？

CSSでそれをやってみたので書いておきますね。

CSSで1文字分字下げする

HTML

<p class="indent-a-char">※ここはさるまりんのガレージです。<br/>
うっかり忘れてしまっても大丈夫なようにここに書いています。</p>

CSS

p.indent-a-char {
    padding-left: 1em;
    text-indent: -1em;
}

emは1文字分を表す単位で、padding-leftで全体に1文字分の余白を作って、text-indentで1行目だけその余白の部分に文字を移動させて表示しています。

上のテキストにスタイルをあててみました。

※ここはさるまりんのガレージです。
うっかり忘れてしまっても大丈夫なようにここに書いています。

どうでしょう。※の1文字分インデントされていますね。
CSSって便利です。感動です！

読んでくださってありがとうございます。

ではまた！