基本操作編 01 / 10 基本 約5分

エディタ画面の構成|どこに何があるか

Studioのエディタを4つの領域に分けて把握します。「あの設定はどこか」で迷わなくなるための地図と、操作の基本の型を解説します。

この教材で学べること

  • エディタの4つの領域と、それぞれの役割
  • 「選ぶ → 設定する」という操作の基本の型
  • クリックで選べない要素の選び方

Studioの操作は、覚える項目こそ多く見えますが、実際に使うのは「ボックスを置く・並べる・余白を空ける・サイズを決める」の4つにほぼ集約されます。この章はその4つを軸に進みます。まずは画面の地図からです。

4つの領域

エディタは大きく4つに分かれています。作業中に「あの設定はどこだったか」となったときは、この4分割のどれに属する話かを考えると、探す範囲が一気に狭まります。

Studioエディタ画面の4つの領域を示した概念図 ① ツールバー(上) ページの切り替え/プレビュー/公開ボタン ② レイヤー(左) 要素の入れ子構造が ツリーで見える 「選べない要素」は ここから選ぶ ③ キャンバス(中央) 実際のサイトの見た目。ここに要素を置いて組み立てる ④ 設定パネル(右) 選んだ要素の サイズ・余白・色・文字 作業時間の大半は ここを触っている
図1:左で「どれを」選び、右で「どうするか」を決める

操作の基本の型

操作の型はいつも同じで、「対象を選ぶ → 右のパネルで設定を変える」の繰り返しです。設定が変わらないときは、たいてい選んでいる対象が違います。

症状原因対処
設定を変えても見た目が変わらない意図と違う要素を選んでいるレイヤーで選択中の位置を確認する
クリックしても目的の要素が選べない手前に別の要素が重なっている左のレイヤーから直接選ぶ
親を選びたいのに子が選ばれるクリックは最も内側の要素を掴むレイヤーで一段上を選ぶ
設定項目が見当たらないその要素には無い設定親ボックス側の設定を確認する

「狙った要素はレイヤーから選ぶ」——これは初日から効く小技です。中央のキャンバスでクリックを繰り返すより確実で、慣れると作業速度がはっきり変わります。

次のレッスンでは、その要素そのものであるボックスと入れ子構造を扱います。

まずは1ヶ月間参加してみるplay_arrow