2行目から1字下げしたい時のCSSはこれ

注意書きや補足説明などを記載する際に、文章の頭に「※」「・」「●」「■」などを使うことはよくある。
1行で終わる場合は問題無いが、長文で複数行に折り返す場合、2行目以降は1字下げ、文章のラインを揃えると見やすくなる。

2行目から1字下げしたい時のスタイルシートはこの方法

HTML

字下げしたい行をdivで囲う
任意の場所で改行したい時は途中に<br />を入れても構わない。

<div class="ind1">※ご利用になる場合は売上票へのサインとご本人による暗証番号の入力が必要です。<br />暗証番号をご存知でないとカードはご利用いただけません。</div>

CSS

.ind1 {
	padding-left: 1em;
	text-indent: -1em;
}

2文字下げたい場合

HTML

<div class="ind2">※※ご利用になる場合は売上票へのサインとご本人による暗証番号の入力が必要です。暗証番号をご存知でないとカードはご利用いただけません。</div>

CSS

.ind2 {
	padding-left: 2em;
	text-indent: -2em;
}

なお、UTF-8を使用し文章の頭に「●」「■」「○」「×」といった記号を使った時、ブラウザで表示するとほかの文字小さくなることがある。
文字幅が1文字分にならず、せっかく綺麗に1文字下げているのに揃わない。

記号が小さく表示されてしまう時はスタイルシートで以下のfont-familyを指定するといい。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;

フォントを全体に影響させたくない場合は、上記の「ind1」や「ind2」の中に指定しても良い。

.ind1 {
	padding-left: 1em;
	text-indent: -1em;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク