【CSS】文章の字下げを行うCSS

1. 一行目の行頭を字下げする

• テキストの一行目を字下げするtext-indentプロパティを利用する
  

<style type="text/css">
  .sample1{
    text-indent:1em;
  }
</style>
<p class = "sample1">
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
</p>

2. 一行目以外の行頭を字下げする

• text-indentプロパティにマイナスの値を設定して一行目だけ字上げする

<style type="text/css">
  .sample2{
    padding-left:1em;
    text-indent:-1em;
  }
</style>
<p class = "sample2">
※どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
</p>