ウェブデザインの達人がよく使うレスポンシブフレームワークを共有する（要約）

この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、皆さんと共有します。詳細は次のとおりです。

HTML5 と CSS3 の人気が高まるにつれて、レスポンシブ デザイン フレームワークの人気が高まり、ウェブマスターやデザイナーの間でますます人気が高まっています。しかし、レスポンシブ フレームワークに対する世間の態度や意見はさまざまです。HTML5 と CSS3 を理解しているプロのデザイナーが独自のフレームワークを作成して独自の Web サイトを作成すべきだと考える人もいれば、レスポンシブ デザイン フレームワークはデザイナーが実用的で美しい Web サイトを迅速かつ効果的に構築するのに役立ち、時間と労力を節約するのに不可欠だと考える人もいます。この議論に関して、Xiaofei は後者の見解を支持する傾向があります。 Xiaofei は、最も経験豊富な Web フロントエンド開発者であっても、レスポンシブ フレームワークを注意深く研究し、ある程度の参考と利便性を得るべきだと考えています。今日のペースの速い時代では、デザイナーがフレームワークを書いて Web サイトを構築する (グリッド、レイアウト、メディア クエリを適切に配置する) のは時間がかかりすぎます。さらに、レスポンシブ フレームワークを使用すると、デザイナーは創造性を最大限に発揮し、一部の機能をカスタマイズして、革新的な Web サイトを作成することもできます。今日は、Xiaofei がデザイナーに現在よく使われているレスポンシブ フレームワークをいくつか紹介します。実際のニーズに応じて選択して使用できます。

ブートストラップ

Bootstrap は、Twitter がリリースしたフロントエンド開発用のオープンソース ツールキットです。現在最も人気のある HTML5 フレームワークであり、中国で最大のユーザー ベースと最高の人気を誇っています。 Bootstrap のスローガンは「シンプル、直感的、強力、Web 開発をより速く、よりシンプルにする」であり、実際にこれを実現するために懸命に取り組んでいます。基本的に、Bootstrap エディター、カスタム フォーム要素、Javascript のインタラクティブ性、クロスブラウザー互換性、その他の機能を実現できるカスタマイズされた jQuery プラグインなど、レスポンシブ Web サイトを構築するためのすべてのコンポーネントをカバーしています。ほとんどのウェブマスターにとって、Bootstrap は便利でシンプルであり、より美しくレスポンシブなウェブサイトを非常に速く構築できます。これが彼らの第一の選択肢です。 Xiaofei もそのファンです。Qifeipage セルフサービス Web サイト構築プラットフォームの多くの優れたテンプレートも、Bootstrap フレームワークに基づいて作成されています。

ただし、Bootstrap は完璧ではありません。 Bootstrap は Chrome、Firefox、Safari、Opera、360、Sogou などの複数のブラウザと互換性がありますが、HTML5 と CSS3 に基づいて開発されています。一部の機能は IE ブラウザにはあまり適しておらず、IE ブラウザでは表示されない場合があります。また、Web サイトにカスタマイズされたデザイン コンテンツが多すぎる場合、変更の基盤となるフレームワークとして Bootstrap を使用すると、通常、多数のスタイルが重複することになり、CSS 階層に混乱が生じ、Web サイトのその後のメンテナンスに支障をきたす可能性があります。

財団

Foundation は柔軟なグリッドをベースとし、最新のテクノロジーを採用しているため、高度なレスポンシブ フロントエンド フレームワークの代表となっています。全体的なフレームワーク設計コンセプトはモバイルファーストであるため、最も顕著な特徴の 1 つは、携帯電話などのモバイルデバイスでのパフォーマンスが向上することです。同時に、Foundation は、ユーザーがカスタマイズされたサービス (グリッド、色、フォント サイズなどを定義) を使用できるようにサポートし、フォーム、ボタンなど、操作も柔軟なさまざまな Web UI コンポーネントを提供します。広く使用されているBootstrapと比較すると、Foundationは中国語版のドキュメントやチュートリアルが不足しているため、中国では比較的目立たない存在です。しかし、多くのウェブマスターは、Bootstrapフレームワークを使用してウェブサイトを構築する人が多すぎるため、作成したウェブサイトは同じ型から切り出されたようなものであり、競合他社よりも目立つことは不可能であると考えています。現時点では、彼らはFoundationを使用してハイエンドでユニークなウェブサイトを構築する傾向があります。しかし、このフレームワークにも欠点があり、それは互換性の問題です。Foundation 4はIE8との互換性を放棄しました。Xiao Feiは、Foundationの動作が国内のブラウザ環境にとって有益であるか有害であるか確信が持てません。

スケルトン

最初の 2 つと比較すると、Skeleton は国内ユーザーの心の中でそれほど高い地位を占めていません。シンプルなグリッド システムを使用し、CSS および JS ファイルのコレクションを備えているため、スケルトン ベースの Web サイトをさまざまな解像度のデバイス (コンピューター、タブレット、携帯電話など) に合わせてすばやく調整でき、ユーザー インターフェイスがより使いやすくなり、ユーザー エクスペリエンスが最適化されます。 Skeleton はいくつかの標準 HTML 要素と 960 ピクセルの標準テンプレートのみを定義しますが、一般的な Web サイト構築要件には影響しません。このため、使いやすく、特に小規模なプロジェクトの構築に適しています。

ゴールデングリッドシステム

グリッド システムに興味がある場合は、Golden Grid System が最適な選択肢です。最初は 16 列のグリッドですが、折りたたんでビューポートを 8 列または 4 列のレイアウトに縮小し、タブレットや電話で表示することができます。要約すると、これは Web デザインの互換性を高めるために設計された折りたたみ可能なグリッドであり、列、ページ間、ボトムライン、スクリプトという 4 つの明らかな機能を備えています。ゴールデン グリッド システム フレームワークを使用して Web サイトを構築すると、多くの利点があります。たとえば、明確で規則的なレイアウトを確立して Web ページの読みやすさを向上させたり、Web デザイナーとフロントエンド開発者の間の橋渡しとして機能してコミュニケーションを円滑にしたり、応答性を実現してさまざまなサイズの画面に合わせてレイアウトを変更したりすることができます。こんなに多くのメリットがあるのに、まだ誘惑されませんか?

フレームワークの削減

Less Framework は、古典的なレスポンシブ フレームワークの 1 つです。コンピューター、タブレット、携帯電話などのさまざまなウィンドウのニーズを満たすために、4 つのレイアウトと 3 つのフォント プリセットをカバーする適応型 CSS グリッド システムです。 Less Framework は単一のグリッド上で動作し、レイアウト列の数と外側の余白の幅を変更してさまざまなレイアウトを作成します。非プログラミング言語である CSS は、多くのデザイナーにとって比較的難しいものです。Less の登場により、この問題は解決しました。Less により、CSS コードの記述が大幅に簡素化され、Web ページのメンテナンス コストが削減され、デザイナーはより少ないコードでより優れた Web サイトを作成できるようになります。これは名前にあまり似ていないので、多くのデザイナーがこのフレームワークに夢中になるのも不思議ではありません。

ガムビー

レスポンシブな Web サイト デザインを初めて使用する場合は、Gumby フレームワークから始めるのが最適です。 Gumby は、SASS (CSS 拡張言語パーサー) をベースにしたレスポンシブ CSS フレームワークです。テンプレートと Web UI ツールキットが付属しており、さまざまな見栄えの良いボタン、テーブル、ナビゲーション、ラベル、JS ファイル、高速な応答速度を備えています。ノーコーディング設計にも対応しているので、技術がわからなくても簡単に操作できます。導入も簡単で、その後のメンテナンスにも支障がありません。

320以上

このフレームワークは、主に小型画面を対象としており、色、タイポグラフィレイアウトなどの設定プロパティを含む小型画面用スタイルシートを使用して、Web サイトのコンテンツが優先されるようにします。小さな画面にもうまく適応し、大きな画面でも問題ありません。

1140px CSS グリッド システム

レスポンシブな Web サイトとは、低解像度のデバイスのニーズに応えるだけでなく、平均的なコンピューター画面で美しく表示されると同時に、より大きな解像度にも適応するレイアウトも必要です。 1140 グリッド フレームはまさにそれを実現し、1280 解像度のモニターに完璧にフィットします。小さいディスプレイでは、滑らかになり、ブラウザの幅に適応します。

上記はレスポンシブフレームワークの紹介です。さまざまなレスポンシブ フレームワークにはそれぞれ長所と短所があり、完璧なレスポンシブ フレームワークはありません。また、フレームワークを使用して Web サイトを構築するということは、何も手を出さない上司になれるということではありません。それでも、自分のニーズを合理的に評価し、コンテンツを適切にカスタマイズし、フレームワークを自分のアイデアと組み合わせる必要があります。この方法でのみ、Web サイト構築におけるレスポンシブ フレームワークの積極的な役割を十分に発揮し、時間を節約しながら美しく実用的なレスポンシブ Web サイトを作成できます。フレームワークの基礎知識がなく、今日紹介した知識に混乱している場合でも、問題ありません。Qifeipage セルフサービス Web サイト構築プラットフォームにアクセスして、確認してみてください。 Qiqiye セルフサービス Web サイト構築プラットフォームは、多数のレスポンシブ テンプレートを提供します。コーディングや専門的なスキルがなくても、あらゆるデバイスに適応する H5 レスポンシブ Web サイトをすばやく構築できます。Qiqiye セルフサービス Web サイト構築プラットフォームで Web サイトを構築しましょう。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。