HTML/CSS:パラグラフに対して段を作る

【概要】

1.結論

2.実際にどのように行うか

3.開発環境

1.結論

text-indent:+margin-leftを使用する！

2.どのようにコーディング

<span class="subtitle">【開発環境】</span></br>
 <span class="back-indent2">・HTML/CSS/Javascript/Ruby/RubyonRails</span>

.back-indent2{
  text-indent: -1em;
  margin-left: 1em;
}

・text-indentで１行目のインデント幅を調整します。
<ul>,<li>タグと併用してクラスの名前をつければ改行しても<li>毎にきれいに段落を作れます。
・今回は親要素に対して位置を調整したいのでemを使用しました。htmlに対して配置したければremで構いません。

下記の図のように段を作れます。

※色や影等のCSS記述は省いています。

3.開発環境

HTML5
CSS3