[css] header に仕切りを入れる方法

ヘッダー css

こんにちは、タカフミです!

今回はheaderに仕切りを入れて分割をする方法を解説します。

ヘッダーの準備

まず最初に以下のようなheaderを準備します。

HTML

htmlはこんな感じです。

CSS

cssはこんな感じです。headerを横並びにするときはdisplay:flexを使いましょう。

詳しくは下の記事にまとめました。

仕切りを入れてみよう

文字の間に何かを挿入する時は、変数名+変数名で入れることができ、今回の場合はli+liになります。

また、仕切りはborder を指定することで入れることができます。

では早速このヘッダーに仕切りを入れていきましょう!

文字の間にドットの仕切りを入れました!

CSS

上で述べたようにli+liで仕切りを挿入しましたが、これでは両端に仕切りが置けませんね、、、

この問題を解決するためには以下のように書けば良いです。

CSS

liで文字の両端に課せねておいた仕切りをli+liで打ち消しています。

これで完成です!!

両端にも仕切りをおけました!!

まとめ

今回はヘッダーの間に仕切りを置く方法を解説しました。

  • li+liで文字の間に何かを挿入
  • liを用いて両端に仕切りを置く

こんな感じで終わりにしようと思います。