CSS開発における20のクイックTIPSを解説

2022-01-17 18:56:18

1. CSSリセットを使用する

normalize.css などの css リセットライブラリは長年にわたって使用されており、ブラウザ間の一貫性を確保するために、サイトのスタイリングに明確な基準を提供することができます。

ほとんどのプロジェクトでは、これらのライブラリに含まれるすべてのルールは必要なく、マージンやパディングをすべて削除するシンプルなルールで、レイアウト内のすべての要素に適用でき、ブラウザのデフォルトボックスモデルを変更することができます。

*{box-sizing:border-box;margin:0;padding:0}

box-sizing 宣言の使用は任意であり、以下に継承するボックスモデルフォームを使用する場合は省略可能です。

2. ボックスモデルの継承

ボックスモデルをhtmlから継承させる。

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

3、フレックスボックスレイアウトで余白の問題を回避する（Get Rid of Margin hacks width Flexbox)

ポートフォリオやイメージギャラリーなど、グリッドレイアウトを何度もデザインしようとすると、floatを使用している場合、必要な行数に分割するためにfloatをクリアしてマージンをリセットする必要があります。nth-、first-、last-child の問題を回避するには、flexbox の space-between 属性を使用します。

.flex-container{display:flex;justify-content:space-between;}.flex-container .item{ flex-basis:23%;}

4. リストボーダーの問題を解決するために :not() を使用する

ウェブデザインでは、通常、親セレクタで宣言されたスタイルを上書きするために、last-child nth-childセレクタを使用します。たとえば、ナビゲーションメニューの場合、ボーダーを使って各リンクの区切り線を作成し、最後のリンクのボーダーを解除するルールを追加します。

.nav li { border-right: 1px solid #666; }.nav li:last-child { border-right: none; }

これは、ある方法でブラウザにレンダリングを強制するだけでなく、特定のセレクタでそれを元に戻すという、非常に分かりにくい方法です。このような方法でスタイルを上書きすることは避けられません。しかし、最も重要なことは、: not pseudo-class を使うことによって、宣言したい要素にただ一つのスタイルを使うことができることです。

.nav li:not(:last-child) { border-right: 1px solid #666; }

これで、最後のliを除くすべての.nav liにボーダースタイルが追加されました！簡単でしょう？

もちろん、.nav li+li や .nav li:first-child ~li を使うこともできますが、 : not の方がよりセマンティックでわかりやすいと思います。

5. 本文にline-heightスタイルを追加する

非効率なスタイルシートになる原因のひとつは、常に宣言が繰り返されることである。CSSがよりスムーズになるように、プロジェクトの計画や組み合わせのルールを行うのがよいでしょう。これを実現するには、カスケードについて理解し、汎用セレクタで書かれたスタイルが他の場所でどのように継承されるかを理解する必要があります。

Line-heightをプロジェクト全体のプロパティとして使用することで、コード量を削減できるだけでなく、サイトのスタイルに標準的な外観を与えることができます

body {line-height: 1.5;}

この宣言には単位がないことに注意してください。レンダリングされたフォントのサイズの 1.5 倍の行の高さをレンダリングするように、ブラウザに指示しているだけです。

6. 任意の要素を垂直方向に中央寄せにする（vertically-center anything）

CSSGridレイアウトを使用する準備が整っていない場合、縦中央配置のグローバルルールを設定することは、コンテンツレイアウトをエレガントに設定するための基礎を築くのに良い方法です

{html, body
html, body {height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } ←クリックすると拡大表示されます。

7. SVGアイコンの使用

SVGは、すべての解像度クラスで使用され、すべてのブラウザでサポートされています。ですから、.png .jpg .gif などは捨てても大丈夫です。FontAwsome5もSVGアイコンフォントを提供しています。SVGフォーマットの設定は、他の画像タイプの設定と同じです。

.logo { background: url("logo.svg"); }

ヒント：ボタンのようなインタラクティブな要素にSVGを使用すると、SVGは読み込まれません。このルールに従うことで、SVGがアクセス可能であることを保証できます（HTMLに適切なaria属性が設定されていることを確認してください）。

.no-svg .icon-only:after { content: attr(aria-label); }

8. "OWLセレクタ"を使用する。

ユニバーサルセレクタ*と隣接兄弟セレクタ+を使用すると、他の要素の直後にあるドキュメントストリーム内のすべての要素に統一的なルールを設定する強力なCSS機能を提供することができます。

* + * { margin-top: 1.5rem; }

これは、タイプ・フォロワーの間隔をより均一にするための優れたトリックです。上のコラムでは、H3の後にH4が続く、段落の後に段落が続くなど、他の要素に続く要素は、少なくとも1.5remsの間隔（約30px）を空けています

9、一貫した垂直構造（Consistent Vertical Rhythm)

一貫した垂直方向のリズムは、コンテンツをより読みやすくする視覚的な美しさを提供します。フクロウセレクタが汎用的すぎる場合は、要素内で汎用セレクタ（*）を使用して、レイアウトの特定の部分に一貫した垂直方向のリズムを作り出します。

.intro > * { margin-bottom: 1.25rem; }

10. よりきれいな改行テキストにするには box-decoration-break を使用します。

複数の行に分かれる長いテキストに、均一なスペース、マージン、ハイライト、背景色を適用したいが、段落や見出し全体をひとつの大きなブロックのように見せたくはない場合、box-decoration-breakプロパティを使えば、パディングとマージンをそのままに、テキストだけにスタイルを適用することができます。

これは、ホバー時にハイライトを適用したい場合や、スライダー内のサブテキストにハイライトの外観を持たせる場合に特に有効です。

.p {display: inline-block;box-decoration-break: clone;-o-box-decoration-break: clone;-webkit-box-decoration-break: clone;}

インラインブロック宣言では、色、背景、マージン、パディングを要素全体ではなく、テキストの各行に適用することができ、クローン宣言では、これらのスタイルが各行に均等に適用されることを保証する。

11、等幅のテーブルセル

テーブルは扱いが難しいので、table-layout: fixed を使ってセルの幅を等しく保つようにしてみてください。

.calendar { table-layout: fixed; }

12. 属性セレクタを強制的に使用し、空リンクを表示させる

これは、通常class属性を持たないCMS経由で挿入されたリンクに特に有効で、カスケードに影響を与えることなく特定の方法でスタイルを設定するのに役立ちます。例えば要素にはテキスト値がありませんが、href属性にはリンク先があります。


a[href^="http"]:empty::before { content: attr(href); }

13. スタイル "デフォルト"リンク

リンクスタイルに関しては、ほとんど全てのスタイルシートに汎用的なAスタイルが掲載されています。このため、子要素のリンクに対して追加のオーバーライドやスタイル・ルールを書かなければならず、WordPress のような CMS を使用している場合、ボタンのテキスト色よりもメインのリンク・スタイルで問題が発生する可能性があります。

デフォルトのリンクのスタイルを設定するための、より控えめな方法を試してみてください。


a[href]:not([class]) { color: #999; text-decoration: none; transition: all ease-in-out .3s;}

14. 比率ボックス

固有の比率を持つボックスを作成するために必要なことは、div に top または bottom のパディングを適用することです。


.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute;    top: 0; width: 100%; }

パディングを20%にすると、ボックスの高さが幅の20%に等しくなります。子 div はビューポートの幅に関係なく、そのアスペクト比（100%/20% = 5:1）を維持します。

15. スタイルが崩れた画像

このヒントは、コードの削減ではなく、デザインの詳細を洗練させるためのものです。画像の破損は、見苦しいから、あるいは混乱を招くから（単なる空の要素）、などさまざまな理由で起こります。この小さなCSSで、より美しく見える効果を作りましょう。


img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; }img:before { content: "We're sorry, the image below is missing :("; display: block; margin-bottom: 10px; } img:after {    content: "(url: " attr(src) ")"; display: block; font-size: 12px; }

16. グローバルリサイズにはremを、ローカルリサイズにはemを使用する

html font size: 15px;のようにルートの基本フォントサイズを設定した後、包含要素のフォントサイズをremに設定することができます。


article { font-size: 1.25rem; } aside { font-size: .9rem; }

次に、text要素のフォントサイズをemに設定します。


h2 { font-size: 2em; } p { font-size: 1em; }

含まれる各要素が分割され、スタイル付けが容易になり、メンテナンスが容易になり、より柔軟になりました。

17. ミュートされていない自動再生動画を非表示にする

これは、ソースコードから簡単に制御できないコンテンツを扱っているときに、ユーザースタイルシートをカスタマイズするための素晴らしいトリックです。このトリックは、ページを読み込むときに自動再生ビデオの音で訪問者を邪魔しないようにするのに役立ち、また素晴らしい: not() 擬似セレクタを提供します。


video[autoplay]:not([muted]) { display: none; }

18. ルート型の柔軟な利用

レスポンシブレイアウトにおけるフォントサイズは、ビューポートに合わせて自動的に調整できるようにすることで、フォントサイズを処理するためのメディアクエリを記述する作業を省くことができます。フォントサイズは、:notとviewport unitを使って、viewportの高さと幅に基づいて計算することができます。


:root { font-size: calc(1vw + 1vh + .5vmin); }

これで、:notを基点としたルートemユニットが使えるようになりました。


body { font: 1rem/1.6 sans-serif; }

上記のrem/emのトリックを組み合わせると、より効果的な制御が可能になります。

19. フォーム要素のフォントサイズを設定して、モバイルでの操作性を向上させる

をクリックしたときに、モバイルブラウザ（iOS Safariなど）がHTMLフォームの要素を拡大表示するのを防ぐためです。