- HOME
- > BLOG CATEGORY
- CSSで2行目以降を1文字下げる 【text-indent】の使い方について

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
text-indent
プロパティをまだ知らない方へ[記事の内容]
text-indent
プロパティは
「テキストの段落の始まりを1文字分下げる」ときに使用します。
テキストの段落の1行目を、本来の位置よりもずらして開始することを「字下げ」といいます。
1文字分字下げする際には
「text-indent:1em
」と指定しましょう。
<p class="txt01"><span>※</span>皆さんも1度や2度悩んだ経験はありませんか?</p>
<p class="txt02"><span>※</span>私も、配色で悩んだ経験はたくさんあります。<br>
皆さんも1度や2度悩んだ経験はありませんか?</p>
p {
font-size: 14px;
line-height: 2;
text-indent:1em
}
p span {
color: red;
font-weight: bold;
}
See the Pen
JjdwwdW by shu (@shu0325)
on CodePen.
1行の場合は行ごと1em(1文字分)字下げしております。
複数行の場合は最初の行のみ1em(1文字分)字下げしております。
やはり、複数行の場合はあまり綺麗な見た目ではないですよね。
注意書きなどをを書いてる際に、2行目以降がその記号の下に回り込んでしまう事が気になっている方も
いるのではないでしょうか。
先にデモをご覧ください。
HTMLファイル/CSSファイル
<p><span>※</span>ホームページ制作、名刺制作、ロゴ制作など、デザインを<br>
する際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。<br>
皆さんも1度や2度悩んだ経験はありませんか?</p>
p {
font-size: 14px;
line-height: 2;
}
p span {
color: red;
font-weight: bold;
}
See the Pen
rNVoQKB by shu (@shu0325)
on CodePen.
デフォルト指定の際は、文字の大きさ、文字の行間のみ指定しています。
See the Pen
NWqeEBL by shu (@shu0325)
on CodePen.
p {
font-size: 14px;
line-height: 2;
text-indent:-1em;
padding-left:1em;
}
text-indent
プロパティはマイナス指定もできます。
padding
プロパティには文字数分の値を指定します。
今回は1文字分字下げしましたが、2文字の場合もあります。
例:「注:」の場合は、text-indent:-2em;
、padding-left:2em;
と指定しましょう。
今回はこれで以上です。
text-indent
プロパティはtext-indent:1em
と指定しましょう。text-indent
プロパティは2025.01.11
2024.10.05
2024.05.15
2024.05.09
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog