テックブログWizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。2021-09-28知ってると得するかもしれないCSS(Sass)のニッチなテクニック集CSS皆様こんにちは、フロントエンドエンジニアの佐々木です。今回は私が実際に実務で使用しているCSS(Sass)のちょっとしたテクニック集を紹介しようと思います。否定疑似クラス「:not()」を利用した余白のとり方:not()に:first-childを指定することで、最初の要素以外という指定ができます。}}これの何が良いのかというと、リストのようなレイアウトは最初もしくは最後の余白を0にしたいことがほとんどだと思います(他の要素への影響を最小限にするため)。.list-itemに直接margin-topをとってしまうと.list-item:first-childでmargin-topを打ち消す記述をしないといけません。:not()を使用することで不要な記述を減らすことができます。することで次の要素が同じだったらという指定ができます(ここでは.l-section)。}}先程の&:not(:first-child)に似ていますが、要素の間に別の要素が入って来た時の挙動が微妙に違います。注意点としてこの方法はネストの親でのみ使用可能です。ちなみに以下と同じ意味です。}}詳細度を無理やり上げるCSSには詳細度というのもが存在します。上書きするにはその詳細度を上回る必要があります。!importantを使えば簡単に上書き可能ですが、宗教上の理由で!importantを使えない方がほとんどだと思います。以下はその代替方法です。class="text">この文字の色は赤です。}}上記のように&:not(#_)とすることで、.textは#_ではないという指定になります。することでIDを指定した時と同等の詳細度を得ることができます。この方法のメリットは!importantを使用せずに高い詳細度を得ることにあります。AMPのような!importantが使用するとエラーが出る環境だと使う可能性があります。可読性はあまり良くないので、そもそもこれを使わなくて済むようなCSS設計を心がけたほうが良いです。他に有名な詳細度を上げる方法として:not(:root)という方法も存在します。画像の比率を固定する様々なデバイスに対応しないといけない現在のWEB制作において画像の比率を維持するということは非常に重要なことです。以下はpaddingの仕様を利用した画像の比率維持方法です。1080pxを想定しています。1080pxの比率は画面の幅が変わっても維持されます。ここで重要なのは疑似要素::beforeのpadding-topです。padding-topは%で指定するとその値は親要素の幅に対しての割合となります。以下の計算式に当てはめると幅に対する高さの比率を求めることができます。100%これを利用して疑似要素で高さをとり、imgをabsoluteで浮かせて配置することで画像の比率の維持が可能です。非常に可読性が悪くなるのでこういった面倒な計算をするものはmixin化すると使い勝手がよくなります。1080);親要素を突き破って横幅100%背景のみ横幅100%にして色をつけたいときなどに役に立ちます。50%);ポイントはpaddingで内要素の幅を保っていることです。padding削除すると完全に横幅100%になります。状況に応じて使い分けていくと良いでしょう。否定形のメディアクエリnot演算子を使うとメディアクエリの内容を反転することができます。767px以下768以上のスタイルを書きたい場合があるとします。}このように書きたくなりますが、これは特定の条件でスタイルが当たりません。特定の条件とは768px〜767pxの間である画面幅が767.5pxのなどの場合はスタイルが当たりません。これはブラウザの拡大率や画面の解像度の組み合わせによって起こる可能があります。}上記のようにメディアクエリにnot演算子を組み合わせることによって画面幅が768pxより小さい場合という指定が可能です。画面幅が767.5pxの場合でもスタイルが当たります。以下のように実装するとテキストは見えないけどスクリーンリーダーは読み上げ可能を実現できます。class="visually-hidden">このテキストは見えないけどスクリーンリーダーは読み上げます。visuallyの箇所をご確認ください。noneではないのでフォーカスが可能な点が挙げられます。最後に今回は「CSSのニッチなテクニック集」という内容でパッと思いついたものを紹介してみました。知っている人は「なんだそんなことか」と思われる内容だったかもしれません。CSSはかなり自由に書けてしまうのでオレオレコーディングになりがちです。:not()を利用したものは便利な反面、知らない人は「ん?」ってなることが多いです。他の人もCSSを触ることを考慮して複雑な内容ほどコメントを残しておくと良いでしょう。それでは今回は以上となります。この記事が少しでも誰かの役の立てればいいなと思います。Wizではエンジニアを募集しております。興味のある方、ぜひご覧下さい。next/imageを使ってみたこんにちは、フロントエンドエンジニアの松尾です。(1)リンク利用規約/免責事項このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。はてなブログをはじめよう!wiz012さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。