レイアウトを組もう

STUDIOが採用しているボックスレイアウトは積み木構造になっています。それぞれの積み木が要素(内容)だと思ってください。

ボックスは自由に順序を入れ替えたり、要素に余白を設定できます。

まずは、「ボックスモデル」を理解しましょう。

▲ボックスモデル

❏ ボックスモデルとは

すべての要素はボックスの中に納められている(表示されている)という考え方です。

テキストや画像などの内容パディング(padding)、枠線ボーダー(border)、マージン(margin)という4つの領域からできています。

ボーダー=枠線=縁取り

要素=内容=コンテンツ(content)=ボックス(box)=エレメント(element)=中身

呼び名がたくさんありますね。ああややこしい。

STEP 1

❏ ボックスの追加

ボックスを新規追加するには、アドバーのボックスアイコンをドラッグし、オレンジ色のガイドのポジションを確認しながらドロップします。

画面左のアドパネルをクリックでも要素を追加できますが、意図しないところに追加されることがあるので、ドラッグ&ドロップでデザインしていきましょう。

ボックスを配置すると、エディタ右のレイヤーパネルにも連動して表示されます。

STEP 2

❏ 親ボックス内に子ボックス(画像)を追加する

  1. 親ボックスを選択します。

  2. ADDバーから「画像」アイコンをドラッグ&ドロップで親ボックス内に配置します。

  3. この際、子ボックスが親ボックスより大きいサイズだと、親ボックス内に追加することができません。

    着地地点を示すオレンジの影が親ボックス内に表示されていることを確認してドロップしてください。

STEP 3

❏ 画像の選択

今は画像ボックスに、何も画像が入っていません。

配置した画像ボックスをダブルクリックすると、ADDパネルから使いたい画像を選択できます。

英語でキーワード検索も出来ます。Good !

▲お好きなワンちゃんか、ネコちゃんでも入れてみてください(=^・ω・^=)

STEP 4

❏ テキストの追加

ADDバーから「T」のアイコンをドラッグ&ドロップで、テキストボックスを配置できます。

ダブルクリックまたはEnterで、テキストの内容編集モードになります。

STEP 5

❏ 余白を調整しましょう。

余白はだだの空きスペースではなく、画面全体を見やすく、文章を読みやすくしてくれる大事なデザイン要素のひとつです\(^_^=

STUDIOでは、マージン(ボックスの外側の余白)とパディング(ボックスの内側の余白)を使って、ボックスの細かい調整ができます

▲親ボックスの中に子ボックスが2つ入っています。(画像ボックスとテキストボックスは兄弟)テキストボックスの余白を調整しましょう。

マージンとパディングについて

▲カーソルをボックスの外側か内側にあてると色が変わります。

▲上部のパネルでも数値入力ができます。

鍵(キー)マークを押すことで、左右、上下左右を統一して設定できます。

マージン  margin

▲「外側の余白をとる」ということは、「画像ボックスとテキストボックスの間隔を調整する」ということです。

ボックス同士を離すときはオレンジ色のマージン

テキストボックスの背景色と透明にすると、親ボックスの背景色が見えます。

テキストボックスのマージンが決まったら、親ボックスの縦幅はautoにしておきましょう。

パディング  padding 

▲テキストボックスの内側にパディングに設定すると、テキストボックスに設定した背景色になります。

ボックスの内側の余白を広げる時は緑色のパディング 

親ボックスの背景色が覗く場合、横幅100%にしてください。

【重要】親ボックスの縦幅が十分でない高さのピクセル(px)で設定されていると、子要素が隠れてしまいます。

小さい画面サイズでコンテンツが親ボックスに隠れてしまわないようにするために、親要素の縦幅にはautoを使用します。

❏ ボックスの選択

要素を選択 / 複数選択する

ボックスをクリックすると、青い枠で囲まれ、選択状態になります。

Shiftキーを押しながら要素を順番にクリックすると、複数選択できます。複数編集も可能です。

❏ ボックスの並び方

要素の整列ルール

親ボックス内の子ボックス同士の配置は、方向・整列・配分の3つのルールによって決まります。

子ボックスの並ぶ方向は、親ボックス選択時に上下左右に現れるボタンで設定します。

方向

下から上に並ぶ
上から下に並ぶ
左から右に並ぶ
右から左に並ぶ
z型の矢印を選択することで、ボックスの折返しが設定できます。
ウインドウ幅を狭くすると、ボックスが上から下に折り返されます。

整列

親ボックに空きスペースがあった場合、子ボックスを左揃え・右揃え・中央揃え・両端揃えに設定することができます。

※ 黄色のNAVはグループ化しています。

 

グループ化とは

複数の要素をグルーピングして親ボックスを追加することを「グループ化」と呼びます。

グループ化→⌘ + G

グループ解除→⌘ + Shift + G

※要素の隣に並べてもグルーピングされます。

均等配分

子ボックスを、均等に間隔を空けて配置します。

画像ボックス(BoxモードとImgモード)

▲画像ボックスにはBoxモードとImgモードがあり、ボックス右上のスイッチで切り替えます。

Boxモード

Boxモードでは画像を背景の塗りとして扱います。
縦横比を保持するような設定は行えませんが、「画像」タブから明るさ・コントラスト等のフィルタ効果をかけたり、別の要素を子要素として挿入することができます。

▲鮮やかさを(彩度)を上げ、テキストを乗せた。

Imgモード

Imgモードは画像の比率を認識し、「auto」で保持する設定が可能です。

画像に効果をかけたり、子要素を乗せることはできません。

要素のはみ出し(オーバーフロー)設定

要素の、親ボックスからはみ出した部分をどのように表示/スクロールさせるかを、選択枠の右または下のオーバーフローアイコンから設定できます。

▲表示する
▲隠す
▲横スクロールさせる。

サイズ単位について

STUDIOではいくつかの異なったサイズの単位があります。

px (ピクセル)

最も一般的な絶対単位です。

pxは親要素の影響を受けないので、分かりやすいです。

デメリットとしては、pxを使用するとブラウザの文字サイズ変更ができなくなります。

% (パーセント)

親ボックスを基準とした時の割合の単位です。

auto (オート)

横幅または縦幅をオートに設定すると、要素のサイズは自動的に設定されます。

要素の境界線をダブルクリックするか、要素を選択してトップバーから「auto」を選択してください。

▲横幅と縦幅の値で要素のサイズを設定します。
▲横幅autoと100%のちがい

flex (フレックス)

親ボックスの中に子ボックスがいくつか並ぶ場合、それぞれ(兄弟要素)に幅比率を指定できます。

▲子ボックスの横幅をそれぞれflexで1、2、1と指定すると、3つの要素が1:2:1の比率で表示されます。

vh「viewport height」

スクリーンの高さを基準とした割合の単位です。

高さが親ボックスに左右されないので、どんなスクリーンサイズでもページいっぱいに表示できます。

インパクトのある画面になりますね。

▲画像ボックスに横幅100%、縦幅100vhを設定

ページタイプ

モーダル (modal)

通常のページに被せてポップアップさせる子ウィンドウです。閉じるまで他の操作は行えません。

THANKSメッセージ」「ハンバーガーメニュー」「404エラーメッセージ」」などに使います。

動的ページ(CMS)
CMSのアイテムの詳細ページです。パスは、アイテムのスラッグになります。

スタイルバー左端の「タイプ」欄で変更することができます。

ホーム
訪問した際、最初に表示されるページ(トップページ)のことです。パスを空欄にすることでも設定できます。

404ページ
存在しないURLを訪問した際、ページデータの代わりに「404 Not Found」というメッセージを返すページです。パスを「404」にすることでも設定できます。

SEO

Search Engine Optimization「検索エンジン最適化」

デザインの基素

情報を整理して、各要素を見る人にわかりやすいように配置(レイアウト)します。

SEOの基本

人だけではなく検索エンジン(クローラ)にも文章構造が分かるようにタグ(記号)を付けます。

たとえば文字サイズが大きいので見出しだと人が認識しても、検索ロボット(クローラー)は見出しだとわかりません。なので、該当のボックスにはh1タグをつけておきます。

STUDIOでは、初めから通常のボックスにはdiv、テキストボックスにはpのHTMLタグが設定されていますが、配置後にボックス選択枠左上のタグをクリックすると、タグの種類を変更することができます。

選択できるタグは、ボックスの種類によって決まっています。

タグの内容を自由に記述することはできません。

ボックスに指定できるHTMLタグ

div  各要素をひとまとめにする(グループ化する)際に使います。

division(ディヴィジョン)区分・部分

 

header サイト名、ロゴ、タイトル、ナビゲーションなど、一番最初に見せたいグループです。

 

fotter ナビゲーション、お問い合わせフォームへのリンク、基本情報の記載(ロゴ・サイト名・住所・連絡先・コピーライトなど)、SNSや関連外部サイトへのリンクなど(ページ下部までスクロールしないと見えないけれどかなり重要!)

section 見出しh1〜h6とコンテンツで構成される、一区切りのブロックです。

artticle ニュースサイトやブログにおける各記事など、それだけで独立、完結するひとまとまりのコンテンツです。

 
mainページの中で、何が一番伝えたいことで、何が重要なのかを示すものです。

1ページの中に1つだけ置けます。header、footer、nav、article、asideタグの中にmainタグを置くことはできない。

ul   unordered list

li   List Item

label フォームの項目のまとまりを示すボックス

textに指定できるHTMLタグ

p 段落 paragraph

h1〜h6 見出し  heading

li List Item 箇条書きリストの項目を示します

span 特に意味を持たず、文章の一部のグループ化に使います。

画像にalt(代替テキスト)を設定

検索エンジンは画像の内容までは判断できません。そこで画像と関連のある文章を代替テキスト(alt=”×××”)として記述します。

Title と Description の設定

ページごとに Titleと Description を設定することができます。

  • Titleは検索結果やブラウザのタイトルバーに表示される「ページの主題」です。

  • 30文字程度で検索キーワードを入れます。

  • Descriptionは検索エンジン向けの「ページの概要説明文」です。もちろん人もこの内容を見てページの内容を判断します。

  • SITE モードでサイト全体の情報、 PAGEモードで個別のページ情報の設定が行えます。

  • PAGE の設定の空欄部分には、 SITE モードでの設定が自動的に適用されます。