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

CSSで段落の1行目をインデントする方法【text-indentプロパティの使い方】

CSSでは、text-indent プロパティを使用することで、段落の最初の行（1行目）だけをインデント（字下げ）できます。インデント幅は、「cm」「em」「px」などの単位付きの数値や、パーセンテージ（%）で指定することが可能です。

text-indentプロパティの基本

text-indentプロパティは、ブロック要素内のテキストの1行目にのみ適用されます。2行目以降の位置には影響しないため、段落の冒頭を見出しのように整えたい場合に便利です。

  • 数値＋単位（px / em / cm など）： 絶対的な幅でインデントを指定します。
  • %（パーセント）： 親要素の幅に対する割合でインデントを指定します。
  • 負の値： マイナスの値を指定すると、逆方向にインデント（ぶら下がりインデント）することもできます。

実装例

以下のコードを実行して、段落の1行目をインデントする動作を確認してみましょう。この例では、text-indent を「2cm」に設定しています。

<html>
    <head>
    </head>
    <body>
        <p style = "text-indent:2cm;">
            This text will have first line indented by 2cm and this line will remain at
            its actual position this is done by CSS text-indent property.
        </p>
    </body>
</html>

上記の例では、段落の最初の行のみが2cm分だけ右に字下げされ、それ以降の行は通常の位置に表示されます。このように、CSSのtext-indentプロパティを使えば、HTML側で全角スペースを挿入することなく、きれいな字下げを実現できます。

まとめ

段落の1行目をインデントしたい場合は、text-indentプロパティを使うのが最もシンプルで確実な方法です。日本語の文章では特に、段落の頭を一字下げする文化があるため、Webサイトやブログ記事の体裁を整える際にぜひ活用してください。

  1. CSSのmin-heightプロパティとは？基本構文と実用的なサンプルコードで解説

    CSSのmin-heightプロパティを使うと、要素のコンテンツボックスに対して最小の高さを指定できます。このプロパティが設定された要素は、たとえheightの値がmin-heightより小さくても、コンテンツボックスがmin-heightよりも小さくなることはありません。 構文（シンタックス） CSS min-heightプロパティの基本的な書き方は以下のとおりです。 Selector { min-height: /*値*/ } サンプルコード1：ボタンクリックでmin-heightを設定する それでは、CSS min-heightプロパティの具体的な使用例を見てみましょう。次のコー

  2. CSSのtext-indentプロパティを使ってテキストをインデントする方法

    CSSのtext-indentプロパティを使用すると、段落の先頭に挿入されるインデント（字下げ）の幅を指定することができます。文章の読みやすさやデザイン性を高めたい場合に便利なプロパティです。基本的な使い方以下の例では、text-indentプロパティを使って、段落の先頭にパーセンテージ指定でインデントを設定しています。<!DOCTYPE html> <html> <head> <style> p { text-indent: 15%; } article { background-color: darkgray; mar