閉じる
閉じる

あまめも

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

タイプライター

こんにちは! あますた(@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. [甘]パンくずリストつけてみた。

  2. サイトでラインっぽい対話型の表現ってどうやるんだ?ってなったので…

  3. 「Git」を使ってみてコマンドを忘れるのでメモ2

  4. WordPressで『Twitter Cards』を設定するプラ…

  5. 線(line)

    【HTML】<hr>タグ(区切り線)を簡単にカスタム…

  6. [甘]とりあえず、グローバルメニューの作成完了?

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

  1. アカシエ 『ブルードネージュ』
  2. シードル

Twitter

ページ上部へ戻る