Amazon商品をお得に購入する方法 ▶ ▶ ▶

【CSS初心者向け】2行目以降の頭の余白揃える超簡単な方法【li,pタグに便利】

URLをコピーする
URLをコピーしました!

※この文章のように長い一文を折り返したときにコメマークの下から二行目が始まってしまうのを防ぐのが今回のブログのテーマです。

↑こうなってしまう方へ!(私も数ヶ月前にやり方わかりましたので共有します笑)

皮革・ブランド品の宅配クリーニング リナビス
目次

indentとpaddingを使って解決

p {
   text-indent: -1em;
   padding-left: 1em;
}

こちらのコードを冒頭の赤字の一文に貼ってみましょう

 

See the Pen GGNwPe by kawashima (@kawashima) on CodePen.

そうすると、今回の場合の「※」一文字分(1em)が最初の行以外すべてにインデントされました。

これは、文の最初の1文字分のインデントをマイナスにする(text-indent: -1em;)ことで、文の開始1文字が左に移動します。
このままでは画面からはみ出るので、この文全体(今回はpタグ)のpadding-leftを1em追加します。
そうすることで文全体が右に1文字移動したので2行目以降が1文字インデントしたように表現できます。

これは<li>タグでもよく使われますね。

「※」は1emですが、「① はじめに」など、スペースが入る場合ははtext-indent、padding-leftともに1.2emとか小数点つけて調整してみてください。

 

Amazon商品をお得に購入する方法

悩む人

少しでもお得にAmazonで買い物できる方法を知りたい!

かわしー

Amazonチャージでの購入がおすすめです!

「Amazonチャージ」はAmazonギフト券にお金をチャージして買い物する方法です。

購入金額に合わせて最大2.5%のポイントをゲットできます。(下記の表参照)

Amazon公式ページより

「Amazonチャージ」はどなたでも何度でも使えるお得なサービス。

積み重ねていけば大きな額になるので、オトクに買い物したい方はやらなきゃ損ですよ。

Amazonチャージのご紹介

Amazonチャージはこちら

※チャージ自体はすぐ終わるのでお買い物の前に是非やってみてください

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
TOP
目次
閉じる