今日のレスポンシブWebコンポーネントを使用する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

今日のレスポンシブWebコンポーネントを使用する方法

Christopher Nolan

Feb 22, 2025 am 09:38 AM

今日のレスポンシブWebコンポーネントを使用する方法

数年前、私はWebコンポーネントについて多くのことを聞き始めました。私はかなり興奮し、ノイズが落ち着くと完全に忘れてしまいました。いくつかの良い動きがあり、サポートが増加し始めていることがわかりました。特に、レスポンシブWebコンポーネントは、レスポンシブデザインにどのようにアプローチするかを単純化するように設定されています。これは有望なことに、多くの開発者が今日それらの使用を開始する前に知りたいと思う4つの質問があります：

彼らは…

になります

Webの現在の状態に適合しますか？
ワーククロスブラウザ？
それらがドロップされるスペースに合わせて適応しますか？
モジュラーコードを宣伝しますか？

この記事では、これらの質問のそれぞれに対する答えを調べます！

キーテイクアウト

Webコンポーネントを使用すると、各コンポーネントに単一の真実のソースを備えたライブラリを作成し、コードの繰り返しを削減し、他の開発者またはWebサイトの所有者とコンポーネントを共有できるようになります。このアプローチはモジュラーコードを促進し、レスポンシブデザインへのアプローチを簡素化します。
Webコンポーネントは何ですか？

本質的に、それらは独自のHTML要素を構築できるW3仕様です。文字通りそれらについて何も知らない場合、記事で使用している用語のいくつかが基本的な理解が必要であるため、それらについて簡単に読む価値があるかもしれません。

なぜそれらを使用したいのですか？

Webコンポーネントを使用したい場合の良い例は、カラーピッカー、カルーセル、アコーディオン、タイプヘッドなどの要素など、ブラウザにネイティブに存在しないUIを構築している場合です。または、毎回再構築するのにうんざりしているさまざまなサイトで常に使用するコンポーネントがいくつかある可能性があります。これらは、ソーシャルボタン、購読フォーム、または通知などです。 Webコンポーネントを使用すると、などのHTMLタグを使用して、マークアップ、スタイル、およびスクリプトをカプセル化されたモジュールにバンドアップして参照できます。これは、Angular DirectivesまたはReactコンポーネントを使用した場合は馴染みのあるように思えますが、ここでの利点は、ブラウザとフレームワークの不可知論者に自生していることです。

Webコンポーネントを使用すると、UIの断片を1回構築し、どこでも使用できます。これは、各コンポーネントに単一の真実のソースを備えたライブラリを構築したいリビングスタイルガイドのようなプロジェクトに最適です。このアプローチは、コードを繰り返し、あなたまたはあなたのチームがあなたのインターフェイスに参照を単純にドロップできるポータブルコンポーネントを持つことを意味します。

Webコンポーネントを使用するもう1つの大きな利点は、これらのコンポーネントをパッケージ化し、他の開発者またはWebサイトの所有者と共有することができることです。基本的に、消費者は次のようなインポートステートメントをWebページに配置できます。

次に、そのコンポーネントで定義したカスタム要素タグを使用します。これがWebページにインポートされているため、ページ上にカスタムコンポーネントのインスタンスが必要な限り多くのインスタンスを作成できます。購読フォームの例では、ページの複数の場所でタグを使用できます。もちろん、これを行っている場合は、作成した美しいコンポーネントが非常に柔軟であり、さまざまなデバイスと画面サイズで動作することを確認する必要があります。

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

これらの悪い男の子をレスポンシブなWebコンポーネントに変えます

デモンストレーションの最良の方法は例であると感じているので、異なるサイトと実装の間であまり変わらないUIの一般的な部分であるサブスクライブフォームを続けます。

以前に作ったものです：

私のWebコンポーネントテンプレート内には、フォームの基本的なマークアップがあります。

私のマークアップとCSSは、仕様のシャドードム部分を使用してコンポーネント内に押し出されています。これにより、カプセル化が得られ、他のスタイルが出血したり、親サイトに出血したりすることを心配することなく、コードでラベルセレクターと入力を使用できます。今日のレスポンシブWebコンポーネントを使用する方法

明確さと簡潔さのために、私はレイアウトに使用されるもの以外のスタイルを書き出すつもりはありません。 Float：left and Display：Table：Tableの組み合わせを使用して、このレイアウトを実現して、幅の破損を防ぎます。

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

デモとしてHTMLインポートを使用してSitePointサイトに引き込みます：

私たちはすべてセットアップされています、いくつかの応答性のあるテクニックを見てみましょう。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

メディアクエリ

私たちが知っていて愛する古典的なアプローチは、まだ生きており、レスポンシブなWebコンポーネントの中でうまくいっています。いくつかのブレークポイントで焼きたい場合は、コンポーネントをコーディングするときにテンプレート内に適用できます。または、その決定を消費者に任せたい場合は、コンテナにフック（クラスを使用して）を適用できます。この場合、私たちがする必要があるのは、フロートを剥ぎ取り、それらを完全な幅に調整することだけです。

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

しかし、メディアのクエリは今回私たちを救うのに十分ではありません。

サインアップフォームスタイルに満足しており、体内では正常に機能しますが、ウェブサイトの著者がサイドバーにチャックしたいときはどうなりますか？突然、私のフォームは押しつぶされているように見え、実際には使用できません。

これは、コンポーネントがその境界を認識していないためです。コンテキストがありません。

Webコンポーネントの全体的なポイントは、どこにでもドロップできることです。したがって、明らかにこれはしませんが、コンポーネントが応答性があり文脈的であることを保証するために使用できるいくつかのテクニックがあります。

FlexBox Trickery

Webコンポーネントの使用を検討している場合、オッズは最新のブラウザのみをサポートしており、IE9を心配していない場合、その場合、FlexBoxマジックの少しはこれらをレスポンシブWebコンポーネントに変えるのに最適かもしれません。追加のJavaScriptを必要としないため、これは私の好みのアプローチです。

もう一度、ここのコードサンプルは、私が使用したレイアウトスタイルを純粋に示しています：

容器を表示するように設定して表示します。Flex;フレックスラップ：ラップ、.form__item要素は並んで表示されますが、コンテナが小さくなりすぎるとうまくスタックするように、いくつかの調整を行う必要があります。 .form__itemの内部では、フレックスのフレックスの速記を使用しました：1 0 320px;これは、1つの成長、ゼロのフレックスシュリンク、および320ピクセルのフレックス基底に変換されます。フレックスラップをラップに設定することは、設定された基礎（320px）よりも小さくないことを意味しますが、それをフレックスに設定することは、利用可能なスペースの残りの部分を占めることを意味します。

ラベル要素と入力要素に同様の処理をしました。それらの組み合わせたフレックス値は合計320です。つまり、それらはより小さなコンテナサイズで望ましいように振る舞うことを意味します。

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

これらの調整を適切に配置すると、SitePointのサイドバーで同じ形式を見てみましょう。

ずっと良く！しかし、猫を皮を剥ぐ方法は複数あります。

要素クエリ

要素クエリのアイデアは、メディアクエリタイプの機能をエミュレートできるが、コンポーネントレベルで、レスポンシブWebコンポーネントに非常に便利だということです。基本的に、あなたのCSSでこのようなことを書くことができると想像してください：

要素クエリを使用して、まさに私たちにできることです。かなり強力な権利？

残念ながら、ブラウザベンダーが無限のループを引き起こす可能性に関心があるため、この手法はネイティブに利用できません。ただし、一部の賢い人は、この機能を有効にするためのプラグインを書いています。私の例では、Marc J SchmidtによるCSS要素クエリを使用しました。これは本当に素晴らしい実装です。また、次の同様のプロジェクトもあります

初等

要素query
eq.js

これらのプラグインのいずれかと上記と同様の小さなコードスニペットの組み合わせにより、サイドバーでのFlexBox実装とまったく同じ結果を得ることができます。

属性

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

レスポンシブWebコンポーネントの消費者に提供できるクールなものの1つは、属性を介したAPIです。たとえば、レイアウトと呼ばれる属性を設定し、「小」と「大」のサイズを持つことができます。コンポーネントの消費者は次のように使用できます。

これにより、小さな実装のスタイルがトリガーされます

シャドウdomでは、含有要素は次のように知られています。その例は、そうするかもしれません：

これにより、コンポーネントの消費者がいくつかの簡単なJavaScriptを作成して、提供したさまざまなサイズをめくることができます。これは、モジュールの内部に追加のJavaScriptをロードする代わりに、消費者に任せて、どのように接続するかを決定することを意味します。これにより、コンポーネントがより将来の証拠になることができます

自分で試してみてください！

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

このデモで言及しているFlexboxバージョンを自分のマシンで表示することに興味がある場合は、Chromeで以下を実行できます。

CORS Chrome拡張機能をインストールし、オンにします。これは、HTMLインポートが外部サイトから動作できるようにするためです。このページを更新するか、新しいタブまたはウィンドウでWebサイトを開くと、拡張機能が開始されます。

Chrome開発者ツールでは、これをタグ内に追加します。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

最後に、追加：

内部のどこかで、私のサブスクライブフォームが自動的に引き抜かれているのを見るはずです。お楽しみください！

結論

上記のアプローチは、実際にはUI開発に使用できますが、再利用可能で共有可能な性質のため、応答性の高いWebコンポーネントに特に役立ちます。

レスポンシブウェブデザインについて詳しく知るのに興味がある場合は、Chris Wardによって書かれた新しい本「Jump Start Responsive Web Design」をご覧ください。レスポンシブWebコンポーネントに関するよくある質問（FAQ）

適切に設計されたレスポンシブWebコンポーネントの重要な要素は何ですか？

適切に設計されたレスポンシブWebコンポーネントは、柔軟で適応性があり、効率的でなければなりません。画面サイズに応じてレイアウトを調整できるようにする流体グリッドシステムが必要です。また、画面に合うようにサイズを変更できる柔軟な画像とメディアも必要です。さらに、画面のサイズ、解像度、オリエンテーションなどの特性に基づいて、Webサイトが異なるデバイスに異なるCSSスタイルルールを使用できるようにするメディアクエリが必要です。最後に、読み込み時間とパフォーマンスの点で効率的である必要があります。

CSSコンテナクエリは、応答性コンポーネントにどのように貢献しますか？ビューポートではなく、親コンテナのサイズに基づいて適用されます。これは、コンポーネントが独自のサイズに基づいてレイアウトを適応させることができることを意味し、本当に応答します。これは、さまざまなコンテキストで再利用され、周囲に適応する必要があるコンポーネントに特に役立ちます。レスポンシブWebコンポーネントの作成。 DOMを操作し、イベントを処理し、動的なコンテンツを作成するために使用できます。また、CSSメディアクエリと組み合わせて使用して、より複雑な応答性の動作を作成することもできます。たとえば、JavaScriptを使用して、画面のサイズまたはデバイス機能に基づいてさまざまなスクリプトまたはコンテンツをロードできます。レスポンシブWebコンポーネントを設計する際の重要な考慮。これには、テキストがすべての画面サイズで読み取ることができること、インタラクティブな要素がタッチスクリーンで簡単にタップできるほど大きく、マウスを使用できない人のためのキーボードでサイトが操作できることを保証することが含まれます。さらに、セマンティックHTMLを使用して、読者をスクリーニングするためにコンテキストと意味を提供し、視覚障害のある人に色のコントラストが十分であることを確認する必要があります。克服する？

いくつかの一般的な課題には、さまざまな画面サイズと解像度を扱うこと、さまざまなブラウザーとデバイスとの互換性の確保、パフォーマンスの最適化などがあります。これらは、モバイルファーストアプローチを使用し、さまざまなデバイスでテストし、機能検出を使用して互換性を確保し、パフォーマンスの画像とスクリプトを最適化することで克服できます。

レスポンシブWebコンポーネントは、SEOにどのように影響しますか？

レスポンシブWebコンポーネントは、SEOにプラスの影響を与える可能性があります。 Googleのアルゴリズムは、モバイルフレンドリーでレスポンシブデザインのWebサイトがこれの重要な側面です。さらに、デスクトップとモバイルのバージョンではなく単一のレスポンシブサイトを持つことで、SEOの重複にマイナスの影響を与える可能性のある複製の問題が回避されます。 Webコンポーネントの応答性をテストするためのいくつかのツールと手法です。これには、ブラウザウィンドウのサイズを変更して、レイアウトの適応方法を確認し、ブラウザ開発者ツールでデバイスエミュレーション機能を使用し、Googleのモバイルフレンドリーテストなどのオンラインツールを使用します。 🎜>

以上が今日のレスポンシブWebコンポーネントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。