CSSで文頭や文中の特定の文字で揃える(初心者)

20/04/25 更新

 きちんと検証していないので、話半分でお願いします。初心者向けです。

 目次
ただのリスト
リストを使わずに文頭を装飾する
特定の文字で揃える
(余談)親要素を文章がはみ出る場合の指定


Sponsored Link

ただのリスト

■ただのリスト

<ul>
<li>ああああああああ
<li>ああああああああああ
<li>あああああああ

</ul>



HTML5リスト

リストを使わずに文頭を装飾する

 単に文頭に黒丸を書くだけだと、2行目が黒丸の真下に潜り込みます。
ビュレットの下に潜り込む

 CSSで潜り込まないようにします。

 「margin-left」で文章全体を右に寄せます。
 その後、黒丸だけを「margin-left」で1文字分だけ左に寄せます。

 5行目の「margin-left」は「text-indent」でも可。

■margin-leftで黒丸だけはみ出させる

<style type="text/css"><!--
body {width:7em;}
span {display:inline-block;}

#aaa{margin-left: 1em;}
#aaa>span{margin-left:-1em;}

--></style>

<span id="aaa">
<br><span></span>ああああああああ
<br><span></span>いいいいいいいいいいい
<br><span></span>ううううううううううううう

</span>




 黒丸だけ左にはみ出して、文章は潜り込まなくなりました。
リストマークだけはみ出して解決

 別のパターンです。

 今回は、箇条書きの一文全体を「span」で囲みました。
 そして、文の先頭だけを「text-indent」で左にはみ出させます。

 また、文の先頭は「疑似要素」で画像も付けてみました。


■別のパターン

<style type="text/css"><!--

body {width:9em;}
span{
display:inline-block;
margin-left:1em;
text-indent:-1em;

}

span:before{ content: url(a.jpg);}


--></style>

<br><span> ああああああああ</span>
<br><span> いいいいいいいいいいい</span>
<br><span> ううううううううううううう</span>




 「text-indent」で画像のリストマークだけ、左にはみ出させました。
スマイリーのビュレット

特定の文字で揃える

 「=」や「→」など、特定の文字で縦に揃えたい場合があります。
 全て全角なら全角スペース連打で揃いますが、半角記号などが混ざると、スペースでもなかなか揃いません。
イコールの縦揃え

 各行にある「特定の文字(=)」の直前までの文字列の横幅「width」を統一して「特定の文字」で揃うようにします。


■各行の「=」の直前の文字列の横幅を揃える

<style type="text/css"><!--
span{
display:inline-block ;
width:9em ;
text-align:right;
}


--></style>

<br><span> ああああああああ</span> = ええええ
<br><span> いいいいいい</span> = おお
<br><span> ううう</span> = かかかかかかかかか



「=」で揃いました。
イコール文字で縦揃え成功

(余談)親要素を文章がはみ出る場合の指定

 わざと親要素の横幅より長い単語を「div」に入れてみます。

■親要素のwidthより長い単語や記号の連打

<style type="text/css"><!--

div{
width:6em;
background:yellow;
}


--></style>

<br><div> 南阿蘇水の生まれる里白水高原駅</div>
<br><div> ◆◆◆◆◆◆◆◆ ~~~~~~~~~</div>
<br><div> It's Supercalifragilisticexpialidocious. </div>



 初期設定では、親要素より長い英単語や記号の連打は「スペース」が入るまで改行されません。
親要素をはみ出した環境依存文字の連打


 「word-break」プロパティの値で改行ルールを変えられます。

■word-breakプロパティで改行ルールを指定

<p style=" word-break : normal ;"> <br>All roads lead to Rome.
<br>Antidisestablishmentarianism.
<br>松江イングリッシュガーデン前駅

</p>




 4つのプロパティ値ごとの違いが以下の画像です。
長いアルファベットに対するword-breakの挙動

■normal
親要素より長い英単語や記号連打は、スペースが入るまで改行しません。

■break-all
単語の途中だろうと強制改行。

■keep-all
CJK(全角文字)もスペースが入るまで改行しない。

■break-word
通常、英単語の途中でぶった切らないが、親要素より長い英単語は途中でも改行。

※ CJK統合漢字…中国、日本、韓国でバラバラに作られた漢字コードをunicodeで扱うために類似する漢字を統合したもの。各国の頭文字が由来。