• css

CSSでテキスト文にインデントをつけてみよう

はじめに

テキスト文で字下げしたいのですが、スペースを入れる方法以外に何かありますか?
cssでtext-indentをいうものがあります。これを使うことで、字下げすることができます。
text-indentをいうものがあるんですね。早速やってみます。
text-indentを使ってぜひ字下げを試してみてください。

cssのtext-indentを使って字下げしてみよう

cssで字下げを行うには、text-indentを使用します。基本的な使い方は、1文字分字下げするものになります。

<div>字下げする前</div>
<div class="textindent1em">字下げを1文字分行います</div>
<div class="textindent2em">字下げを2文字分行います</div>
.textindent1em{
 text-indent:1em;
}
.textindent2em{
 text-indent:2em;
}

text-indentの実装例

字下げする前
字下げを1文字分行います
字下げを2文字分行います

上記のように字下げできている状態になります。

関連記事

  1. 画像をhoverして時にズームさせるcssを書こう

  2. アコーディオンを作ってみよう

  3. CSS講座 – 文字の色を変えてみよう –

  4. cssでマウスをおいた時に動かそう

  5. hoverした時に文字の間隔をつかってアニメーションしてみよう

  6. テキスト文字を中央、左右にcssで寄せよう

2021年4月
 1234
567891011
12131415161718
19202122232425
2627282930  
Translate »