手書きやワードで箇条書きを作成する時は・(ビュレット)+文字の構成と決まっていますが
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>
段落ごとに何か装飾が欲しい場合に試してみてください。
