生徒STUDIOでタブの切り替え表示は作れますか？
先生STUDIOでのタブ切り替え表示の作り方を説明します
STUDIOはHTMLやCSSを記述することなくWEBサイトを作成できるノーコードツールです。
この記事ではWEBサイトでよく使われるタブ切り替えを、STUDIOで作成する方法を説明します。
- STUDIOでタブ切り替え表示を作成する手順
STUDIOの基本操作などは以下の記事に書いています。
この記事で作成する内容
この記事で作成するタブ切り替えは以下のものになります。
ヘッダー部分を作成する
まず、ヘッダー部分の土台となるボックスを以下の内容で作成します。
| 名称 | 横幅 | 縦幅 |
|---|---|---|
| BaseHeader | 800px | 60px |
タブのヘッダーにするボックスを追加して、土台のボックスの内側に配置します。
STUDIOでボックスを入れ子にする時に、親子のボックスのサイズが同じだとドラッグして内側に配置できないきないことがあります。
その場合、親ボックスのサイズをいったん大きくして、子ボックスを内側に配置した後にサイズを元に戻します。
タブのヘッダーのボックスに以下の内容を設定します。
| 名称 | 横幅 | 縦幅 |
|---|---|---|
| Header1 | 25% | 60px |
土台のボックスを選択して要素の向きボタンを押します。
続けて、右向きの矢印をクリックして要素の向きを右向きにします。
これで子要素が左端から右向きに並ぶようになります。
子要素のボックスをコピーして４個並べます。
この時点での構成は以下のようになっています。
表示設定や位置によっては、2個目以降のボックスが見た目上見えなくて上手く選択できない場合があります。
その場合、1個目のボックスを選択してから2個目以降のボックスがある位置をクリックするか、レイヤーパネルから選択します。
コンテンツ部分の作成
次に、コンテンツの土台となるボックスをヘッダーの下に以下のサイズで作成します。
| 名称 | 横幅 | 縦幅 |
|---|---|---|
| BaseContents | 800px | 400px |
各タブページにするボックスを、土台のボックスの内側に配置します。
土台のボックスを選択して、子要素の垂直方法の配置を上揃えに設定します。
タブページのボックスに以下の内容を設定します。
| 名称 | 横幅 | 縦幅 |
|---|---|---|
| Contents1 | 800px | 400px |
タブページのボックスも、コピーと貼り付けで4個に増やして、タブヘッダーと同じ色分けにします。
2番目以降のボックスが、ページ全体を表すボックスをはみ出していると内容を編集できません。
その場合、ページ全体を表すボックスを選択してサイズを大きくします。（必要なら編集後にサイズを元に戻します。）
タブページの4個のボックスそれぞれのIDに、”tab1″から”tab4″の値を設定します。
IDには、半角小文字の英字と数字しか使用できず、数字を先頭にすることはできません。
この時点での構成は以下のようになっています。
コンテンツの土台のボックスを選択して、表示を切り取りに設定します。
タブのヘッダーのボックスを選択して、リンクに#tab1を設定します。
2番目以降のタブヘッダーのリンクにも、#tab2以降を設定していきます。
以上でタブ切り替えの作成は完了です。
完成内容
以上で作成手順は完了です。
ライブプレビューで表示すると以下のように表示されます。
STUDIOで作成したタブ切り替えのイマイチな点
上の手順でSTUDIOでもシンプルなタブ切り替えを作成できますが、いまいちな点も結構あります。
- 選択されているタブヘッダーだけ表示を変えることができない。（ホバー状態の時だけ見た目を変えることはできる）
- 2個目以降のタブページの内容を編集しにくい。（いったん2個目以降のページもデザインエディタに表示されるように設定を変更して、ページ内容を編集後に再度元に戻す必要がある）
WEBサイトでよく用いるコンテンツをSTUDIOで作成する記事は他にも以下があります。
