【css】・(ビュレット)に装飾をしてテキストと隣接させる

手書きやワードで箇条書きを作成する時は・(ビュレット)+文字の構成と決まっていますが

cssでもdisplay:flexを使ってビュレットに見せかけたdivとテキストを隣接することで

少しこじゃれた見出しを作ることもできます。

これを作るには、まず各クラスに役割を持たせます。

各クラス概要↓

column-chunk: 子クラスであるcolumn-barとcolumn-textに影響を与えるクラス

column-bar: ビュレットを装飾するクラス

column-text: 見出し分を装飾するクラス

詳細

column-chunkでは、display:flexプロパティを設定することで子クラス全てを

横並びにします。

display:flexは今回のお題である「カスタマイズ」した見出しを作る為に必須のプロパティです。

column-barでは、ビュレットの見た目を変えています。下のプロパティの場合はやや小さめの大きさで表示する

よう設定してあります。marginは横のみ調整です。

column-textは、そのままテキストです。marinとpaddingをあえて0にしているのは、デフォルトで現れるテキスト周りの

空白を除去するためです。

</pre>
<div className="column-chunk">
<div className="column-bar"></div>
<p className="column-text">{props.text}</p>
</div>
<pre>

</pre>
.column-chunk{
display:flex;
}
.column-bar{
width:15px;
height:20px;
background-color:#F6AD49;
margin: auto 4px;
}
.column-text{
margin: 0px;
padding: 0px;
}
<pre>

段落ごとに何か装飾が欲しい場合に試してみてください。