こばゆた
以下の様にリストの先頭に付く点(リストマーカー)に色を付けたい時があるかもしれません
- リスト
- リスト
- リスト
そんな時のメモです。
またリスト関連の記事はコチラになります↓
1.リストに色を付ける
1-1.パターン１ spanタグを使う
- STEP1リストを作成する
<ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul>- リスト
- リスト
- リスト
- STEP2liタグの中にspanタグを入れる
<ul> <li><span>リスト</span></li> <!--<span>を入れる--> <li><span>リスト</span></li> <li><span>リスト</span></li> </ul> - STEP3リストに色を付けるまずリスト全体にマーカーに設定したい色を設定します。
ul{ color: blue; /* リストマーカーの色を指定 */ }- リスト
- リスト
- リスト
- STEP4spanタグに色を付ける文字色に設定した色に戻せば完成です。
ul{ color: blue; /*リストマーカーの色を指定*/ } span{ color: #333; /* リストの色を指定 */ }- リスト
- リスト
- リスト
1-2.パターン2 疑似要素で作成する
- STEP1リストを作成する
<ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul>- リスト
- リスト
- リスト
- STEP2リストマーカーを消すlist-style: none;で普通に消します。
ul{ list-style: none; }- リスト
- リスト
- リスト
- STEP3疑似要素でリストの前にマーカーを挿入する疑似要素を使ってマーカーを表示します。
またliをdisplay: flexにすることでリストマーカーとリストの本文の高さを合わせています。ul{ list-style: none; } li{ display: flex; /* 点とリストを横並びに */ align-items: center; /* 垂直方向に中央揃い */ } li::before{ content: "⚫︎"; /* 記号(黒丸)を挿入 */ color: blue; /* 好きな色にする */ font-size: 0.6em; /* 黒丸の大きさに差異があるので調整 */ margin-right: 1em; /* 余白 */ }- リスト
- リスト
- リスト
完成です。
ちなみに疑似要素の中身をハートにすればかわいいリストにもなります。
ul{
list-style: none;
}
li{
display: flex; /* 点とリストを横並びに */
align-items: center; /* 垂直方向に中央揃い */
}
li::before{
content: "❤︎";
color: #f67690;
font-size: 1.5em;
margin-right: 0.25em;
}- リスト
- リスト
- リスト
コメント
すみません質問というか要望があります
こちらの『1-2.パターン2 疑似要素で作成する』を使用させていただいたのですが、リスト内で改行をすると、リストの点の位置が一行目ではなく、一行目と二行目の間の位置に来てしまいます
この点を一行目の正しい位置に固定する記述を教えていただけませんでしょうか
よろしくお願いいたしますm(__)m
コメントありがとうございます。
コメントをいただいたことで新たな気づきと修正点が見つかりましたので大変助かりました。
複数行の場合はalign-items: center;を削除してみてはいかがでしょうか？
参考までにgoogle fontsで特殊なフォントを読み込んでいる場合はテキストの高さ(line-height)が変わってきますのでこの限りではないかもしれないですのでご注意ください。
返信とアドバイスをありがとうございますm(__)m
ご指摘の通りに align-items: center; /* 垂直方向に中央揃い */ を削除しましたところ、点が一行目に来たのは良いのですが今度は一行目の上の方に来てしまってこれもまた不自然な感じになってしまいました…
｀テキスト ←ちょっとわかりにくいかもしれませんがこういう感じです
点の位置が一行目で且つテキストの真ん中の位置というのが一番良いポジションなのですが中々難しいものなのですね(汗
・一行目テキスト
二行目テキスト
こちらを実現したいのですが何とかなりませんでしょうか・・・
そうなってくると、
li::before{
・
・
略
position: relative;
top: 〇〇px; ←ここの数値で合わせる
}
少々強引ではありますがこちらはいかがでしょうか？
ありがとうございます！そのやり方でばっちりできました！
まとめると
li{
display: flex; /* 点とリストを横並びに */
align-items: center; /* 垂直方向に中央揃い */
}
から
align-items: center; /* 垂直方向に中央揃い */
を消します
そして
li::before{
content: “⚫︎”; /* 記号(黒丸)を挿入 */
color: blue; /* 好きな色にする */
font-size: 0.6em; /* 黒丸の大きさに差異があるので調整 */
margin-right: 1em; /* 余白 */
}
の中に
position: relative;
top: 5px;/* 5pxにしてみました */
を足して
li::before{
content: “⚫︎”; /* 記号(黒丸)を挿入 */
color: blue; /* 好きな色にする */
font-size: 0.6em; /* 黒丸の大きさに差異があるので調整 */
margin-right: 1em; /* 余白 */
position: relative;
top: 5px;/* 5pxにしてみました */
}
これで思ってた通りにレイアウトになりました
色々と御指南いただきありがとうございました
また他のCSSを利用させていただく機会がありましたらその時はよろしくおねがいいたしますm(__)m
お世話になりました！
理想の形ができてよかったです！
また何かありましたら参考にしていただけたらと思います。
もちろん聞いてもらっても大丈夫ですw