フォローする

【デザイン】 コンテンツを挿入するための「行と列」の概念

Goodsieでサイトをデザインするにあたって、理解していただきたい概念が
コンテンツ(画像、テキスト)を挿入するための「行と列」についてです。

簡単に説明すると、

√「行と列」を用いてデザインを行う領域(カラム)を細かく生成し

√そこにドラッグ&ドロップで必要なコンテンツを配置することができる

という考え方になります。実際にみていきましょう。

 

▶︎まず「行」とは何かご説明します。

行とは、画像やテキストなどのコンテンツを入れるための枠(言わば「ハコ」)です。
デザインパネルの「コンテンツ」タブを選択した状態で、
ウインドウ上にすでに存在する行の下部に現れる「+ボタン」をクリックしたときに、
あらたに行が追加されます。(行の追加)

 

 

このようにあらたに追加された「行」に対してコンテンツが挿入できます。

例えば、新しく追加した行にテキストのコンテンツを挿入する場合、

・デザインパネルの「コンテンツ」タブを選択。

・「全般」を選択。

・「テキスト」のアイコンをドラッグし、あらたに追加した行に落とし込む。

といった手順となります。

このように、「行の追加」はデザインする領域を使いするために必要な作業となります。

 

 

▶︎次に「列」についてご説明します。

列とは「行」をさらに区切ったもののことを言います。
例えば、1つの行に画像とテキストの2つのコンテンツを挿入したい場合、
行を2つに区切り、それぞれのコンテンツが入る枠をつくる必要があります。

これが「列」(カラム)になります。

 

行を区切り、別々の列にわける手順は以下の通りです。

①上記のように行を追加。

②追加された行の横に表示される、「ハサミ」のアイコンを区切りたいところまでドラッグする。

 

 

このように区切った列に、コンテンツを上記と同じように挿入することができます。

**

「行と列」でレイアウトを細かく設定(予め設計図を作る)ことで細かなサイトデザインも
奇麗に行う事が可能です。一見複雑そうに見えますが、慣れてしまえば、この作業をすることで
デザイン精度が高まり、この作業の効果を実感いただけると思います。

「行と列」の概念は、コンテンツを挿入するときに非常に重要な概念なので、
是非覚えておきましょう!

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント

Powered by Zendesk