ホームページ制作

ul li タグのリストマーカーに好きな文字列を設定する方法

ul や ol を利用したリストタグに任意の文字列をマーカーとして使用する方法を紹介します。
具体的には liタグのbefore疑似要素で好きな文字をマーカーとして設定し、リスト全体をずらして、リストタグっぽさを損なわないようにします。

コードはこんな感じ。

<ul class="custommarker01">
	<li>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト</li>
	<li>2番目のリスト</li>
	<li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li>
	<li>4番目のリスト4番目のリスト4番目のリスト<br>4番目のリスト4番目のリスト4番目のリスト</li>
</ul>

<ul class="custommarker02">
	<li>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト</li>
	<li>2番目のリスト</li>
	<li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li>
	<li>4番目のリスト4番目のリスト4番目のリスト<br>4番目のリスト4番目のリスト4番目のリスト</li>
</ul>

こんな風に普通にリストをHTMLで記述します。

お次はCSSで以下のように書きます。

body {
	font: 14px sans-serif;
	line-height:1.5;
	padding:10px;
}
ul {
	margin-bottom:2em;
}
ul.custommarker01 {
	list-style-type: none;
	margin-left:14px;/* マーカーを1文字寄せた分、ULにマージンを設定*/
}
ul.custommarker01 li:before {
	content: '※'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-14px; /* 1文字分、左に寄せる */
}

ul.custommarker02 {
	list-style-type: none;
	margin-left:42px; /* マーカーを3文字寄せた分、ULにマージンを設定*/
}
ul.custommarker02 li:before {
	content: '●▲■'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-42px; /* 3文字分、左に寄せる */
}

上記のようにHTMLとCSSを書くと、ブラウザ上では次の画像のように表示されます。

今回の例では「」という文字と「●▲■」という3文字の記号をそれぞれリストマーカーとしたサンプルを公開します。ポイントはli:beforeの contentプロパティにリストマーカーとして使用した文字を記述する点です。こうすることによって、ul li を書いたHTMLタグにリストマーカーとして使いたい文字列をいちいち記入しなくても、自動的にマーカーが表示されるようになります。

ここから先はお好みですが、設定した文字列の文字数×フォントサイズ分だけmargin-leftにマイナスのマージンを設定します。そうするとリストマーカーだけが、左に移動します。そして親要素のulタグに対して、左に寄せた分だけmargin-leftでプラスのマージンを設定します。そうすると一つのli要素のリストが複数行になった場合、2行目以降がマーカーにぶら下がったように表示させることができます。

以上です。
ここで使われたCSSを応用すれば、ネストされたリストに対し、階層ごとに別の文字列をマーカーとして使用するというCSSの書き方もできますね。お気に召したら、いろいろ実験してみてくださいね。

お仕事のご相談・ご依頼をお待ちしております

コレカラウェブでは、Webライティング・SEO・メディア運営・障害者支援のお仕事を承っております。専門知識が豊富な村上英輝が直接担当いたします。ご相談・お見積もりは無料です。まずはお気軽にお問い合わせくださいませ。

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:認定SEOコンサルタント・SEO検定1級・Webライティング実務士・ウェブ解析士・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA