生徒STUDIOでのレイアウトの作り方を知りたいです。
先生STUDIOのボックスの操作や設定を説明します。
STUDIOのレイアウトの作り方
STUDIOでのWEBページ作成は、ボックスを並べてレイアウトを作成していきます。ここではボックスの操作や設定に付いて説明します。
- STUDIOのボックスの操作方法
- STUDIOのボックスで設定できること
ボックスの作成と移動
ボックスの作成
画面左側のツールボックスの2番目にあるボックスアイコンをクリックすると作成されます。
ボックスアイコンからドラッグして、配置する位置を指定しながら作成することもできます。
ボックスの移動
ボックスはドラッグで移動することができて、他のボックスの中に移動して入れ子にすることもできます。
ボックスを編集する
ボックスの大きさや余白などの編集は、以下の2つの操作で行えます。
- マウスでボックスの枠線などを直接ドラッグする
- ボックスを選択してプロパティのに値を編集する
サイズを変更する
ボックスを選択して枠線上にマウスを持っていくと、カーソルが青の両矢印に変わりサイズの数値が表示されます。
カーソルが青の両矢印の状態でクリックすると、サイズの数値を編集できるようになります。
カーソルが青の両矢印の時にドラッグするとサイズ変更操作になります。
マージンの編集
ボックスの枠線の中央部分の外側にマウスを持っていくと、カーソルがオレンジ色の両矢印になります。
サイズの変更と同様に、この状態でドラッグするとマージンを変更できます。
カーソルがオレンジ色の両矢印の状態でクリックすると、マージンの数値を編集できます。
パディング
パディングを設定するには、ボックスを選択後にマウスカーソルをボックスの枠線の中点の内側に移動します。
マウスカーソルが緑の両矢印になった状態でドラッグして移動します。
マウスカーソルが緑の両矢印の状態でクリックするとパディングの値を直接編集できます。
角丸の大きさを編集
ボックスを角丸にして角丸の大きさを設定するには、各角の内側の丸をドラッグして移動します。
全ての角丸を編集する場合
左上の角の内側にある丸にマウスカーソルを合わせると青の両矢印になります。
そのままドラッグすると全ての角丸の大きさが変わります。
個別の角丸を編集する場合
プロパティに各角の値を入力します。
ボックスの属性を設定する
ボックスを選択すると右上角の外側に表示される白いボタンをクリックするとボックスの属性が表示されます。
また、画面左端の中央にあるアイコンからも属性設定パネルを表示できます。
ボックスの属性設定パネルは以下の項目を設定できます。
タグ
ボックスのHTMLタグを設定します。デフォルトは<div>です。STUDIOの画面上ではタグを変更しても見た目は変わりませんが、ページ内での意味や役割をに沿って適切なタグに変更することができます。
ID
ボックスにページ内で一意となるIDを割り当てます。IDを割り当てることで、リンク先に指定したりできるようになります。
リンク
ボックスのリンク先を設定します。
STUDIO内のページへのリンク
「ページ」を選択して、リストに表示されるプロジェクト内のページやモーダル、IDなどからリンク先を選択します。
外部URLへのリンク
「URL」を選択して、外部サイトのURLを入力します。
プロパティの $URLは、自身のページへのリンクを外部サイトにパラメータとして渡す際に使用します。 $URLを設定しておくと、自身のページのURLが変わってもリンク先の修正が不要になります、
ボックス内の要素の並び方を設定
子要素の配置や並び方を設定するには、親ボックスを選択すると表示されるアイコンメニューで設定します。
子要素を持つボックスを選択すると、レイアウトを選択するアイコンが表示されます。
レイアウトを選択するアイコンのリストが表示されて、右寄せや上寄せなどを選択できます。
右端や下端の矢印をクリックすると、両端寄せや均等寄せのメニューも表示されます。
ボックスの並ぶ方向と折り返しを設定
親のボックスを選択すると並び方向を設定するアイコンが表示されます。
選択メニューが表示されるので、要素を並べる向きあるいは折返しを選択します。
ボックスのプロパティを入力する
ボックスを選択した状態で画面上部に表示されるプロパティの値を設定できます。
| 番号 | 項目 | 説明 |
|---|---|---|
| ① | マージン | ボックスのマージン(外側の余白)の値を設定 |
| ② | パディング | ボックスのパディング(内側の余白)の値を設定 |
| ③ | 横幅 | ボックスの水平方向の大きさを設定 |
| ④ | 縦幅 | ボックスの垂直方向の大きさを設定します。 |
| ⑤ | 角丸 | 角丸の大きさを設定 |
| ⑥ | 透明度 | 透明度を設定 |
| ⑦ | 塗り | 背景色を設定 |
| ⑧ | 枠線 | 枠線の色を設定 |
| ⑨ | シャドウ | 影の表示を設定 |
マージン
画面上部の「マージン」をクリックすると入力欄が表示されて、上下左右のマージンを入力することができます。
中央の錠マークをクリックすると、上下左右同一や左右同一の縛りを付けることができます。
パディング
パディングの値を入力します。
横幅
ボックスの水平方向のサイズを設定します。
| 単位 | 説明 |
|---|---|
| px | サイズは入力されたピクセルの値固定です。 |
| % | サイズは親要素からの割合です。 |
| auto | サイズはボックス内の子要素のサイズに合わせて自動で調整されます。 |
| flex | サイズは同じ階層の他の要素との比率で指定します。 |
px
サイズは入力されたpx（ピクセル）の値になります。
%
サイズは親要素の水平方向のサイズに対する割合で決まります。
auto
サイズはボックス内の子要素のサイズに合わせて自動で調整されます。子要素が無い場合は選択できません。
flex
同じ並びの他の要素との比率で決まります。（同じ並びに他に要素が無い時は指定できません。）
例えば、2flexと1flexのボックスを並べた時は以下のようになります。
同じ並びにサイズ指定された要素がある場合、残りのサイズをflexが指定された要素で分け合います。
縦幅
ボックスの垂直方向のサイズを設定します。
| px | サイズは入力されたピクセルの値固定です。 |
| % | サイズは親要素からの割合です。 |
| auto | サイズは適当に決められます。 |
| flex | サイズはボックス内の子要素のサイズに合わせて自動で調整されます。 |
| vh | 画面に対する比率で設定します。 |
vh以外は横幅と同様です。
vh
画面の縦サイズに対する割合で縦のサイズを指定します。
角丸
ボックスの各角の丸みを設定します。
4隅を同じ値にすることも、各角ごとに違う値にすることもできます。
透明度
ボックスの透明度を設定します。1が通常表示で、0だと完全に透明で何も見えなくなります。
塗り
ボックスの背景色を設定します。
パレット
よく使う色やお気に入りの色を登録しておくパレットです。
＋をクリックして選択している色を追加できます。
単色
塗りの色を単色にします。
グラデーション
塗りの色をグラデーションにします。
色の段階
バーをクリックするとポイントが追加されて、そのポイントを移動することでグラデーションの変化の段階を調整できます。
色の方向
矢印ボタンをクリックすると、グラデーションの方向を設定できます。
カラーコード
色の入力形式を切り替えます。
枠線
ボックスの枠線の太さを設定します。
シャドウ
ボックスの影を設定します。上のボタンで典型的なスタイルを選択して、下の入力欄で数値を細かく指定することができます。
表示形式を設定
画面左上のアイコンメニューで表示形式を設定できます。
表示/非表示
画面サイズごとにボックスの表示/非表示を設定します。
配置
ボックスの配置方法を選択します。
相対配置
親要素内に、上詰め、右寄せなどの相対的な位置指定で配置します。
絶対配置
ページ内の絶対座標を指定して配置します。
ボックスをドラッグすると座標位置が表示されます。
はみ出し方
ボックス内の子要素のはみ出し方を設定します。
はみ出し
ボックスからはみ出した子要素も表示されます。
切り取り
ボックスからはみ出した子要素（またはその一部）は表示されません。
スクロール
子要素のはみ出しに合わせて、親要素にスクロールバーが表示されます。
重ね順
ボックスの重なる順序を設定します。数値が大きい方が前面として表示されます。
ブレンドモード、フィルター、背面フィルター
ブレンドモード
ボックスの重なった部分の混ざり方を設定します。
フィルター
ボックスに掛けるフィルターを設定します。
背景フィルター
ボックスの透過された背景色に掛けるフィルターを設定します。
