レスポンシブなウェブサイトのフロントエンドデザインについて話す

少し前までは、レスポンシブという概念は、BootstrapやAmazeなどのフレームワークコンポーネントでした。数回使用した後、あまり気にしていませんでした。国内の検索エンジンは、モバイル検索結果ページを提供する際にモバイルサイトに加点すると思いますが、Googleのようにレスポンシブなウェブサイトを認識することはできません。開発には時間がかかるかもしれません。しかし、現在の Web のトレンドがモバイルファーストへと移行していることは間違いありません。もちろん、ドメイン名やその他のソリューションを使用することは不可能ではありませんが、応答性はよりシンプルになり、開発の見通しも良好になる可能性があります。

ここ2、3週間、毎日レスポンシブページを書いていて、レスポンシブページとAjaxに関する多くの経験を積んできました。レスポンシブページのポイントを大まかに整理してみました。この方向で開発したい方や興味がある方には、少しでもお役に立てれば幸いです。

コントロールサイズ

PC ページに慣れているフロントエンド開発者は、サイズの制御に PC を使用することを好むかもしれませんが、レスポンシブ ページでは em と rem がより頻繁に使用されます。これらを使用してフォント サイズやフレーム サイズを制御すると、全体的な効果が非常に明らかになります。

たとえば、私のフォント設定は 10px/20px/30px などです。ウェブサイト上の場所によってフォント サイズが異なるのは避けられません。ページが複雑だったり、テキストが多すぎたりすると、フォント サイズの設定も大変な作業になります。ただし、レスポンシブ ページでは、デザインしたら終わりではありません。モバイル フォンでページを閲覧すると、フォントが非常に大きくなり、タイトルによってはモバイル フォンの画面いっぱいに表示されることもあります。モバイル ユーザー エクスペリエンスへの影響は想像に難くありません。メディアクエリを書き始めると、ページには設定する必要のあるフォントが数十種類あることがわかります。異なる解像度で 1 つ 1 つ調整すると、100 行を超える CSS コードを記述する必要がある場合がありますが、em/rem を使用すると、フォントの比率を均一に保ちながら作業量を大幅に削減できます。

em/rem についての説明は、自分で検索できます。インターネット上には数え切れないほど多くのチュートリアルがあります。実際、それらは px と同じくらい簡単です。使い始めてから、慣れるまでに数分しかかかりませんでした。前述したように、これらを使用してフレームのサイズを制御し、レスポンシブ ページの下で均一に拡大縮小することもできますが、もちろんこれには十分な計算が必要です。また、フォントアイコンも制御できることにも言及する価値があります。詳細については、さまざまな「フォントアイコン」の公式ドキュメントを参照してください。

パーセンテージ

スケーリングの問題を解決する方法はいくつかあります。初心者にとって最も適しているのは、間違いなくパーセンテージ レイアウトです。パーセンテージは、キー幅の設定によっては予期しない効果をもたらす可能性があります。

ボックス1{幅:100%;}

ul{マージン:0 2%;}

すべてのレイアウトにパーセンテージを使用することを推奨しているわけではありませんが、場合によっては、これによって作業負荷が大幅に軽減されることがあります。box1 の幅を 100% に設定すると、その幅でブラウザ全体が自動的に埋められます。携帯電話や PC でどのような解像度を使用しても、常に良好なパフォーマンスを発揮します。 box1 下の ul の左右に 2% のマージンを設定する場合も同様です。ブラウザ ウィンドウのサイズが変わると、ul の実際のマージン サイズも変わります。これで、パーセンテージ レイアウトの概念がほぼ理解できたと思います。

もちろん、特に解像度が低い場合、期待どおりの効果が得られないこともあります。応答性は通常、幅のみを規定し、長さはドキュメントとブラウザによって決定されるため、適切と思われるパーセンテージ設定が奇妙に見えることがあります。この場合、すべての端末で良好なエクスペリエンスを実現したい場合は、問題を解決するためにメディアクエリが必要です。

メディアクエリ

よく使われる説明は、CSS のメディア クエリ機能です。これは、デバイスを正確に識別し、解像度や幅を独自に設定できます。w3cshool にメディア クエリのリファレンス ドキュメントがあります。ドキュメントが多すぎると思われる場合は、大まかに仕組みを説明します。

必要に応じて、ボックスの高さを設定できます。ボックスの高さが 500 ピクセルの場合、PC では見栄えが良いかもしれませんが、モバイル フォンで開くと少し怖いです。ボックス全体がページを埋め尽くし、中のコンテンツが乱雑に配置され、ユーザー エクスペリエンスに重大な影響を及ぼします。このとき、メディア クエリを使用して、サイズごとに異なる高さを設定できます。たとえば、ボックスが 640/320 で開かれると、それぞれ高さが 300/200 ピクセルになり、見栄えが良くなります。

インポートを思い浮かべるかもしれません。実際、メディア クエリはこのように理解できます。さまざまな幅やデバイスに対してインポートと同様の CSS ルールを設定し、完成したページの実際のレンダリング効果を保証します。

メディアクエリでは、ページに対して複数の異なる CSS を用意し、デバイスのサイズが異なる場合に異なる CSS ファイルを使用することもできます。スタイルファイルが比較的大きい場合にもこの方法を検討できます。

フレームワークについて話す

私が実際に見たり使用したりしたフロントエンド フレームワークの多くは、リッチなフロントエンド型デザインです。フレームワークがどれだけ美しく見えても、初心者のフロントエンド開発者がフレームワークを盲目的にレイアウトに使用することはお勧めしません。実際の使用においては、クラス名が多すぎる、または複雑すぎる（CSS の経験があまりない場合は、合意されたクラス名についてほとんど知らない可能性があります）やスタイルの競合など、多くの問題が見つかる可能性があります。リソースを導入しすぎると、ページが重くなったり、デザイン効果が外れたりします。

たとえば、bootstrap を例に挙げてみましょう。Google に似た検索ボックスを設計しようとすると、非常に困難になります。Google タイプの検索ボックスには、実際にはボックス内に入力項目があり、このボックスに左右のアイコンが追加されます。bootstrap を使用してこれを実行すると、説明のつかない矛盾が多く発生する可能性がありますが、実際に何が得られるのでしょうか。角が丸く、行の高さが 1 つですか?それともパーセンテージ幅ですか?これらを CSS で記述するには、数行のコードを書くだけです。

AJAX に過度に依存しているフレームワークもいくつかあります。アイデアは優れているかもしれませんし、大量の AJAX はフロントエンドで見栄えがよく、ユーザーフレンドリーではありますが、大量のリクエストはサーバーにとって好ましくなく、サーバーの実際の負荷を大幅に軽減する可能性があります。つまり、実際のニーズに応じて問題を解決します。フレームワークは万能ではありません。

出典: Witt のブログ投稿、オリジナル リンク。

元のタイトル: レスポンシブなウェブサイトのフロントエンドデザインについて

キーワード: フロントエンド