wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

   

こんにちは、管理人@SS_mshpです。

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』みたいな時に役に立つCSSテクニックを紹介します。使うのは『擬似クラスfirst-child』。実際の適応のさせ方と、最初の見出し要素にfirst-childが効かなかった例もご紹介。さっそく確認していきましょう。

今回やりたい内容~横並びリストメニューで、最初だけボーダー無しにしたい→擬似クラスfirst-child使ってみる

実行前~横並びリストメニューの最初のボーダーが邪魔


このサイトのPCビュー・メニュー部分です。項目ごとにボーダーで区切りたかった(liにborder-left:dottedを指定)んですけど、単純にCSSに書いただけではこのようになります。一番端の部分にまでボーダーが入ってしまい、はみ出て見た目が微妙になります。なんとか最初の要素だけ『border:none;』にできないかなと思います。

コード(擬似クラスfirst-childを使ってみる)&実行結果

そこで、『擬似クラスfirst-child』を使ってみます。最初の要素という意味です。ポイントは『nav li :first-child』じゃなくて、『ul li:first-child』というところ(これは記事後半を読んでいてだくと明らかになります)。first-childのliタグには、『border-left:none;』を指定しました。


このとおり、最初の要素だけボーダーを消すことができました。

実験~見出しタグh2で、記事内最初のものだけmargin消したい

h2:first-childが効かない例~他要素がfirstと判定されている?


リストでできたので、需要があるかもな、他の要素でもやってみます。需要があるかもしれない『見出しタグの最初の要素だけ違うCSSを適応』です。例えば、見出しタグh2に、上下marginが設定されているんだけど、『最初の要素だけmarginをカットしたい』からといって、単純に『h2:first-child』と書いてみると・・・

これは適応されません。理由は、『記事内にもいろいろな要素が入っていて、h2でない他要素がfirstと判定されている(しかしCSS書いてない)』ためです。リストタグのときは『ul li:first-childと書き、ul直下にli/li/liみたいな構造だったから、サックリ効いていた』と考えられそうです。上段落のリストのときも、『navとかheader li』だとダメ、みたいな感じでした。

『singlecontentクラス』でくくって、h2がはじめに出るようにする


で、文中のh2に、first-child margin:0を適応させた方法はコレ。h2が最初になるように、記事中の文章を『div clas="singlecontent"』でくくりました。これでh2がはじめの要素になるので、h2:first-childにCSSが適応されます。

javascriptで要素を判定してCSS出力とかしても良さそうだけど、設計の段階で『見出し最初の要素用クラス』とかを作っておいてもラクそうです。

おまけ:divでくくって、最初要素とさえ判定されれば、『h2:nth-of-type(1)』と書いてもok


divでくくって、最初の要素とさえ判定されれば、『nth-of-type』と書いても大丈夫です。(1)というのは、最初の要素という意味です。配列とかだと0が最初なのにややこしいですね(笑)

参考リンク(Mozilla・MDN Web Docs)

あとがき・まとめ

  • 横並びメニューのリスト項目・左右ボーダーなど、単純に一括指定では、最初や最後の要素で表示が微妙になるときがある
  • 管理人のケースのように、最初の要素だけボーダーを消したい場合は『擬似要素first-child』を使う
  • パラメータでn番目などを指定できる『nth-child』や、最終要素を指定できる『last-child』もある
  • 『li』しか入っていないリストタグなどはわかりやすいが、他要素のせいで判定されないこともあるので注意

まとめると、このような感じでしょうか。兄弟要素を一括で指定よりも、『最初・最後・n番目』なども使いこなせると、よりデザインの幅が広がると思いますので、今回のコラム内容および、参考リンクの内容も、ぜひチェックしてみてください。

◆この記事で問い合わせ

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。
『サイトを既にお持ちで、リニューアル』の場合は、¥10万以下でご対応します(月額管理費/24回支払い縛りなどの強制無し)。

【カテゴリ】 - CSS, webメディア制作運用
【タグ】 - ,

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【WPプラグイン】Smart Custom FieldsとCustom Field Bulk Editorは相性悪い?(空リンク・真偽値フィールドに文字)

今回は、管理人がカスタムフィールド系の案件で使っているプラグイン ...

イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法

今回は管理人が、お取引先のサイトにつけようとしたけど、より便利な ...

【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが

今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?

今回は、ちょっと需要があるかもしれない『WordPressカスタ ...

WP管理・投稿画面カスタマイズ~『p』『h2』みたいなタグ・定型文をボタン1つで記事に追加したい

今回は、以前サイト制作のお取引先さまと話した、WPの記事を投稿す ...