閉じる
閉じる

あまめも

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

タイプライター

こんにちは! あますた(@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. MarkdownのHタグにクラスを追加する簡単な方法

  2. アイコン

    HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

  3. list

    <ol>リストを好きな番号から連番にしたい時

  4. WordPressのタグやカテゴリを整理しようと思ったのでDBか…

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

  6. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

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

  1. find
  2. 柏屋薄皮饅頭 新あずき

Twitter

ページ上部へ戻る