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

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


グリッドシステムの形成
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初心者向けチュートリアル: 背景画像を画面全体に表示する

推薦する

要素の$notifyポイントについての簡単な説明

当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでし...

Reactフックの長所と短所

目次序文アドバンテージ:欠点: 1. レスポンシブな使用効果2. ステータスが同期されていないRea...

Dockerfile における ENV 命令の具体的な使用法の詳細な説明

1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

MySQLにおける分散ロックの考え方をDBの助けを借りて詳しく説明します

序文スタンドアロン ロックであっても分散ロックであっても、共有データに基づいて現在の操作の動作を判断...

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...

Nginx の break と last の違いの詳細な分析

まずは違いについて話しましょう最後に、書き換えられたルールは、次の場所と一致させるために書き換えられ...

熟練デザイナーの7つの原則(2):色の使い方

<br />前回の記事:優秀なデザイナーの7つの原則(1):フォントデザイン 英語 原文...

RGBカラーテーブルコレクション

RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...

Angular の 12 の典型的な問題について簡単に説明します

目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...

mysql バックアップ スクリプトを作成し、7 日間保存します。

スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...

MySQLをシンプルに学ぶ

序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...

MySQL の frm ファイルからテーブル構造を復元する 3 つの方法 [推奨]

mysql が正常に実行されている場合、テーブル構造を表示することは難しくありません。しかし、場合...

JavaScript における this ポイントの問題の詳細な説明

要約する地球環境 ➡️ ウィンドウ通常関数 ➡️ ウィンドウまたは未定義コンストラクター ➡️ 構築...

MySQL における「:=」と「=」の違いの簡単な分析

=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の場合は等号の効果があ...