WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「1行目のインデント」

text-indent「1行目のインデント」

「text-indent」は、段落の最初の行のインデント(字下げ)幅を指定します。

CSS Ver.適用要素継承
2.1
3.0で拡張
ブロック要素する
広告

text-indent の指定方法

構文

text-indent : length || [hanging | each-line];

プロパティ/設定値意味
text-indent : 10px;
text-indent : 2em;
text-indent : 10%;
インデント幅を指定。負の値も指定可能。
長さ・大きさの単位参照
text-indent : hanging; 最初の行以外のすべての行がインデントされる。
通常のインデントと逆になる。
text-indent : each-line; 最初の行だけでなく,強制改行後の行はすべてインデントされる。
ただし,自動改行された行はインデントされない。
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

text-indent のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-length-em{text-indent : 3em;}
.css-length-px{text-indent : -15px;}
.css-hanging{text-indent : 10ex hanging;}
.css-each-line{text-indent : 10ex each-line;}

<!-- html -->
<div class="common">
  <div class="cssTitle">text-indent:3em;</div>
  <div class="css-length-em">
  「text-indent:3em」を指定なので、1行目が3文字分インデントされる。2行目以降は、インデントされない。
  </div>

  <div class="cssTitle">text-indent:-15px;</div>
  <div class="css-length-px">
  「text-indent:-15px」を指定なので、1行目が15px分前方へインデントされる。2行目以降は、インデントされない。
  </div>

  <div class="cssTitle">text-indent:hanging;</div>
  <div class="css-hanging">
  「text-indent:hanging」を指定なので、1行目はインデントなし。2行目以降は、インデントされる。
  </div>

  <div class="cssTitle">text-indent:each-line;</div>
  <div class="css-each-line">
  「text-indent:each-line」を指定なので、強制改行の2行目以降もインデントされる。<br>
  自動改行は、インデントされない。
  </div>

</div>
text-indent : 3em;
「text-indent:3em」を指定なので、1行目が3文字分インデントされる。2行目以降は、インデントされない。
text-indent : -15px;
「text-indent:-15px」を指定なので、1行目が15px分前方へインデントされる。2行目以降は、インデントされない。
text-indent : hanging;
「text-indent:hanging」を指定なので、1行目はインデントなし。2行目以降は、インデントされる。
text-indent : each-line;
「text-indent:each-line」を指定なので、強制改行の2行目以降もインデントされる。
自動改行は、インデントされない。

※CSS3で追加された hanging と each-line は、ほとんどのブラウザが未対応のようです。
 現時点(2017/03)で、動作確認できていません。

【W3Cのtext-indent仕様書】
https://www.w3.org/TR/css-text-3/#text-indent-property


広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン