15 HTMLとCSS講座 CSS編 隣接セレクタ編

Webサイト制作
Yoshiko先生
Yoshiko先生

ホームページ制作基礎講座 15回目は、グローバルナビゲーションでよく使う隣接セレクタの書き方です。CSSです。

はてな?
はてな?

隣接セレクタって何ですか?そもそもグローバルナビゲーションって?

Yoshiko先生
Yoshiko先生

グローバルナビゲーションは、どのページにも存在する目次で、ホームページの上の部分にHOME | 会社概要 | マップ | とか並んでいるところですよ。
隣接セレクタは そのナビゲーションのマークアップ UL LI の 行単位 li に対して下記のように書いていきます。

隣あった <li> が存在する場合のみ 指定ができる隣接セレクタ

header nav ul {
     list-style: none;
     display: flex
 }
 header nav ul li {
     flex: 1;
 }
 header nav ul li+li {
     border-left: 1px solid #ddd;
 }
Yoshiko先生
Yoshiko先生

これは ul に display : flex  その子要素の li が 両隣に li がある場合のみ 左側に線を書くというものです。

はてな?
はてな?

左がわの線ですか?  border-left ?

Yoshiko先生
Yoshiko先生

そうです 左側ですね。下記の動画で解説していますので、確認してみましょう。

15 ホームページ制作基礎講座 CSS 隣接セレクタ編

 

 

タイトルとURLをコピーしました