[CSS] ()あるインデントさせる方法

2 min read

概要

注釈や規約の文章で「※(米印)」付きの箇条書きを表現することは多い。※印以降の段落は頭が 1 つ下がっているため、それを CSS で表現するためにはいくつか手法がある。

コード

text-indent1em分マイナスして、margin-left1emズラすという手法がよく使われていた。

<div style="margin-left:1em;text-indent:-1em;">
  ※注釈(ちゅうしゃく、旧表記:註釈)とは、既述の文章や専門用語についての補足・説明・解説のこと。補注とも、単に注(旧表記:註)ともいう。
</div>

ただ、この方法だと※印と最初の文字の余白間隔を調整出来なかったり、出来たとしても次の行の頭が揃わなくなってしまう問題も出てきてしまう。


ulliを利用してマーカーを※印に変更することで余白のズレなどの問題は払拭できる。

li::marker {
  content: "※";
}

サンプル

このページをシェアする

関連タグ

関連記事

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連