【CSS】複数行で行頭記号+インデントを揃える

32Thumb

左の画像のように行頭記号を使ったリストを作る場合、記号を一行目の上下中央に合わせ、2行目以降の文章もインデントのアキを揃えてあける際の記述方法です。
『ul』タグを使ったものを2つ、使ってないものを1つ。
現状使っている3パターンをメモしときます。
demoページはコチラ

① 『ul』タグで囲んだ場合 ー背景画像を使用ー

これはどのパターンもそうですが、行頭記号を上下に合わせる場合、『font-size』や『line-height』、行頭記号のサイズでバランスが変わってきます。
以下のサンプルは参考に、実際記述する場合は(画像など違うと思うので)それらのバランスをみて調整してみて下さい。

     <ul id="sample01">
        <li>サンプルサンプルサンプル</li>
        <li>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</li>
        <li>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</li>
      </ul>

ul#sample01 {
	width: 600px;
	padding-left: 1em; /* リスト全体の余白 */
}
ul#sample01 li {
	margin-bottom: 9px;
	line-height: 1.4;
	padding-left: 1em; /* インデントを一文字分空ける */
	background: url(〜/images/grayCircle.png) no-repeat 4px 7px; /* 背景画像と上下左右の位置を調整。画像は7×7px */
}
ul#sample01 li:last-child {
	margin-bottom: 0px; /* 最後の項目の下マージンを0に */
}

demoページ

② 『ul』タグで囲んだ場合 ーCSS3 疑似要素を利用ー

疑似要素『:after』や『content』プロパティ、『background』の背景色を利用して記号を作り、絶対配置で位置を指定します。

位置の調整は、『ul』の指定で記号を含んだリスト全体を右によせ、疑似要素で作った記号だけ『left: マイナスの値』で左に寄せる、という流れです。

背景画像を使わなかったり、ブラウザの対応を気にしなくてもよいのでスマホサイトに向いた記述かと思います。

htmlは①と同じ。


ul#sample02 {
	width:600px;
	padding-left: 2em; /* リスト全体の余白 */
}
ul#sample02 li {
	position: relative; /* 行頭記号の基準位置 */
	margin-bottom: 9px;
	line-height: 1.4;
}
ul#sample02 li:after {
	position: absolute;
	top: 0px; /* 記号の上下の位置 */
	left: -12px; /* 記号の左右の位置 */
	margin-top: 0.5em; /* 記号の上下の位置 */
	content: &quot;&quot;;
	display: block;
	height: 8px; /* 記号の高さ */
	width: 8px; /* 記号の幅 */
	border-radius: 4px; /* 角の丸みを指定して円に */
	background:#333; /* 記号の色 */
}
ul#sample02 li:last-child {
	margin-bottom: 0px; /* 最後の項目の下マージンを0に */
}

demoページ

③ 文章の一部(数字など)を行頭記号として用いる場合

こちらもまず行頭記号(数字)を含めた『.numList』の要素全体を右に寄せ、次に『span』で囲んだ数字を左に寄せるという流れです。

一旦全体を1文字分右に寄せ、『span』(数字)を1文字分左に寄せるというのでもいいんですが、それだと数字とその後の文章が詰まって見えます。

そのため、全体を1.3文字分空け、数字を1.3文字分左に戻し、『padding-right: 0.3em』で数字と文章の余白を(0.3文字分)空けてます。

   <div id="numListWrap">
      <div class="numList"><span>①</span>サンプルサンプルサンプル</div>
      <div class="numList"><span>②</span>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>
      <div class="numList"><span>③</span>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>
    </div>
    </div><!--.numListWrap-->

#numListWrap {
	width:600px;
	padding-left: 1em; /* リスト全体の余白 */
}
#numListWrap .numList{
	margin-bottom: 9px;
	line-height: 1.4;
	padding-left: 1.3em;
}
#numListWrap .numList span{
	margin-left:-1.3em;
	padding-right: 0.3em;
	line-height: 1.4;
}
#numListWrap .numList:last-child {
	margin-bottom: 0px; /* 最後の項目の下マージンを0に */
}

demoページ