知っておくべき興味深いCSS機能

先週、CSSの疑似要素と疑似クラスについて話していました。 その投稿では、これらのCSS機能を使用して、より簡潔でわかりやすく、保守しやすいコードを生成する方法を説明しました。 今日は、訪問者の好みを考慮した適応型Webサイトを構築するためのいくつかの追加のCSSプロパティを共有したいと思います。

object-fitとobject-positionのアスペクト比

object-fitは、コンテナに合わせて置換要素（画像など）のサイズを変更する方法を設定できるCSSプロパティです。 具体的な例でこれが何を意味するのか見てみましょう。

次の垂直方向の画像があるとします。

次の領域に表示します。

これは15emの高さで、使用可能な幅の80%を占めます。 原則として、私たちがしなければならないのは、画像に特定のwidthとheightを設定することだけだと思う​​かもしれませんね。

 .custom-size { height: 15em; width: 80%; }

そうすると、画像のアスペクト比が台無しになっていることがわかります。

特定の幅と高さを使用するときに画像が歪むのを防ぐために、開発者はdivのCSS backgroundプロパティに依存していました（そして一部は今でもそうしています）。 したがって、 imgタグを使用して画像を追加する代わりに、 divコンテナを作成していました。

 <div></div>

上記のdivに正しいサイズを設定してから、 background-sizeプロパティとbackground-positionプロパティを使用してCSS経由で実際の画像を追加します。

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

そしてここであなたは結果を見ることができます：

divタグでCSS backgroundプロパティを使用して画像をスケーリングおよびトリミングすることは、意味的に正しいHTMLタグであるimgを使用しなくなったため、悪い解決策です。 さらに、 imgタグには、より高速でアクセスしやすいWebサイトを実現する多数のクールなプロパティが含まれています。画像を説明するaltプロパティ、応答性をsrcset 、遅延loadingへの読み込みなどです。

画像自体を歪めることなく特定の寸法に合うように画像を拡大縮小およびトリミングする場合は、 background-sizeおよびbackground-positionとして動作するobject-fitおよびobject-positionプロパティを使用するだけです。する：

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

前のルールをimgタグに適用する場合：

 <img class="custom-size" src="…/image.jpg" />

これはあなたが得る結果です：

まさにあなたが興味を持っていたものですよね？

このプロパティについて詳しく知りたい場合は、ここにすべての必要な情報へのリンクがあります。

メディアクエリを使用したアダプティブデザイン

メディアクエリは、訪問者がWebにアクセスするデバイスまたはアプリケーションの特性に基づいてCSSルールをWebサイトに追加できるメカニズムです。 メディアクエリはレスポンシブウェブサイトを構築するための基礎であるため、あなたはそれらにある程度精通していると確信していますが、それらを使用してできることはもっとたくさんあります！

クラシックメディアクエリ

CSSスタイルシートでメディアクエリを使用するのは、 @mediaキーワードを追加するのと同じくらい簡単です。1つはメディアクエリがアクティブになるタイミングを説明する条件、もう1つは必要なCSSルールのセットです。条件が満たされたときにロードされます。 メディアクエリがレスポンシブデザインを構築するための基礎となるのはそのためです。訪問者のブラウザのwidthに応じて、ルールのセットを適用するだけです。

たとえば、次の段落のサイドバーを変更するとします。

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 ポーチのライオンは時々柔らかく醜いですが、屋外の要素を震わせます。 しかし、熱ストレスと呼ばれる起業家の必要性。 電子レンジを予約しましたが、私のドアは常にまたは時々大量の著者です。 AndroidとNuncsodalesinterdum、tincidunt erat ac、tinciduntelit。 ただし、ultricies ac、arcumetusSedはcongueします。 便宜上、レオ強化タンパク質を恐れてください。 テルスorci、tempor id egestas necであり、少なくとも何人かのプレーヤーを獲得します。

ブラウザの幅に応じて、虹のすべての色を使用するようにします。 CSSを介してこの動作を実現する方法は次のとおりです。

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

とても簡単ですよね？ ブラウザの幅が特定のしきい値を超えるたびに、異なる色を適用する必要があります。 画面が大きくなると「新しい」ルールが適用されるため、モバイルファーストアプローチを使用してこれを実装することに注意してください。 ウィンドウの幅を変更すると、結果が表示されます。

CSSでダークモードを実装する方法

ダークモードは、モバイルとデスクトップの両方で現在流行しています。 ユーザーがダークモードを好むかどうかを確認するためのメディアクエリがあることをご存知ですか？ メディアクエリprefers-color-schemeを使用すると、ユーザーがlight配色を好むかdark配色を好むかを確認できます。 つまり、すべての訪問者の好みに一致するように、Webサイトの2つのバージョンを構築することができます。

たとえば、次のHTMLスニペットについて考えてみます。

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

およびこれらのCSSルール：

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

設定に応じて、前のHTMLスニペットの「動的」部分がライトテーマまたはダークテーマのように見えることがわかります。

かなりかっこいいですねそしてシンプル！

メディアクエリを使用したその他の興味深いユースケース

使用できるメディアクエリはたくさんありますが（ここに完全なリストがあります）、特に1つに焦点を当てたいと思います。 具体的には、ページがブラウザに表示されているか、印刷されようとしているかによって、さまざまなスタイルを適用する方法を説明したいと思います。 あなたがしなければならないのは、次のようにメディアクエリにprintまたはscreenキーワードを使用することです：

 @media print { … } @media screen { … }

または、ユースケースごとに1つずつ、2つの個別のCSSファイルを作成し、 linkタグのmediaプロパティを使用してHTMLに含めます。

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

これの興味深い点は、サイトを印刷用に設計されたコンテンツに変換するスタイルシートを作成できることです。 したがって、たとえば、印刷バージョンでは意味をなさないWebの動的な部分（メニューやフォームなど）を非表示にすることができます。 または、たとえばリンクのターゲットURLなど、印刷時に失われるものが表示されるようにすることもできます。

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

その結果は次のとおりです。

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 pharetravelitelementumのturpisinterdumの前庭mollisレオ。 Nam eget lacus sed lacusdictumscelerisque。 Proin porta ligula sed mi semper、vel interdummassaauctor。 Pellentesque et massa congue、tincidunt erat ac、tinciduntelit。 Sed acdolormetus。 Nam commodo metus sed ligulaconsecteturinterdum。 Curabitur odio est、tempor id egestas nec、aliquamatnisl。

CSS変数

最後に、もう1つのすばらしいCSS機能であるCSSカスタムプロパティ（CSS変数とも呼ばれます）について説明しましょう。 複雑なWebサイトには非常に大量のCSSがあり、同じ値が何度も繰り返されることは非常に一般的です。 たとえば、カラーパレット、境界線、パディングなどがいたるところに使用されています。 そうですね、CSS変数はこの複雑さを単純化します。 また、ダークモードを簡単に実装するのに非常に便利です。

CSS変数はまさにあなたが考えているものです。つまり、意味のある名前の背後にある特定のCSS値を保存して再利用する方法です。 --main-text-colorが#333よりも理解しやすいですね。

カスタムプロパティの宣言は、ダブルハイフン（ -- ）で始まるカスタムプロパティ名と、任意の有効なCSS値にすることができるプロパティ値を使用して行われます。 他のプロパティと同様に、これは次のようにルールセット内に記述されます。

 element { --main-color: red; --main-padding: 2em 1em; }

CSS変数を定義したルールブロックで使用するセレクターによって、そのスコープが決まります。 つまり、 div.bannerルール内で変数を定義すると、その変数はそのスコープでのみ使用可能になります。 ただし、最も一般的なのは、疑似クラス:root ：を使用してグローバルスコープに変数を作成することです。

 :root { --main-color: red; --main-padding: 2em 1em; }

CSS変数を使用するには、 var関数内でその名前を指定するだけです。

 p { color: var(--main-color); padding: var(--main-padding); }

CSSはあなたを助けるためにここにあります

WebページのHTML構造は、家の土台のようなものです。何か音を立てるには、しっかりとした土台が必要です。 Webページを作成するときは、意味的に正しくクリーンなHTMLツリーを使用していることを確認してください。 これにより、すべての訪問者がすべてのブラウザで機能するページが作成され、その上にCSSトリックを適用するのは簡単で効果的です。

今日の投稿が気に入っていただけたでしょうか。 もしそうなら、それをあなたの友人と共有してください

UnsplashのWilliamDaigneaultによる注目の画像。