最近コーディング案件が多く、バリバリ経験値を積んでいます！
コーディング初心者の方に
ぜひオススメしたい内容を用意しました
隣接セレクタを使おう！
隣接セレクタってめっちゃ役に立ちますね🌟複数の要素にマージンつけるときとか最後のマージンを打ち消さなきゃいけない場面がありますが、この一連の作業を一行で終えてしまう驚き‼️#駆け出しエンジニアと繋がりたい
— かっさ@収益3桁ブロガー (@kassablog) August 11, 2020
Twitterでちょっと反響もらえたので紹介したいと思います
隣接セレクタというのは、指定した直後の要素に適用されるものです
実際に使い方を見てみましょう！
例題を見て学ぼう
【例題】li要素を中央寄せで横並びしてください
改善前
See the Pen
selecter by kassa0916 (@kassa0916)
on CodePen.
ul要素の中にli要素を4つ横並びにしました
li要素の右側にそれぞれmarginを入れています
最後のli要素にmarginはいらないので0にしてます
改善後
See the Pen
selecter-improve by kassa0916 (@kassa0916)
on CodePen.
隣接セレクタを使いました
li + li ←ココです！！
プラス直後の要素だけ適用することができます
つまり２番目から４番目までの
li要素の左側にmarginをつけることができました
結果として一行減らすことができましたね
1行削除しただけのメリットって何？
正直、自分も教えてもらったときに
あまり実感がありませんでした...
まず、文字数削減により容量が軽くなることで
ページの読み込み速度がコンマ単位で早くなります
ただ体感できないくらいの僅かな差です
一番のメリットはコードの管理が容易になること！
特に職場では細かい修正が何度もあり
キレイなコードであれば修正が楽になります
なので常に人に見せられる
キレイなコーディングを意識しましょう☆彡