箇条書きのCSS
例えばメニューみたいなものは、内容を並べて書きたくなります。そういった内容は箇条書き<ul><li>で書いておくと良いようなので、その覚書です。
<ul>
<li>内容１</li>
<li>内容２</li>
<li>内容３</li>
</ul>検索エンジンがどうこうという話がありますが、人間的にもHTMLソースを見返したときにわかりやすいように感じています。
箇条書きを横に並べるCSS
個人的に好きな書き方の必要最低限な内容で、このCSSだけで上のHTMLが下のように表示されるはずです。
内容１ 内容２ 内容３
ul {
display: flex;
justify-content: right;
list-style-type: none;
}
li:not(:last-child) {
margin-right: 1em;
}親要素の<ul>に対して、displayプロパティに、flexを設定するだけで、<li>要素が横に並んでくれます。横並びにした内容たちを右側に寄せるために、justify-contentプロパティに、rightを設定しています。箇条書きの頭には「・」が勝手に付きますので、それを消すために、list-style-typeプロパティを、noneに設定しています。
横並びになった内容同士の間に隙間ができるように、子要素<li>に対して、margin-rightプロパティで１文字分の右余白を入れています。しかし、:not(:last-child)の設定をすることで、最後の内容以外に、margin-rightプロパティの設定が効くようにしています。
