エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法 | 株式会社ウェブ企画パートナーズ
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法 | 株式会社ウェブ企画パートナーズ
近年のホームページには必ずと言っていいほど横並びのメニューが実装されています。グローバルナビゲー... 近年のホームページには必ずと言っていいほど横並びのメニューが実装されています。グローバルナビゲーションや、フッター部分のメニューなどでよく見られます。 そしてこういった横並びのメニューは下記のように、より見やすくするために項目をボーダーで区切っていることがよくあります。 横並びメニューの例1 横並びメニューの例2 このような項目間のボーダーを実装するためにはいくつかの方法がありますが、今回はその中でも簡単で余計なクラスを増やす必要がない「隣接セレクタ」を使った方法を紹介します。 そもそも隣接セレクタとは? 隣接セレクタはCSSにおけるセレクタの1つで、ある要素の「次に来る要素」を対象としています。 具体的に説明すると、以下のように要素が並んでいたとして、 <body> <div id="example"> <div class="aaa">要素A</div> <div class="bbb