STUDIOのはじめかた
まずは、「ボックスモデル」を理解しましょう。
すべての要素はボックスの中に納められている(表示されている)という考え方です。
テキストや画像などの内容、パディング(padding)、枠線ボーダー(border)、マージン(margin)という4つの領域からできています。
ボーダー=枠線=縁取り
要素=内容=コンテンツ(content)=ボックス(box)=エレメント(element)=中身
呼び名がたくさんありますね。ああややこしい。
ボックスを新規追加するには、アドバーのボックスアイコンをドラッグし、オレンジ色のガイドのポジションを確認しながらドロップします。
画面左のアドパネルをクリックでも要素を追加できますが、意図しないところに追加されることがあるので、ドラッグ&ドロップでデザインしていきましょう。
ボックスを配置すると、エディタ右のレイヤーパネルにも連動して表示されます。
親ボックスを選択します。
ADDバーから「画像」アイコンをドラッグ&ドロップで親ボックス内に配置します。
この際、子ボックスが親ボックスより大きいサイズだと、親ボックス内に追加することができません。
着地地点を示すオレンジの影が親ボックス内に表示されていることを確認してドロップしてください。
今は画像ボックスに、何も画像が入っていません。
配置した画像ボックスをダブルクリックすると、ADDパネルから使いたい画像を選択できます。
英語でキーワード検索も出来ます。Good !
ADDバーから「T」のアイコンをドラッグ&ドロップで、テキストボックスを配置できます。
ダブルクリックまたはEnterで、テキストの内容編集モードになります。
余白はだだの空きスペースではなく、画面全体を見やすく、文章を読みやすくしてくれる大事なデザイン要素のひとつです\(^_^=
STUDIOでは、マージン(ボックスの外側の余白)とパディング(ボックスの内側の余白)を使って、ボックスの細かい調整ができます
▲上部のパネルでも数値入力ができます。
鍵(キー)マークを押すことで、左右、上下左右を統一して設定できます。
▲「外側の余白をとる」ということは、「画像ボックスとテキストボックスの間隔を調整する」ということです。
ボックス同士を離すときはオレンジ色のマージン
テキストボックスの背景色と透明にすると、親ボックスの背景色が見えます。
テキストボックスのマージンが決まったら、親ボックスの縦幅はautoにしておきましょう。
▲テキストボックスの内側にパディングに設定すると、テキストボックスに設定した背景色になります。
ボックスの内側の余白を広げる時は緑色のパディング
親ボックスの背景色が覗く場合、横幅100%にしてください。
【重要】親ボックスの縦幅が十分でない高さのピクセル(px)で設定されていると、子要素が隠れてしまいます。
小さい画面サイズでコンテンツが親ボックスに隠れてしまわないようにするために、親要素の縦幅にはautoを使用します。
ボックスをクリックすると、青い枠で囲まれ、選択状態になります。
Shiftキーを押しながら要素を順番にクリックすると、複数選択できます。複数編集も可能です。
親ボックス内の子ボックス同士の配置は、方向・整列・配分の3つのルールによって決まります。
子ボックスの並ぶ方向は、親ボックス選択時に上下左右に現れるボタンで設定します。
親ボックに空きスペースがあった場合、子ボックスを左揃え・右揃え・中央揃え・両端揃えに設定することができます。
※ 黄色のNAVはグループ化しています。
複数の要素をグルーピングして親ボックスを追加することを「グループ化」と呼びます。
グループ化→⌘ + G
グループ解除→⌘ + Shift + G
※要素の隣に並べてもグルーピングされます。
子ボックスを、均等に間隔を空けて配置します。
Boxモードでは画像を背景の塗りとして扱います。縦横比を保持するような設定は行えませんが、「画像」タブから明るさ・コントラスト等のフィルタ効果をかけたり、別の要素を子要素として挿入することができます。
Imgモードは画像の比率を認識し、「auto」で保持する設定が可能です。
画像に効果をかけたり、子要素を乗せることはできません。
要素の、親ボックスからはみ出した部分をどのように表示/スクロールさせるかを、選択枠の右または下のオーバーフローアイコンから設定できます。
STUDIOではいくつかの異なったサイズの単位があります。
最も一般的な絶対単位です。
pxは親要素の影響を受けないので、分かりやすいです。
デメリットとしては、pxを使用するとブラウザの文字サイズ変更ができなくなります。
親ボックスを基準とした時の割合の単位です。
横幅または縦幅をオートに設定すると、要素のサイズは自動的に設定されます。
要素の境界線をダブルクリックするか、要素を選択してトップバーから「auto」を選択してください。
親ボックスの中に子ボックスがいくつか並ぶ場合、それぞれ(兄弟要素)に幅比率を指定できます。
スクリーンの高さを基準とした割合の単位です。
高さが親ボックスに左右されないので、どんなスクリーンサイズでもページいっぱいに表示できます。
インパクトのある画面になりますね。
モーダル (modal)
通常のページに被せてポップアップさせる子ウィンドウです。閉じるまで他の操作は行えません。
「THANKSメッセージ」「ハンバーガーメニュー」「404エラーメッセージ」」などに使います。
動的ページ(CMS)CMSのアイテムの詳細ページです。パスは、アイテムのスラッグになります。
スタイルバー左端の「タイプ」欄で変更することができます。
ホーム訪問した際、最初に表示されるページ(トップページ)のことです。パスを空欄にすることでも設定できます。
404ページ存在しないURLを訪問した際、ページデータの代わりに「404 Not Found」というメッセージを返すページです。パスを「404」にすることでも設定できます。
情報を整理して、各要素を見る人にわかりやすいように配置(レイアウト)します。
人だけではなく検索エンジン(クローラ)にも文章構造が分かるようにタグ(記号)を付けます。
たとえば文字サイズが大きいので見出しだと人が認識しても、検索ロボット(クローラー)は見出しだとわかりません。なので、該当のボックスにはh1タグをつけておきます。
STUDIOでは、初めから通常のボックスにはdiv、テキストボックスにはpのHTMLタグが設定されていますが、配置後にボックス選択枠左上のタグをクリックすると、タグの種類を変更することができます。
選択できるタグは、ボックスの種類によって決まっています。
タグの内容を自由に記述することはできません。
division(ディヴィジョン)区分・部分
nav ナビゲーションであることを示します。
header サイト名、ロゴ、タイトル、ナビゲーションなど、一番最初に見せたいグループです。
section 見出しh1〜h6とコンテンツで構成される、一区切りのブロックです。
artticle ニュースサイトやブログにおける各記事など、それだけで独立、完結するひとまとまりのコンテンツです。
1ページの中に1つだけ置けます。header、footer、nav、article、asideタグの中にmainタグを置くことはできない。
ul unordered list
li List Item
label フォームの項目のまとまりを示すボックス
p 段落 paragraph
h1〜h6 見出し heading
li List Item 箇条書きリストの項目を示します
span 特に意味を持たず、文章の一部のグループ化に使います。
検索エンジンは画像の内容までは判断できません。そこで画像と関連のある文章を代替テキスト(alt=”×××”)として記述します。
ページごとに Titleと Description を設定することができます。
SITE モードでサイト全体の情報、 PAGEモードで個別のページ情報の設定が行えます。