1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#【概要】

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

下記の図のように段を作れます。
スクリーンショット 2020-11-03 15.50.06.png
※色や影等のCSS記述は省いています。

#3.開発環境
HTML5
CSS3

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?