閉じる
閉じる

あまめも

段落の始まりを一文字自動でインデントする

タイプライター

こんにちは! あますた(@amaguristar)です。

  • 「段落の始まりを一文字自動でインデントしたい!」

そんな時ありませんか? cssの設定で簡単に対応可能です。

 

text-indent」プロパティを使用

p {
    text-indent: 1em;
}

たったこれだけで設定完了。

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

とこんな感じ。

応用するとこんなことも可能です

.caution {
    padding-left: 1em; /* 左に1文字分スペースを開ける */
    text-indent: -1em; /* 1行目のスペースのみ無くす */
    margin 0;
}
.caution::before {
    content: "※";
    font-weight: bold;
    color: red;
}

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

関連記事

  1. [甘]コンタクトフォームを「Contact Form 7」プラグ…

  2. 目次のテンプレートっぽいものを作ろうとローテクで頑張ってみた

  3. take091-thumbnail

    【WaznFilm更新】これだけ覚えれば十分、Markdownの…

  4. インフォ

    画面のサイズに合わせて拡大縮小する画像の簡単なCSS設定

  5. HTML

    【HTML】でタグや特殊記号を表示する方法【一覧】

  6. タイプライター

    文字の間隔を設定したいそんな時の設定方法

こんなメモもありますよ♪

  1. 店頭
  2. camera-info

Twitter

ページ上部へ戻る