05 ホームページ中級講座様々なセレクタ::隣接セレクタ

2020年4月10日2025年4月13日

前回の04ホームページ中級講座 display:flex のおさらいの続きになります。

動画で学ぶWebデザイン教室　 Fuku…

04 ホームページ中級講座 display:flex のおさらい | 動画で学ぶWebデザイン教室　 Fukuokamiyako 下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座ナビゲーションの作成(HTML) 02ホームページ中級講座ナビゲーションの作…

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <header>
            <h1>Flex Box</h1>
        </header>
        <nav>
            <!--このulの箇所を横並びにします-->
            <ul>
                <li><a href="#">box1</a></li>
                <li><a href="#">box2</a></li>
                <li><a href="#">box3</a></li>
                <li><a href="#">box4</a></li>
                <li><a href="#">box5</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

CSSの作成

* {
    margin: 0;
}
.content {
    width: 600px;
    border: solid 1px #000;
    margin: 20px auto;
}
header h1 {
    text-align: center;
    background: #ddd;
}
nav ul {
    list-style: none;
    padding-left: 0;
    display: flex;
}
nav ul li {
    flex: 1;
    border-right: 1px solid #000;
    text-align: center;
    background: #ff0;
}

重なりあったborderの修正

li要素に「border-right: 1px solid #000;」を記述すると、box5の右横にも線が入り、外側のborderに重なって、ここだけ太く見えてしまいます。

ホームページ中級講座の２回目では、:last-childいう擬似クラスを使いました。今回は、隣接セレクタを使った指定を行ってみましょう。

動画で学ぶWebデザイン教室　 Fuku…

02ホームページ中級講座ナビゲーションの作成(CSS) | 動画で学ぶWebデザイン教室　 Fukuokamiyako HTMLマークアップファイルの確認今回は、下記のページで作成したHTMLを使います。 https://fukuokamiyako.com/post-1470/ デフォルトのスタイルシート HTMLをブラウザでプ…

隣接セレクタ

隣接セレクタ（+）は、基準となる要素の直後に続く隣接した兄弟要素を指定するためのセレクタです。
この場合、ul要素内のli要素に隣接したli要素を指定しています。

HTMLでは

 <ul>
    <li><a href="#">box1</a></li> <!-- 隣接する li 要素がいない -->
    <li><a href="#">box2</a></li> <!-- box1 の直後に隣接 -->
    <li><a href="#">box3</a></li> <!-- box2 の直後に隣接 -->
    <li><a href="#">box4</a></li> <!-- box3 の直後に隣接 -->
    <li><a href="#">box5</a></li> <!-- box4 の直後に隣接 -->
</ul>

CSSでは

li + li {
    border-left: 1px solid #000; /* 隣接する li 要素の左側に線を指定 */
}

nav ul li {
    flex: 1; /* li 要素を均等に配置 */
    text-align: center; /* テキストを中央揃え */
    background: #ff0; /* 背景色を黄色に設定 */
}

最初の<li>要素（box1）には、隣接する要素がないため、border-leftは適用されません。
2つ目以降の<li>要素（box2以降）は、直前の<li>要素に隣接しているため、border-leftが適用されます。

不要な線を避ける
一番左の<li>要素（box1）には線が不要なので、明示的に隣接した要素だけを指定できる点が便利です。
コードの簡略化
隣接セレクタを使うことで、追加のクラスやIDを指定せずに、簡単にスタイルを適用できます。
効率的な管理
動的に生成されるリストでも、適切に隣接した要素だけにスタイルが適用されます。

CSSコード

*{
    margin: 0;
}
.content{
    width:600px;
    border:solid 1px #000;
    margin:20px auto;
}
header h1{
    text-align: center;
    background: #ddd;
}
nav ul{
    list-style: none;
    padding-left:0;
    display: flex;
}
nav ul li{
    flex:1;
/*    border-right: 1px solid #000;*/
    text-align: center;
}
nav ul li + li {
    border-left: 1px solid #000;
}
nav ul li a{
    color: #f00;
    text-decoration: none;
    padding:10px 0;
    display: block;
    background: #ff0;
}
nav ul li a:hover{
     background: #000;
    color: #000;
}