EasyWork-SYStem

もっと簡単にしてよ!を叶えたい

箇条書きのCSS

 例えばメニューみたいなものは、内容を並べて書きたくなります。そういった内容は箇条書き<ul><li>で書いておくと良いようなので、その覚書です。

<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

 検索エンジンがどうこうという話がありますが、人間的にもHTMLソースを見返したときにわかりやすいように感じています。

箇条書きを横に並べるCSS

 個人的に好きな書き方の必要最低限な内容で、このCSSだけで上のHTMLが下のように表示されるはずです。

内容1 内容2 内容3

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プロパティで1文字分の右余白を入れています。しかし、:not(:last-child)の設定をすることで、最後の内容以外に、margin-rightプロパティの設定が効くようにしています。


EasyWork-SYStem

 日々の煩雑な業務を簡便にすることを目的に、IT関連の機器導入などの設備構築から、業務システムのアプリケーション開発など、様々なIT業務サポートを請け負っております。


privacy policy

デル株式会社

ウイルスバスター公式トレンドマイクロ・オンラインショップ

プレミアムバンダイ