STUDIOでタブ切り替えを作成する

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

STUDIOでタブの切り替え表示は作れますか?

先生

STUDIOでのタブ切り替え表示の作り方を説明します

目次

STUDIOとタブ切り替えについて

STUDIOはHTMLやCSSを記述することなくWEBサイトを作成できるノーコードツールです。

この記事ではWEBサイトでよく使われるタブ切り替えを、STUDIOで作成する方法を説明します。

この記事でわかること
  • STUDIOでタブ切り替え表示を作成する手順

STUDIOの基本操作などは以下の別の記事に書いています。

この記事で作成する内容

この記事で作成するタブ切り替えは以下のものになります。

ヘッダー部分を作成する

まず、ヘッダー部分の土台となるボックスを以下の内容で作成します。

名称横幅縦幅
BaseHeader800px60px

名称は動作には関係しませんが、分かりやすいように付けています。

タブのヘッダーにするボックスを追加して、土台のボックスの内側に配置します。

色は分かりやすいように変えているだけですので、変えなくても別の色にしても構いません。(以降の手順でも同じです。)

ボックスを内側に配置しにくい場合

STUDIOでボックスを入れ子にする時に、親子のボックスのサイズが同じだとドラッグして内側に配置できないきないことがあります。

その場合、親ボックスのサイズをいったん大きくして、子ボックスを内側に配置した後にサイズを元に戻します。

タブのヘッダーのボックスに以下の内容を設定します。

名称横幅縦幅
Header125%60px

土台のボックスを選択して要素の向きボタンを押します。

続けて、右向きの矢印をクリックして要素の向きを右向きにします。

これで子要素が左端から右向きに並ぶようになります。

子要素のボックスをコピーして4個並べます。

この時点での構成は以下のようになっています。

2個目以降のボックスが上手く選択できない場合

表示設定や位置によっては、2個目以降のボックスが見た目上見えずに上手く選択できない場合があります。

その場合、1個目のボックスを選択してから2個目以降のボックスがある位置をクリックするか、レイヤーパネルから選択します。

コンテンツ部分の作成

次に、コンテンツの土台となるボックスをヘッダーの下に以下のサイズで作成します。

名称横幅縦幅
BaseContents800px400px

各タブページにするボックスを、土台のボックスの内側に配置します。

土台のボックスを選択して、子要素の垂直方法の配置を上揃えに設定します。

タブページのボックスに以下の内容を設定します。

名称横幅縦幅
Contents1800px400px

タブページのボックスも、コピーと貼り付けで4個に増やして、タブヘッダーと同じ色分けにします。

パージ全体よりもはみ出して編集できない場合

2番目以降のボックスが、ページ全体を表すボックスをはみ出していると内容を編集できません。

その場合、ページ全体を表すボックスを選択してサイズを大きくします。(必要なら編集後にサイズを元に戻します。)

タブページの4個のボックスそれぞれのIDに、”tab1″から”tab4″の値を設定します。

IDに使用できる文字の制限

IDには、半角小文字の英字と数字しか使用できず、数字を先頭にすることはできません。

この時点での構成は以下のようになっています。

コンテンツの土台のボックスを選択して、表示を切り取りに設定します。

タブのヘッダーのボックスを選択して、リンク#tab1を設定します。

リンクのリストに#tab1などが表示されない場合は、上の手順でIDが正しく設定されていません。

2番目以降のタブヘッダーのリンクにも、#tab2以降を設定していきます。

以上でタブ切り替えの作成は完了です。

完成内容

以上で作成手順は完了です。

ライブプレビューで表示すると以下のように表示されます。

STUDIOで作成したタブ切り替えのイマイチな点

上の手順でSTUDIOでもシンプルなタブ切り替えを作成できますが、いまいちな点も結構あります。

  • 選択されているタブヘッダーだけ表示を変えることができない。(ホバー状態の時だけ見た目を変えることはできる)
  • 2個目以降のタブページの内容を編集しにくい。(いったん2個目以降のページもデザインエディタに表示されるように設定を変更して、ページ内容を編集後に再度元に戻す必要がある)

Googleタグマネージャーと連携させることで、表示に関してできることはかなり増えますが、サイトを公開しないと動作を確認できないなど、あまり作業効率がよくないのでSTUDIOのメリットが薄れると思います。

WEBサイトでよく用いるコンテンツをSTUDIOで作成する記事は他にも以下があります。

よかったらシェアしてね!
  • URLをコピーしました!
目次