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

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

HTMLのインラインスタイルプロパティであるtext-indentは、文章を書くときに段落の最初の行を字下げするのと同じように、テキストの各段落にインデント（字下げ）を適用できるプロパティです。

text-indentとは？

text-indentは、段落の先頭行だけを右方向へずらして表示するためのプロパティです。レポートや論文の冒頭のように、読みやすい段落構成を作りたい場合に活用されます。値には長さの単位や割合を指定でき、指定した分だけ最初の行がインデントされます。

ピクセル（px）でインデントを指定するコード例

次のコードでは、絶対長さの単位であるピクセル（px）を使って、各段落に25pxのインデントを設定しています。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Text Indent HTML</title>
   </head>
<body>
       <p style="text-indent: 25px;">
           Baseball ipsum dolor sit amet passed ball outs, sweep stretch bleeder triple play. Left fielder count fair swing cork balk ball. Full count southpaw reliever lineup crooked number fastball second base. Perfect game outfielder rally force dodgers right fielder dead ball era right field. Pickoff world series peanuts batting average cup of coffee foul inside robbed. Bleeder club appeal first base sidearm mustard steal line drive inning.
       </p>

       <p style="text-indent: 25px;">
           Sidearm bullpen base on balls national pastime losses reliever umpire pull dribbler. Manager 4-bagger tag national pastime pennant good eye relief pitcher. Save on-base percentage fan ejection baseball card skipper reliever strikeout bench. On-base percentage fenway contact win warning track, ball rhubarb center field. Starting pitcher hey batter out cellar cardinals basehit double switch. Play hey batter tigers sidearm in the hole shortstop no decision.
       </p>
       <p style="text-indent: 25px;">
           Off-speed petey pinch hitter astroturf walk off no decision count full count wrigley. Hack cheese helmet tossed gap run red sox. Fall classic in the hole ejection rotation rally center field shift. Manager pickoff knuckleball assist pinch runner pitchout stretch. Steal hardball extra innings alley rubber off-speed flyout third base. Baseline butcher boy umpire left field hitter, catcher win right field can of corn.
       </p>
   </body>
</html>

この例では、ピクセル（px）という絶対長さの単位を使用しています。pxは画面サイズに関係なく固定の幅で表示されるため、正確なインデント幅を指定したい場合に便利です。

相対単位（em・rem・%）での指定方法

インデント幅は、px以外にも相対的でレスポンシブ対応の長さ単位を使って指定できます。

  • em：親要素のフォントサイズを基準とした相対単位
  • rem：ルート要素（html要素）のフォントサイズを基準とした相対単位
  • %：その要素（段落）全体の幅に対する割合でインデント幅を指定

たとえば text-indent: 10%; とすれば、段落の幅の10％ぶんだけ先頭行が字下げされます。レスポンシブデザインでは、画面幅に応じて柔軟に変化するemや%、remの利用が推奨されます。

CSSのtext-indentプロパティとの違い

このHTMLのtext-indentは、同名のCSSプロパティとまったく同じ働きを持ちます。両者の唯一の違いは、スタイルルールを記述する場所です。

  • CSSの場合：HTMLのhead内にあるstyleタグの中、または外部スタイルシートに、他のCSSルールと一緒に記述します。
  • HTML（インラインスタイル）の場合：実際のマークアップ内の要素に、style属性として直接記述します。

複数のページで共通のスタイルを管理したい場合は外部スタイルシート、特定の要素だけ一時的に装飾したい場合はインラインスタイルというように、用途に応じて使い分けるとよいでしょう。

  1. HTMLレイアウト入門：セマンティック要素と主要なレイアウト手法を徹底解説

    HTMLレイアウトとは HTMLレイアウトとは、Webページ上に配置される各コンポーネント（ヘッダー、ナビゲーション、本文、フッターなど）の配置構造を定義する仕組みのことです。HTMLには、ページ内のさまざまなセクションを意味的に示すためのセマンティック要素が数多く用意されており、これらを活用することで、検索エンジンやスクリーンリーダーにも伝わりやすい、アクセシブルなページ構造を作れます。 HTMLレイアウトで使用される主なセマンティック要素 以下は、HTMLレイアウトでよく使われるセマンティック要素の一覧です。 タグ説明 <header>セクションまたはドキュメント全体

  2. HTMLエディターとは？代表的な無料エディターの特徴を徹底解説

    HTMLエディターとはHTMLエディターとは、HTMLドキュメントの作成・編集を行い、場合によってはその場で実行までできるツールのことです。現在では、無料・有料を問わず、プロフェッショナル向けの高機能なHTMLエディターが数多く提供されています。Windows標準のメモ帳（Notepad）にはない、テーマのカスタマイズやターミナル連携といった付加機能を備えたエディターも多く、用途やスキルレベルに合わせて選ぶことができます。ここでは、特によく使われている代表的なHTMLエディターをご紹介します。Notepad（メモ帳）最も基本的な無料HTMLエディターの一つです。Windowsに標準搭載されてお