web-dev-qa-db-ja.com

div要素でスケーラブルなモジュールを作成する方法

Divのサイズを変更するだけで、そのdiv内のすべてがそのdivのサイズ（フォント、サブdivなど）に比例してスケーリングされるように、div要素によってカプセル化されるWebモジュールを作成することに興味があります。

数週間前、私は このフォーム を作成しました。これは、ページのサイズを変更するとかなりうまくスケーリングします。 CSS3で物事をサイジングすることでこれを達成することができました ビューポート相対サイジングユニット 。

これらのビューポートユニットは、モジュールがビューポート全体のサイズ（ページ全体のサイズ）である場合はうまく機能しますが、目的の「ビューポート」が1つの部分のみのdivになる場合は、これらの同じユニットは機能しません。 Webページ全体と、まったく異なる「周囲」を持つ複数のページで再利用する予定のdiv。

概念的には、任意のWebページ内のどこにでも配置できる再利用可能なモジュールを作成できるようにすることです。モジュールのdivコンテナーのサイズを設定するだけで、すべてのコンテンツがdivのサイズに比例してスケーリングされます。

どのウェブマスターでも使用できるモジュールを作成したいのですが、ウェブマスターが行う必要があるのは、モジュールの高さ、幅、位置を設定することだけです。モジュールは、ウェブマスターの希望するサイズに完全にスケーリングします。

この概念に対するアドバイスをいただければ幸いです。

javascriptmodulescss3modularization
1
Lonnie Best

FrançoisREMYは次のように書いています。

こんにちはロニー、

あなたの痛みは有効で重要だと思います。

現在、必要なものに類似した「モジュールのような」ローカルビューポートの提案があることを知って幸せです。例（もちろんランダムに取得）は、私自身の提案です http://fremycompany.com/TR/2012/ED-css-viewport/ （おそらく「vh」 「vw」単位は、その子孫のローカルビューポートとして設定されている要素の幅/高さにマップされます）が、昨年Googleの人々によって、これらの線に沿って何かが必要な理由について、より良い記事がいくつか書かれました。

この時点での問題は、レスポンシブコミュニティグループでも「：min-width /：max-width」の形でいくらか議論されており、解決すべき要件と問題は、直面しているものと同じではないにしても近いと思います。あなたのニーズを満たす実装。

私はあなたがcssグループにリマインダーを提供したことは素晴らしいと思いますウェブ開発者は彼らの意見を表明するためにここまで彼らの方法を見つけるために問題に十分気を配っています、これは貴重です、それで感謝します！

よろしく、フランソワ

上記は、w3.orgメーリングリストから受け取った以下の私のメッセージへの返信です。

CSSでは、相対的なサイズ単位のベースにする特定の要素を指定する方法が必要です。相対的なサイズ単位は、必ずしも親要素のサイズ、ページのサイズ、またはビューポートに基づく必要はありません。 Webモジュールには、さまざまな深さの多数の子要素が含まれている場合があり、相対的なサイズ設定単位のベースにしたい要素は、直接の祖先ではない可能性があります。

たとえば、私がここに投稿した質問を見てください： div要素でスケーラブルなモジュールを作成する方法

ビューポートユニットを使用してページのコンテンツを拡大縮小できる方法が気に入っています。私はこのページを作成しましたが、フォントでさえうまくスケーリングされていることを嬉しく思います： http://www.lonniebest.com/emailform/

ただし、私の最終的な目標は、Webマスターがその要素のコンテンツを簡単にスケーリングできるように任意のWebページに配置できる複合Webモジュール（たとえば、1つのdiv要素によってカプセル化される）を作成できるようにすることです。 divの高さと幅を設定します。これを行うには、特定の要素（Webモジュール全体をカプセル化する要素）に基づく相対的なサイズ設定単位が本当に必要です。

ある程度、これは％単位で達成できますが、フォントサイズでは達成できません。親要素のサイズに基づくことができる相対的なフォントサイズの単位が見つかりませんでした。ウェブマスターが私の自作モジュールを彼のページに置いた場合、私のフォントサイズは彼のページのこのサイズに基づいており、彼が私のモジュールを設定することを決めたサイズに基づいていません。

Webモジュールがビューポートのサイズである場合、ビューポートユニットはうまく機能します。ウィンドウのサイズを変更すると、フォントもそれに比例してサイズ変更されます。

Webは、QMLやWPFなどの非Webテクノロジと同じスケーラブルなモジュールの提供に非常に近づいています。

CSSが、ウェブマスターが「相対的なサイジングユニットのベースとなる特定の要素を指定する」方法を提供できれば、これは完璧に思えます。

繰り返しになりますが、Webモジュールにはさまざまな深さの子要素が多数含まれている場合があり、相対的なサイズ設定単位のベースにする要素は、直接の祖先ではなく、ページ全体ではない場合があります。 Webモジュールの場合、フォントの相対的なサイズとその他すべてが、（ページ全体ではなく）そのモジュールのサイズに基づいている必要があります。

CSSは非常に柔軟である必要があるため、独立したモジュールを作成してページに配置できます。モジュールの高さ、幅、場所を設定するだけで、そのモジュールに含まれるすべてのものが環境に比例してスケーリングされます。モジュールのサイズを非常に小さくする場合、フォントはページ全体に基づくのではなく、非常に小さくする必要があります。

ロニーベスト

0
Lonnie Best
  1. Divのスタイルをposition：absoluteまたはposition：relativeに設定します。
  2. Divの子をposition：absoluteに設定します。
  3. ％次元を使用して子を配置します。

例（ http://jsfiddle.net/o697zdeg/ ）：

<div style="position: relative; border: 5px solid red; width: 100px; height: 100px">
    <div style="position: absolute; top: 0; bottom: 0; width: 50%; background-color: blue"></div>
    <div style="position: absolute; top: 0; bottom: 0; width: 50%; right: 0; background-color: green"></div>
</div>
1
EricP