ホームページ制作

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に強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA