閉じる
閉じる

あまめも

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

タイプライター

こんにちは! あますた(@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. 【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんて…

  2. まとめ

    「Git」の履歴が見づらいのでまとめたい、そんな時の修正方法

  3. キーボード

    【HTML】入力する文字をキーボード風に表示したい【CSS】

  4. 【基礎】MySQLを使用した時のDBの「テーブル」「カラム」「レ…

  5. Markdownを使用して簡単にgutenbergの再利用ブロッ…

  6. [甘]WordPressで『プラグインが動かない!?』ってときの…

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

Twitter

ページ上部へ戻る