You are here
Home > WEB制作 > CSS > 【CSS】2行目以降をインデント(字下げ)する方法

【CSS】2行目以降をインデント(字下げ)する方法

ソースコード 画像

暑い日が続いているので、水分補給はしっかりしましょう。クーラー天国とか言ってるのは私です、ハイ。

今回は「複数行に渡って文章を入力した時」にCSSで文字の頭を揃える(インデント)方法をご紹介します。

SPONSERD LINK

インデントとは?

 インデント 【 indent 】

インデントとは、文章の行頭に空白を挿入して先頭の文字を右に押しやる「字下げ」のこと。また、字下げで左端に挿入された空白や、テキストエディタやワープロソフトの持つ字下げ機能のこと。
横書きの日本語は段落の先頭を一文字分字下げすることになっているため、文書作成ソフトなどにはそのための機能が用意されていることが多い。
-インデントとは|IT用語辞典集

「Word」や「Excel」ではお馴染みの「インデント/インデント解除」機能。WEB制作で同じ事をするには「設定してあげないと使えません」(当たり前ですが)

インデント ワード 画像
インデント(Word)
インデント(Excel) 画像
インデント(Excel)

CSSでインデントする方法

インデント(字下げ)なし

※暑い、暑すぎる。
誰かアイス買って来て!
ソルティーライチでもいいよ!

書く必要はないと思いますが、一応。
上記のHTMLコードは以下になります。

インデント(字下げ)あり

まず、インデント用のCSSを設定します。

次に、HTMLはこちら。

以上の実際の表示は下記になります。

※暑い、暑すぎる。
誰かアイス買って来て!
ソルティーライチでもいいよ!

「※」1個分の字下げが行われている事がわかりますね。
いかがでしたでしょうか。お役に立てれば幸いです。

0
Pocket

SPONSERD LINK

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Top