重い CSS フレームワークに依存する必要がないようにレスポンシブ レイアウトを作成するためのテクニック

レスポンシブなレイアウトを構築するために重い CSS フレームワークは必要ありません。

Tailwind や Bootstrap などの CSS フレームワークは非常に強力ですが、小規模な Web サイトには多すぎる場合があります。これらの機能はすべて、純粋な CSS コードで実現できます。内部では、これらはすべて、レスポンシブ Web サイトに同じ基本テクニックを使用しています。

実際、これらのフレームワークやレスポンシブ Web サイトがどのように機能するかを本当に知りたい場合は、5 つの基本的なテクニックを理解する必要があります。

Web サイトをレスポンシブにする 5 つのテクニックを次に示します:

テクニック #1: ビューポートを構成する

単一のメタタグで、任意の画面サイズで Web サイトをどのように拡大縮小するかを制御できることをご存知ですか?

はい、そのメタ タグは Viewport です。

ビューポートが何なのかわからない場合は、ビューポートは、携帯電話、タブレット、デスクトップなどのデバイス上の Web ページ上に表示される領域です。それが何をするのか尋ねるかもしれません。デバイスの画面サイズに基づいて、コンテンツをどのように拡大縮小して表示するかを決定します。

画面にはさまざまなサイズがあるため、Web サイトの応答性を高める上でビューポートは重要な役割を果たします。

さて、どうやって使うの?

HTML ファイルで Viewport メタ タグを使用するだけです。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

テクニック #2: モバイルファーストのアプローチを採用する

モバイルファーストでデザインしていないなら、それは間違っています。

今日のウェブトラフィックの半分以上はモバイルデバイスからのものだからです。そして、それが Tailwind が採用したアプローチです。そして彼らはあなたにも同じことを求めています。ここでは、フレームワークの代わりに純粋な CSS を使用することについて話していますが、アプローチは同じです。

モバイルファーストのアプローチは、さまざまな種類のデバイスに対して同じコードの複数のバージョンを作成する必要があるため、長期的には役に立ちます。

テクニック #3: CSS グリッドとフレックスボックスを活用する

Web サイトにまだ Float ベースのレイアウトを使用していますか?

そうでないことを祈ります。まだ使用している場合は、柔軟なレイアウトを作成するための強力なツールである Flexbox と CSS Grid に切り替える時期が来ています。

1 次元のレイアウトを作成する必要がある場合は、Flexbox を使用してください

2 次元レイアウトを作成する必要がある場合は、グリッドを使用します

テクニック #4: 流動的なレイアウトを作成する

Web サイト上のあらゆる場所で固定ピクセル値を使用していませんか?

ほとんどの開発者は、画面上のさまざまなレイアウトを開発する際にピクセル(px)値を使用することを選択します。ピクセル値は固定レイアウトには適していますが、レスポンシブ レイアウトにはあまり適していません。パーセンテージベースの値などの流動的なレイアウトを使用すると、レイアウトはビューポート サイズに応じてスムーズにサイズ変更されます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

テクニック #5: メディア クエリを賢く使用する

メディア クエリは、レスポンシブなレイアウトを作成するためのもう 1 つの役立つテクニックです

しかし、それは賢明に使用する必要があります。レイアウトごとに異なるブレークポイントを使用しています。ほとんどの開発者はそれを間違っています。考えられるすべての画面サイズに合わせて作成し始めると、コードが管理不能になります。

私の提案では、デバイス カテゴリ間の主要な遷移に対してメディア クエリを実行する必要があります。たとえば、モバイルからタブレットへ、タブレットからデスクトップへ。

~

ご覧のとおり、Web サイトの応答性を高めるために利用できる手法は複数あります。机上では、5 つの異なるテクニックをすぐに使用できるように見えますが、実際には、本番 Web サイトで作業を開始すると、これらすべてのテクニックの使用例が表示され始めることになります。

それでは、レスポンシブなサイトを構築して、最も効果的に使用したサイトを教えてください。

この記事を読んで面白かったら、Twitter/X で私をフォローして続きを読んでください。

以上が重い CSS フレームワークに依存する必要がないようにレスポンシブ レイアウトを作成するためのテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。