前回は、ノーコードWEB制作ツール「STUDIO」を用いてポートフォリオサイトを作成しました。前記事では、STUDIOで用意されているテンプレートを組み合わせて、WEBサイトを構成しましたね。

テンプレートのドラッグ＆ドロップだけでも、シンプルなサイトなら作れますが、やはり自分でカスタマイズできないと、なにかと不便です。

そこで本記事では、各ブロックを自分でカスタマイズする方法を学びます。基本的な操作を学びながら、STUDIOの特徴であるボックスモデルに慣れていきましょう！

ボックスモデルとは？

STUDIOを使いこなすために、まず「ボックスモデル」を理解しましょう。

STUDIOでWEBサイトを作成するときは、要素をペタペタと貼るように配置するのではなく、「親要素」「子要素」からなるボックス単位で各セクションを構成していきます。

（「親要素」「子要素」の例は、下図のsection2をご覧くだい）

もちろん、工夫次第では、STUDIOでも斬新なデザインを実現することが可能です。ただ、その場合も、基本となる「ボックスモデル」を応用して作成します。

「ボックスモデル」を用いるメリットは、スクリーンサイズが変わってもレイアウトが崩れない「レスポンシブ」対応のデザインをより簡単に実現することができることです。…今は、ピンと来ないかもしれませんが、サイトを作っていくうちに実感できてくるはずですよ！

STUDIO基本操作① ボックス配置

早速STUDIOにログインして白紙のページをセットしましょう（ログイン➔「新しいプロジェクト」ボタン➔「空白」を選択。前回の記事に写真付きで記載してあります！）。

次に、下記のようにボックスを配置してみましょう。

ボックスの配置は以下の３ステップで完了です

• STEP１ 左のメニューからボックス（四角のアイコン）を選択
• STEP２ ボックスをドラッグ＆ドロップ（※オレンジ色の四角は、「ここにボックスを置けますよ」というガイドです。）
• STEP３ ボックスの大きさを調整する

配置されたボックスをクリックすると、選択された状態になります。選択されているボックスの上下左右＆四隅には白丸が表示されます。この白丸上にカーソルを合わせて、青矢印が出たら、拡大したい方向にドラッグします。そうすると、ボックスがその方向に拡大されます。

…ここで、STUDIOを使う上で重要な決まりを覚えておきましょう。

ボックスはどこでも好きな場所に配置できるわけではありません。各要素は、親要素の「上・下・左・右・中央」計９箇所のポジションのうちいずれかに配置することになります。※今回は、白紙の背景全体が「親要素」となります。

ボックスを横並びで配置する

今度は、以下のように「ヘッダー中央に」ボックスを複数個配置してみましょう。（色を付ける作業は後回しにして）、まずボックスを３つ横並びに設置する方法を考えましょう。

…さて、ここで、白紙のページそれ自体の「中央」に、ボックスを３つ配置するとどうでしょうか。（ページそれ自体が「親要素」になっている状態です）

要素がこの３つだけであれば、これで問題ありません。しかし、ページ自体の大きさに変更が生じた場合は困ったことになります。もし、ページ自体を拡大すると（図before➔after）、3つのボックスたちも親要素である背景ページの中央に移動してしまいます。

これらの要素を常に「ヘッダー中央」に配置したい場合はどうすればよいでしょうか。

正解は、「親要素になるボックスを設置する」ことです。

まず、ヘッダーとなる領域にひとつのボックスを設置します（この記事の一番最初で練習しましたね）。そして、そのボックスの中央に、さらにボックスを配置していきます。

※なお、ある要素のとなりに次の要素を置こうとする場合、要素をドロップ可能な位置に、オレンジ色のガイドラインが現れます。

これで、背景ページの大きさの変更を行った場合も、３つのボックスは「ヘッダー中央」に配置されるようになりましたね。

なお、背景ページのサイズ変更は、下図の赤丸で囲ったバーにカーソルを合わせ、現れた矢印を大きく（小さく）したい方向にドラッグすればOKです。

ボックスの色＆大きさの変更

STUDIOでの色やサイズの選択については、「STUDIO基礎編④ 要素へのスタイルの追加」で詳しく解説します。ここではざっくりと要点のみ解説します。

• STEP１ 要素の選択
  スタイルを変更したい要素（ボックス）をクリックして選択します
• STEP2 スタイルバーの「塗り」から色を選択
  画面上部のスタイルバー（タブが「ボックス」になっていることを確認）の「塗り」をクリックします。色選択画面が展開されるので、ここから変更後の色を選択します。

ボックスの大きさの変更の仕方は２通りあります。

その１ 図形を直接ドラッグする
ボックスを選択し、上下左右四隅に現れる白丸にカーソルを合わせ、現れる青矢印をドラッグすることで、拡大or縮小することができます。

その２ スタイルバーから変更
上の写真のスタイルバーの中に「横幅」「縦幅」という項目があります（現在150pxと表示）。ここに数字を入力することで、選択されているボックスの大きさを変更できます。

ボックスの配置

先ほどの3つの色付きボックスを配置したとき、まず「親要素」となる大きなボックスを作り、その中に３つの小ボックス（「子要素」）を配置しましたね。

ここでは、ある親要素内にある子要素の配置について解説します。

横方向の配置

まず、親要素をクリックして選択された状態にしてください。親要素が選択状態になると、中の子要素の配置に関するアイコンが現れます。このうち、親要素上部のアイコン（写真：赤四角）が横方向の配置にを表します。

最初、このアイコンは、「現在の子要素の並び方」を示していますが、これにカーソル合わせると他の選択肢が展開されます。

クリックして、変更後のスタイルを選択します。

縦方向の配置

前回と同様に、親要素をクリックして選択された状態にしてください。子要素の「縦方向の配置」に関しては、親要素の左サイドに現れるアイコンを使います。

クリックして、変更後のスタイルを選択します。

「縦並び」or「横並び」の変更

親要素が選択された状態で、右サイドに現れるアイコンから、子要素の「縦並び」or「横並び」の設定をすることができます。

なお、ボックスを縦並びにした場合も、同様にボックスの間隔（上下寄せ、均等割…etc）や開始位置（右揃え・左揃え…）などを設定できます。

ここで、もうひとつポイントです！「ジグザグの矢印」を使って、親要素からはみ出した子要素の配置を決めることができます。

例えば、先ほどの「赤・黄・青」のボックスが３セットあったときのことを考えてみましょう。通常の横並びでは、親要素に入りきらなかったぶんは画面から切れてしまいます。

しかし、ジグザグ矢印の設定にしておくと、**「折り返し表示」**になります。

さいごに

STUDIOでは、ボックス単位でレイアウトを組んでいく（親要素となるボックスの中に子要素を組み込んでいく）「ボックスレイアウト」でWEBサイトを構成していきます。

各セクションの「親要素」であるボックスのサイズを変更すると、中の「子要素」のサイズ・間隔もそれに合わせて変更されます。

このように「ボックスレイアウト」を意識してサイトを構成することで、レスポンシブなデザインの実現がぐっとしやすくなり、また、異なる大きさのディスプレイで表示したときのレイアウトの崩れを防ぎやすくなります。

デザインを見て、親要素・子要素の関係を見極めれば、STUDIOを使って手早くWEBサイトを作成することができるようになります。慣れれば、上記のレイアウトなら５分くらいで作れるようになります。

一緒に練習していきましょう！