【text-indent】2行目以降の先頭を1文字下げる【HTML/CSS】

Webコーディングをする際に、文章の先頭に「・」や「※」などの記号を記述して、2行目以降の先頭1文字を下げたいときってありませんか？

例えばこんな感じ。
[text-indent]を使わない例です。

では次にこちら。
[text-indent]を使います。

どうでしょうか。文章の先頭が綺麗に揃っていますね。

こんな感じで、[text-indent]を使うと2行目以降の先頭1文字を下げることができます。しかも、たった2行で。

それでは、[text-indent]を使って、2行目以降の先頭1文字を下げる方法をご紹介します。

[text-indent]の使い方

HTMLとCSSの記述は以下のとおりです。コピペで使えます。

[text-indent]の解説

CSSでの設定はわずか2行です。

[em]は1文字分の大きさを表す単位です。

[padding-left]で、全行の左側に1文字分の余白を作ります。

次に、[text-indent]で[-1em]と設定することで、最初の行だけ左に移動させることができます。

 

HTML/CSS/JavaScriptの学習にオススメの本

[text-indent]を使って、2行目以降の先頭1文字を下げる方法をご紹介しました。

Web制作の進化は本当にスピードが速く、中でもCSSの進化は非常に速く感じます。とはいえ、CSSの場合はサポートブラウザのこともあり、最新のものだけを使用すればよいというものではありません。

そこで、最新の情報やテクニックまで解説されている学習本を以下の記事でご紹介してるので、参考にしてみてください。

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...