閉じる
閉じる

あまめも

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

タイプライター

こんにちは! あますた(@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. take089-thumbnail

    WaznFilm更新】「Font Awesomeで何ができるの?…

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

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

  4. インフォ

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

  5. 【基礎】MySQLのデータ型まとめ

  6. 良いか悪いかは別として複数サイトで同じ「css」を参照させてみま…

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

  1. take033-photos-thumbnail
  2. 店舗外観
  3. 塩ゆで枝豆

Twitter

ページ上部へ戻る