文章の2行目以降をCSSで字下げ(インデント)する方法 | デザインレベルアップ
デザインレベルアップ
デザイン
Illustrator
Photoshop
ウェブデザイン
HTML・CSS
JavaScript・JQuery
WordPress
ライティング
ウェブデザイン技能検定
イラスト
イラスト成長記録
ライフハック
考え方
心理学
商品レビュー
健康・美容
睡眠
生活
ガジェット
ブログ
ブログ運営術
MS Office
Excel
ゲーム
ゲームのお話
ホーム
ウェブ制作
HTML・CSS
文章の2行目以降をCSSで字下げ(インデント)する方法
2020年1月13日 2020年8月11日
SHARE
ツイート
シェア
はてブ
LINE
Pocket
サイトの文章を作成するときに、先頭に「・」「※」というような記号をつけることがあると思います。
しかし、通常の状態で改行した場合、下のように2行目以降の文字が記号の下に来てしまいます。
・改行すると
こうなる。
（「・」の下に「こ」がきてしまいます。）
このままでもいいっちゃいいのですが、2行目以降を字下げして記号の部分だけ飛び出している状態を作ってあげると、文章の可読性が上がります。
というわけで今回は「CSSで文章の2行目以降を字下げ(インデント)する方法」をご紹介します！
もくじ
HTML
通常はこのように見えます
CSS
解説
p自体にfont-sizeをしている場合
補足
まとめ
HTML
まずはHTMLです。適当に文章を用意し、pタグで括ります。
今回は記号「・」の1文字分だけ字下げするので、1文字あけますよという意味で「indent_1」というclass名をpタグにつけてあげます。

<p class="indent_1">
    ・2行目以降の文章は、<br>記号の分を1字下げて表示します。
</p>
通常はこのように見えます
ちなみに今のままだと、下のように改行時に記号の下に文字がまわります。
・2行目以降の文章は、
記号の分を1字下げて表示します。
CSS
記号の下に文章がいかないようにcssを書いていきます。
先ほどpタグにつけた「indent_1」というclassに下記のCSSを書いていきます。

.indent_1 {
    text-indent: -1rem;
    padding-left: 1rem;
}
解説
padding-leftでテキストの左側に1remの余白を作ります。
しかし、このままだとボックス全体に左側の余白を追加してしまうので、テキストの始まり位置を移動できるtext-indentを-1remとし、マイナス方向に1文字分移動します。
単位は「rem」を使用しますが、こうすることでルート要素のフォントサイズ分の数字が指定されます。
「indent_1」というclassでインデントを管理しているので、同じように1文字分ずらしたい箇所ができた場合にはclass名を付与してあげるだけです。
p自体にfont-sizeをしている場合
もし、このp自体にfont-sizeをしている場合、上記のように「rem」という単位で指定すると、左にあけるサイズと文字サイズにずれが生じてしまい、改行時の上の段と下の段が揃わなくなってしまいます。
この場合、下記のように「em」という単位をしてあげましょう。こうすることで指定したfont-sizeが基準となるため、改行しても文字が揃います。

.indent_1 {
    font-size: 14px;
    padding-left: 1em;
    text-indent: -1em;
}
補足
1remや1emで全角1文字分ですので、もし最初の記号が半角の場合は0.5rem / 0.5emといった指定をしてあげましょう。ということは1.5rem / 1.5emで全角1文字+半角文字1文字分ですね。
状況に応じて使い分けていきましょう！
まとめ
見た目のデザインも大事ですが、いかに文字が読みやすいかという部分もwebサイトでは大事なことなので、こういう細かいところも気にしていきましょう！
SHARE
ツイート
シェア
はてブ
LINE
Pocket
CATEGORY :
HTML・CSS
コメントを残す コメントをキャンセル
メールアドレスが公開されることはありません。 * が付いている欄は必須項目です
コメント
名前 *
メール *
サイト
前の記事
パッケージ版のゲームソフトを全部売ってダウンロード版に買い直し…
次の記事
ワードプレスのよく使うタグ（備忘録）
ヒロキ
Webデザイナーしています。デザイン情報や成長につながること、皆様の役に立つ情報を発信していきます！
twitter
カテゴリー
カテゴリー カテゴリーを選択MS Office (1) Excel (1)イラスト (2) イラスト成長記録 (2)ウェブ制作 (53) HTML・CSS (18) JavaScript・JQuery (5) WordPress (4) ウェブデザイン技能検定 (22) 2級過去問 (11) 3級過去問 (11) その他 (2) ライティング (3)ゲーム (5) ゲームのお話 (4) 感想・レビュー (1)デザイン (35) Illustrator (13) Photoshop (22)ブログ (1) ブログ運営術 (1)ライフハック (12) ガジェット (1) 健康・美容 (2) 商品レビュー (6) 生活 (7) 睡眠 (1)思考・心理学 (4) 心理学 (2) 考え方 (2)
Recent Posts
アイキャッチ画像を出力する方法【wordpress】 2021年1月14日
ローディングアニメーションを実装する方法【HTML CSS JavaScript】 2020年10月9日
CSSのみで実装！画面端から無限ループするスライドの作り方 2020年8月13日
Google Chromeで画像がぼやける場合の対処方法 2020年8月12日
【HTMLのみ】PCとスマホで違う画像に切り替えるならpictureタグを使う方法が最強！【レスポンシブ対応】 2020年8月12日
人気記事
今日
週間
月間
総合
高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】
【HTML・CSS】見出しの左右両端に線を入れる方法
Google Chromeで画像がぼやける場合の対処方法
スペースキーで手のひらツールへのショートカットが効かなくなった時の対処法【photoshop(フォトショップ)】
CSSのみで実装！画面端から無限ループするスライドの作り方
【CSS】背景画像に透過カラーを重ねる方法
渦巻き模様が簡単に作れる！スパイラルツールの使い方【Illustrator(イラストレーター)】
画像の内側にドロップシャドウをつけて凹んだように見せる方法【Illustrator(イラストレーター)】
ローディングアニメーションを実装する方法【HTML CSS JavaScript】
アピアランスの破線機能を使った放射状のオブジェクトの作り方【Illustrator(イラストレーター)】
不要な透明部分を省いてトリミングする方法【photoshop(フォトショップ)】
アートボードにも対応！背景を透明に変更する4つの方法【photoshop(フォトショップ)】
キラキラブラシの作り方【photoshop(フォトショップ)】
【jQuery】開閉ボタンの表示・非表示で中身の文字を切り替える方法
しずく模様のパターンの作り方【Illustrator(イラストレーター)】
高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】
【HTML・CSS】見出しの左右両端に線を入れる方法
スペースキーで手のひらツールへのショートカットが効かなくなった時の対処法【photoshop(フォトショップ)】
Google Chromeで画像がぼやける場合の対処方法
【CSS】背景画像に透過カラーを重ねる方法
CSSのみで実装！画面端から無限ループするスライドの作り方
渦巻き模様が簡単に作れる！スパイラルツールの使い方【Illustrator(イラストレーター)】
キラキラブラシの作り方【photoshop(フォトショップ)】
画像の内側にドロップシャドウをつけて凹んだように見せる方法【Illustrator(イラストレーター)】
ローディングアニメーションを実装する方法【HTML CSS JavaScript】
img要素をbackground:coverのように親要素いっぱいに表示する方法【containのようにもできる！】
jcomで頻繁にインターネット回線がよく切れるのでモデム交換を依頼。原因はまさかの◯◯◯だった件
アピアランスの破線機能を使った放射状のオブジェクトの作り方【Illustrator(イラストレーター)】
パターンで作る！イラレの基本！ストライプ柄の作り方【Illustrator(イラストレーター)】
不要な透明部分を省いてトリミングする方法【photoshop(フォトショップ)】
高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】
【HTML・CSS】見出しの左右両端に線を入れる方法
スペースキーで手のひらツールへのショートカットが効かなくなった時の対処法【photoshop(フォトショップ)】
Google Chromeで画像がぼやける場合の対処方法
渦巻き模様が簡単に作れる！スパイラルツールの使い方【Illustrator(イラストレーター)】
【CSS】背景画像に透過カラーを重ねる方法
CSSのみで実装！画面端から無限ループするスライドの作り方
キラキラブラシの作り方【photoshop(フォトショップ)】
jcomで頻繁にインターネット回線がよく切れるのでモデム交換を依頼。原因はまさかの◯◯◯だった件
img要素をbackground:coverのように親要素いっぱいに表示する方法【containのようにもできる！】
パターンで作る！イラレの基本！ストライプ柄の作り方【Illustrator(イラストレーター)】
画像の内側にドロップシャドウをつけて凹んだように見せる方法【Illustrator(イラストレーター)】
アートボードにも対応！背景を透明に変更する4つの方法【photoshop(フォトショップ)】
アピアランスの破線機能を使った放射状のオブジェクトの作り方【Illustrator(イラストレーター)】
不要な透明部分を省いてトリミングする方法【photoshop(フォトショップ)】
高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】
【CSS】背景画像に透過カラーを重ねる方法
【HTML・CSS】見出しの左右両端に線を入れる方法
渦巻き模様が簡単に作れる！スパイラルツールの使い方【Illustrator(イラストレーター)】
アピアランスの破線機能を使った放射状のオブジェクトの作り方【Illustrator(イラストレーター)】
スペースキーで手のひらツールへのショートカットが効かなくなった時の対処法【photoshop(フォトショップ)】
パターンで作る！イラレの基本！ストライプ柄の作り方【Illustrator(イラストレーター)】
キラキラブラシの作り方【photoshop(フォトショップ)】
画像の内側にドロップシャドウをつけて凹んだように見せる方法【Illustrator(イラストレーター)】
しずく模様のパターンの作り方【Illustrator(イラストレーター)】
不要な透明部分を省いてトリミングする方法【photoshop(フォトショップ)】
変更したブラシ設定を保存する方法【photoshop(フォトショップ)】
アートボードにも対応！背景を透明に変更する4つの方法【photoshop(フォトショップ)】
放射状のオブジェクトの作り方【photoshop(フォトショップ)】
オシャレな手書き風文字の作り方【Illustrator(イラストレーター)】
もくじ
HTML
通常はこのように見えます
CSS
解説
p自体にfont-sizeをしている場合
補足
まとめ
「HTML・CSS」
同じカテゴリの人気記事
【CSS】背景画像に透過カラーを重ねる方法 14,420件のビュー
【HTML・CSS】見出しの左右両端に線を入れる方法 11,641件のビュー
img要素をbackground:coverのように親要素いっぱいに表示する方法【containのようにもできる！】 3,947件のビュー
レスポンシブデザインでも改行を使い分ける方法【PC・タブレット・スマホ】 1,941件のビュー
【初心者〜中級者向け】独学でHTML・CSSの基礎を学ぶのにおすすめな本6選 1,753件のビュー
SPONSORED LINK
HOME
デザイン
ウェブ制作
プライバシーポリシー
© 2021 デザインレベルアップ All rights reserved.
