生徒STUDIOのボックスでできることが知りたいです。
先生STUDIOのボックスの操作や設定を説明します。
- STUDIOのボックスの操作方法
- STUDIOのボックスで設定できること
STUDIOでのWEBページ作成では、ボックスを並べてレイアウトを作成していきます。ここではボックスの操作や設定に付いて説明します。
ボックスを作成する
ボックスの作成
画面左側のツールボックスの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
画面の縦サイズに対する割合で縦のサイズを指定します。
角丸
透明度
ボックスの透明度を設定します。1が通常表示で、0だと完全に透明で何も見えなくなります。
塗り
背景色を設定します。
パレット
よく使う色やお気に入りの色を登録しておくパレットです。
単色
塗りの色を単色にします。
グラデーション
塗りの色をグラデーションにします。
色の段階
バーをクリックするとポイントが追加されて、そのポイントを移動することでグラデーションの変化の段階を調整できます。
色の方向
矢印ボタンをクリックすると、グラデーションの方向を設定できます。
カラーコード
色の入力形式を切り替えます。
枠線
ボックスの枠線の太さを設定します。
シャドウ
ボックスの影を設定します。上のボタンで典型的なスタイルを選択して、下の入力欄で数値を細かく指定することができます。
表示形式を設定
画面左上のアイコンメニューで表示形式を設定できます。
表示/非表示
画面サイズごとにボックスの表示/非表示を設定します。
配置
ボックスの配置方法を選択します。
相対配置
親要素内に、上詰め、右寄せなどの相対的な位置指定で配置します。
絶対配置
ページ内の絶対座標を指定して配置します。
ボックスをドラッグすると座標位置が表示されます。
はみ出し方
ボックス内の子要素のはみ出し方を設定します。
はみ出し
切り取り
スクロール
重ね順
ボックスの重なる順序を設定します。数値が大きい方が前面として表示されます。
ブレンドモード、フィルター、背面フィルター
ブレンドモード
ボックスの重なった部分の混ざり方を設定します。
フィルター
ボックスに掛けるフィルターを設定します。
背景フィルター
ボックスの透過された背景色に掛けるフィルターを設定します。
