TIL

Today I Learned. 知ったこと、学んだことを書いていく

2行目以降を字下げする - CSS

CSS

以下の2つのプロパティを使って、実現する

  • padding-leftプロパティ
  • text-indentプロパティ

padding-leftプロパティ

その要素をどの程度ずらすか設定できる

padding-left: 1em;は「1文字右にずらす」という意味。左側のpaddingを1文字分あけるという意味でもある。

また、padding-leftには負の数を設定することはできない

1emは1文字分の幅

text-indentプロパティ

テキストの1行目の開始位置をどの程度ずらすか設定できる。インデントの幅を指定できるということ。

text-indent: -1em;は「1行目の開始位置を1文字左にずらす」という意味。

padding-leftを使って、1文字分右にずらす

適用前

f:id:tmg1998:20180313210108p:plain:w400

適用後

.note {
    padding-left: 1em;
}

f:id:tmg1998:20180313210141p:plain:w400

確かに1文字分、右にずれている！！

text-indentを適用してみる

1行目の開始位置を1文字分、左にずらす

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

f:id:tmg1998:20180313210520p:plain:w400

おぉ！きれいになっている！！！

最終的なソース

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>※を揃える</title>
    <style>
        body {
            font-family: sans-serif;
        }
        p {
            text-align: justify;
        }
        .note {
            padding-left: 2em;
            text-indent: -2em;
        }
    </style>
</head>
<body>
    <p class="note">※画像はイメージです。実際の商品とは異なることがあります。クレームはお断りしております！</p>
</body>
</html>

遊んでみた

2と-2を設定

以下のようなCSSに変えてみた

.note {
    padding-left: 2em;
    text-indent: -2em;
}
  1. 要素全体が2文字分、右へずれる
  2. 1行目の開始位置が2文字分、左へずれる

以下のような表示になる！

f:id:tmg1998:20180313210557p:plain:w400

text-indentは字下げをするときに使う

text-indentは名前の通り、インデントを行うことができるため、text-indentだけを使えば1行目だけ字下げができる

.note {
    text-indent: 1em;
}

f:id:tmg1998:20180313210616p:plain:w400

参考文献

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)