ウェブデザインにおけるグリッドシステム

ウェブデザインにおけるグリッドシステム


グリッドシステムの形成
1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベルが満足できる水準に程遠いと感じ、印刷を管理するための特別な王室委員会の設立を命じました。彼らの最初の仕事は、科学的、合理的、機能的な新しいフォントをデザインすることでした。委員会は数学者ニコラ・ジョジョンが率い、ローマ字フォントを基本とし、グリッドを設計基準として採用しました。フォントの各正方形は64の基本正方形単位に分割され、各正方形単位はさらに36の小さなグリッドに分割されました。このようにして、印刷されたレイアウトは2304の小さなグリッドで構成されます。この厳密な幾何学的グリッドネットワークで、フォントの形状、レイアウトの配置を設計し、コミュニケーション機能の有効性をテストしました。これは、フォントとレイアウトに関する世界最古の科学的実験であり、グリッドシステムの最も初期のプロトタイプでもあります。
グリッドシステムは英語では「grid systems」と呼ばれ、「grid system」と翻訳する人もいますが、実際には同じものです。しかし、定義の点では、グリッドの方が正確です。Wikipedia にあるグリッドの定義は次のとおりです。グリッド デザイン システム (グリッド デザイン システム、標準サイズ システム、プログラム レイアウト デザイン、スイス グラフィック デザイン スタイル、国際グラフィック デザイン スタイルとも呼ばれる) は、グラフィック デザインの手法およびスタイルです。ページのレイアウトは固定グリッドで設計されており、そのスタイルはすっきりと簡潔です。第二次世界大戦後に非常に人気が高まり、今日では出版物デザインの主流のスタイルの一つとなっています。
Web デザインにおけるグリッド システム<br />Web グリッド システムの定義は、規則的なグリッド配列を使用して、Web ページのレイアウトと情報配分をガイドおよび調整することです。
Web ページのグリッド システムは、フラット グリッド システムから開発されました。 Web デザインでは、グリッド システムを使用すると、Web ページ上の情報の表示がより美しく読みやすくなるだけでなく、より使いやすくなります。さらに、フロントエンド開発では、Web ページがより柔軟かつ標準化されます。


グリッド システムは、現在の Web デザインでますます使用されています。私は、グリッド システムの応用に関する記事をインターネットから収集しました: グリッド システムに基づくトップ 30 のブログ Web サイト デザイン。
前のページ1 2 次のページ 全文を読む

<<:  MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

>>:  CSS初心者向けチュートリアル: 背景画像を画面全体に表示する

推薦する

入力が完了したことを検出し、次のコンテンツを自動的に入力する HTML を実装する方法

前回の記事では、入力完了の簡単な検出を実現しましたが、今回はさらに一歩進んで、入力が完了した後に次の...

MyBatisインターセプターのページング機能を実装する方法

MyBatisインターセプターのページング機能を実装する方法序文:まず、実装原則についてお話しします...

Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明

目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...

Linux システムで MySQL データベースにリモート接続する方法のチュートリアル

序文最近、職場でこの要件に遭遇し、リモート接続を確立するのに 1 時間以上かかりました。ローカル コ...

Vue のクロスドメイン問題の処理と解決策の概要

ネットワークリクエストを送信すると、次の保存情報が表示されます。おめでとうございます。ドメインを越え...

VMware のインストールと使用時の問題と解決策

仮想マシンは使用中であるか、接続できません次のようなエラーが報告された場合解決まずこのページにアクセ...

Nodejs は readline を使用してコンテンツ入力を促すサンプルコード

目次序文1. batがjsを実行する2. ターミナルにバージョン番号を入力してパッケージ化コマンドを...

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒント

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...

Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)

目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...

Nginx ベースの Mencached キャッシュ構成の詳細な説明

導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...

mysql5.7.18のインストールと初期パスワードの変更方法

CentosでのMySQLのインストールについては、以前の記事を参照してください。 Centos7....

HTML での select optgroup タグの使用の概要

時々、選択した内容をグループ化する必要があります。以前はプログラム制御を使用していました。今日、se...

MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...

Node8 における AsyncHooks 非同期ライフサイクル

Async Hooks は Node8 の新機能です。NodeJs の非同期リソースのライフサイクル...