CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-indentプロパティでテキストインデントを設定する方法

CSSのtext-indentプロパティは、学校で作文やレポートを書いたときに段落の最初の行を字下げした経験がある方なら、すぐにイメージできるはずです。このプロパティを使うと、すべてのテキストブロックの1行目だけを、文章を書くときのようにインデント（字下げ）することができます。

text-indentの基本的な使い方

以下のコードでは、ピクセル（px）を使ってテキストインデントを設定する方法を示しています。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Text Indent CSS</title>
   </head>
   <style>
       .example {
           text-indent: 25px;
       }
   </style>
   <body>
       <p class="example">
           Cat ipsum dolor sit amet, american bobtail. Scottish fold ragdoll, and savannah but thai. Bombay. Lion. British shorthair maine coon. Tom. Leopard cheetah abyssinian and ocicat or american shorthair, but birman donskoy. Ocelot. Devonshire rex cougar for kitten. American shorthair lion. Lynx. Balinese persian so norwegian forest sphynx malkin. Devonshire rex kitten panther. Leopard manx tom donskoy but russian blue, ocicat tabby.
       </p>

       <p class="example">
           Tomcat malkin, and ocelot. Puma. Balinese . Panther lynx or american bobtail and turkish angora, manx cougar. Malkin scottish fold but sphynx russian blue, maine coon balinese . Ocicat sphynx devonshire rex, mouser bobcat. Kitty maine coon american bobtail havana brown.
       </p>
       <p class="example">
           Birman sphynx ragdoll tabby so british shorthair. Persian bombay thai for birman. Kitty havana brown maine coon tomcat and himalayan, but donskoy. Tom american bobtail birman, and ragdoll or panther or leopard yet american bobtail. Devonshire rex ocicat and munchkin. Lion lynx norwegian forest munchkin, tiger yet cheetah. American bobtail persian. Cornish rex. Leopard. Havana brown savannah puma yet tabby american shorthair, puma but tom. Egyptian mau kitten and lynx, havana brown tom, and siberian munchkin. Ocelot siberian so cheetah. American bobtail tiger, and lion. Kitten russian blue yet ocicat mouser thai and lynx norwegian forest. Panther. Mouser thai egyptian mau but devonshire rex. Lion panther for kitten. Ocelot savannah yet leopard or sphynx. Ocicat savannah puma ragdoll thai for panther siamese.
       </p>
   </body>
</html>

絶対単位と相対単位の違い

上記の例で使用しているのは、ピクセル（px）と呼ばれる絶対的な長さの単位です。実は、インデント幅は相対的・レスポンシブな長さの単位であるemやremでも指定できますし、要素（段落）全体の幅に対する割合を示す%で指定することも可能です。

ぜひ実際に、サンプルコード内の「25px」を「1.5em」「1.5rem」「10%」などに書き換えて、表示がどのように変化するか試してみてください。フォントサイズや画面幅に応じて柔軟に調整したい場合は、相対単位の方が便利です。

  1. HTMLで内部CSS（スタイルシート）を使う方法をわかりやすく解説

    内部CSSとは？CSSはHTML文書にさまざまな方法で適用できます。その一つが「内部CSS（Internal CSS）」と呼ばれる手法で、<style>タグを使用するのが特徴です。<style>タグは<head>〜</head>タグの中に記述します。この方法では、1つのページに対して個別のCSSスタイルを定義することが可能です。外部スタイルシートファイルを作成せずに手軽にスタイルを適用できるため、単一ページのみで完結するデザインや、簡単なデモ・テストページを作成する際によく使われます。サンプルコード以下のコードを実行すると、HTMLで内部CSSを

  2. HTMLでインラインCSS（スタイルシート）を使う方法を徹底解説

    インラインCSSとは？ HTMLでインラインCSSを使用するには、style属性を使います。style属性は、個々の要素に対して直接スタイルを指定するための属性です。font-family（フォントの種類）、font-style（フォントのスタイル）、text-decoration（文字装飾）、direction（文字の方向）など、さまざまなCSSプロパティと組み合わせて利用できます。 style属性の注意点 style属性で指定したスタイルは優先度が最も高く、他のスタイル指定を上書きします。具体的には、以下のようなスタイル指定よりも優先されます。 <style>タグ内に記述さ