• HOME > 
  • CSS > 
  • CSSのtext-indentの使い方【テキストの文字下げ!...

CSSのtext-indentの使い方【テキストの文字下げ!2行目以降の回り込み解消にも!】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

text-indentプロパティとは?

text-indentは、テキストの文字下げを設定するためのプロパティです。

日本語は文章の先頭を一文字下げて書き始めるのが一般的です。text-indentを用いることでそうした字下げを自動で行うことが可能です。

text-indentの使い方

text-indentプロパティは、次のように任意の値と単位を記述して使用します。

text-indentの記述方法

HTML

<p class="sample">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS

.sample{
    text-indent:30px;/*文字下げ*/
}

プレビュー

text-indentの例

一文字分だけ字下げする

字下げの単位に「px」を用いると正確に一文字分だけ字下げを実現することは困難です。font-sizeが変われば、それに応じて数値を調整する必要が出てきます。

一文字分だけ字下げしたい場合は、単位に「em」を用いて「1em」と指定します。こうすることで文字サイズに関わらず正確に一文字分だけ文字下げすることができます。

HTML

<p class="sample">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS

.sample{
    text-indent:1em;/*文字下げ*/
}

プレビュー

一文字分だけ字下げの例

負の値(マイナス)を指定する

text-indentの値には負の数値(マイナス)を指定することも可能です。

通常右側に文字下げが行われますが、マイナスの値を指定すると反対に左側にずらすことができます。

2行目以降を字下げする

マイナスの値を活用することで、テキストの2行目以降の字下げを実現することができます。

例として下のテキストを見て下さい。リストなどでよくある先頭に記号を付けたテキストですが、改行された2行目以降が記号の下に回り込んでいます。

2行目が回り込んだ例

ここで次のようにtext-indentとpaddingを使えば、記号の下に回り込ませずに2行目以降を字下げすることができます。

HTML

<p class="sample">※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS

.sample{
    text-indent:-1em;
    padding-left:1em;
}

プレビュー

2行目を字下げした例

2行目text-indent:-1emにより、「※」マークを一文字分左に飛びだすようにずらしています。

3行目そのままだと「※」マークがはみ出したままなので、今度はpadding-leftを使ってテキスト全体の右部分に一文字分の余白を設けて元の位置に戻しています。

text-indentで-9999pxを使ってはいけない?

text-indentを使って「テキストを残したまま表示を画像に置き換える」というテクニックが存在します。

前述のようにtext-indentは要素全体の位置はそのままに、中のテキストだけ移動させることができます。-9999pxというような極端な指定を行えば画面からテキストを見えなくできてしまうということです。

便利なテクニックに思えますが、この手法は、ユーザーに見せずにクローラーにだけ認識させてSEOの評価を得ようという「隠しテキストや隠しリンク」とみなされ、SEOにおいてペナルティを受けサイトの評価を大きく落とすことにつながりますので行わないように注意してください。

text-indentが効かない時は?

text-indentを指定したのに思い通りに反映されない場合は、次のような点を確認してみましょう。

  • コードに記述ミスはないかどうか?
  • 同じセレクターで重複して指定していないか?
  • セレクターの優先順位は正しいかどうか?

コードに記述ミスはないかどうか?

CSSはスペルミスやコロン・セミコロンを付け忘れているだけで反映されなくなりますので今一度確認してみてください。text-indentの箇所以外が間違っていても同様ですので遡ってチェックしましょう。

同じセレクターで重複して指定していないか?

CSSは同じセレクターの場合、後から記述したものが優先されます。同じセレクターでtext-indentを指定していないか確認してみてください。

セレクターの優先順位は正しいか?

同じ要素でもCSSのセレクターには優先順位があり、基本としてはタグよりもクラス、クラスよりもIDに指定した値が優先されます。以前に別のセレクターを使ってtext-indentを指定していないかなど確認してみてください。

リンク先のサムネイル
CSSのセレクターとは?【種類と使い方をわかりやすく解説】

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。このページではセレクターの種類と使い方を解説します。セレクタ―を使ってスタイルを指定することで...【もっと読む】

まとめ

以上が、CSSのtext-indentプロパティの使い方です。

単に文章の先頭を字下げするだけでなく、リストの記号部分への回り込みを修正したり、文字間隔を変えたときの中央揃えの調整に使えたりと応用できる便利なプロパティです。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。