グリッドはページのレイアウトプランです

グリッドはページのレイアウトプランです
<br /> 英語原文: http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm
グリッドはページレイアウトの計画です。<br />日常生活で目にする多くのページにはグリッドがあります。気づかないかもしれませんが、それは存在し、デザイン コンテンツをサポートし、全体的な構造を確立し、ページの要素をガイドします。
グリッドは、ページ上のさまざまな要素の配置をガイドする目に見えないフレームワークです。グリッドは印刷されたページには表示されませんが、大きな影響力を持っています。グリッドは、テキスト列の幅、写真の周りの空白の一貫性、雑誌の各ページで繰り返し表示される要素の固定位置を制御します。グリッドとは、印刷物の余白、ページ要素(見出し、本文、写真など)間の間隔、およびそれらを空白ページに配置する方法を決定する一連のガイドラインです。
グリッドを使用するかどうか、またどのように使用するか決める前に、グリッドの基本とその作成方法を理解しておく必要があります。グリッドは最終的な印刷物には表示されませんが、ページを作成している間はグリッドが見えるようにする必要があります。
ページレイアウトに「余白」が設定されている場合があります。これらのエッジは、画面上では明るい色の実線または破線として表示される場合があります。上、下、左、右の余白によって、ページの中央にボックスが形成されます。これをベースポイントとして使用してセルを構築します。ページを複数の等しい部分に分割して複数のセルを作成します。ページ レイアウトを支援するために、目に見えるグリッドを作成できます。ページ レイアウト ソフトウェアにはガイド機能があり、印刷されないレイヤーに境界線やボックスを描くこともできます。通常、ページの横にあるルーラーからガイドラインを「ドラッグ」して、必要な場所に配置できます。
グリッドと余白
余白はページの外側の境界を決定します。ページ コンテンツを額縁のように囲みます。余白は必ずしもすべての側で等しいわけではありませんが、通常はページごと、またはパネルごとに(同じ出版物内で)一貫しています。ほとんどのプログラムでは、ページ形式 (サイズの指定) を設定するときに余白を設定します。一部のプログラムでは、画面上の境界線をドラッグすることで、余白を「リアルタイムで」調整することもできます。グリッドとアレイ<br />ページの内部空間 (ページの中心) をいくつかの均等な部分に分割する場合、各ユニット間の空白は「アレイ」と呼ばれます。列の方向は、グリッド設定に応じて、水平、垂直、またはその両方になります。一部のデザイン ソフトウェアでは、これは空白またはテキスト列の「ガター」とも呼ばれます。グリッドとパディング<br />2 つのページまたは 2 つのパネルが広げられている場合、内部の余白は「ガター」と呼ばれ、中央の継ぎ目の両側の余白になります。一部の組版ソフトウェアでは、2 つのテキスト列間の隙間は「ガター」とも呼ばれます。グリッド セル<br />グリッド セルは、ページ上にテキストや画像を配置する基本的な座標です。 「サイズ」ではなく「配置」を決定します。つまり、グリッド セルよりも大きい画像がある場合でも、それを使用できます。グリッド セルを使用すると、画像を 1、2、3、またはそれ以上のグリッド セルに収まるように拡大縮小し、ページ上に配置することができます。グリッドは視覚的な整理を提供します
グリッドにはさまざまな用途がありますが、すべてのデザインやすべての人に適しているわけではありません。雑誌やニュースレターなどの出版物には、グリッドはほぼ欠かせません。グリッドにより、ページ間の連続性が増し、デザインプロセスが大幅にスピードアップします。デザイナーは各ページのレイアウトとデザインを「ゼロから」計画する必要がなくなります。
広告キャンペーンや製品ラインの一連のポスターや一連のチラシなど、別々でありながら関連性のある一連の印刷物では、共通のグリッドを使用すると、一連の別個の印刷物の全体的な外観を統一することができます。
印刷物には複数の独立した要素(テキスト ブロック、見出し、写真、グラフ)が含まれることが多く、グリッドを使用すると、これらのページ要素を整然と整理できます。

<<:  JavaScript スコープチェーンの基本原理のグラフィカルな説明

>>:  CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

推薦する

Centos は chrony 時間同期サーバー プロセス図を構築します

私の環境: 3 centos7.5 1804マスター 192.168.100.140ノード1 192...

MySQL トリガーの定義と使用方法の簡単な例

この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

MySQLデータベースとテーブルシャーディングの概要

プロジェクトの開発中に、データベースのデータがどんどん大きくなり、その結果、1 つのテーブルにデータ...

Nginx設定ファイルの詳細な説明

Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...

MySQL テーブルの断片化を解消し、スペースを再利用する方法

目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...

10 HTML テーブル関連タグ

実際、多くの人が「テーブルは絶対に使用すべきではないと聞いたことがある」と言いますが、これは絶対に間...

CocosCreatorでWeChatゲームを作成する方法

目次1. WeChatパブリックプラットフォームからWeChat開発者ツールをダウンロードする2. ...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

IE6 の歪み問題

質問: <form...> の下の <input type="hidde...

Linux サーバー上のローカル静的リソースにアクセスするために nginx を使用する方法

1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...

フォーム要素の簡単な実装コードでは登録を例に挙げています

コード実装:コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...

Mysql8.0はソート問題を解決するためにウィンドウ関数を使用する

MySQL ウィンドウ関数の紹介MySQL は MySQL 8.0 以降、ウィンドウ関数をサポートし...