見出し画像

【ノーコードbubble】"shape"の使い方

今回は、ノーコードbubbleの”shape”の使い方について解説します。
ウェブサービスを作る際にサイトデザインを構築する際に使う機能です。
あまり使う機会はないかもしれませんが、覚えておくと便利な機能です。

ノーコードbubbleについてはこちらの記事をご覧ください↓

それでは、shapeについて解説します。

ノーコードbubbleの"shape"とは?

まず”shape”の意味は、形状、形、かっこう、という意味です。

IT用語でも、”shape”は、点や線を組み合わせて作った図形などを意味することが多く、英語の意味と同じですね。

bubbleで言う、”shape”も同じ意味です。

画像1

ノーコードbubble”shape”の使い道

次に実際にどのような時に使用するかです。

これは、どのようなウェブサービスやアプリを作るかにもよりますが、、、
今回は多く使われている使いかたを紹介します。

1,ヘッダー、フッダー

2,ウェブデザイン

この2つが多くの使い道だと思います。

ノーコードbubble”shape”の配置方法

bubbleの編集画面からドラッグ&ドロップで配置できます。

ノーコードbubble”shape”の編集方法

画像2

無題 (4)

①shapeの名前を指定できます
*分かりやすい名前にしておくと、後でエレメントツリーないで探しやすくなります。

②このエレメンツをクリックできないようにします

③ワークフローを作成します

④このエレメンツをページに表示します

⑤このエレメンツを固定幅にします

⑥エレメンツの場所を指定できます

⑦スタイルを指定できます

⑧”shape”のバックグラウンドからーを選択できます

⑨色の選択ができます

⑩境界線を別途指定したい場合に使用します

⑪境界線を引くことができます

⑫影を作ることができます

⑬エレメンツを回転させることができます

⑭親エレメンツ・子エレメンツを指定することができます

⑮編集画面でドラッグできないようになります
*大きなウェブサービスや複雑な編集をする際に使用します。

最後に

今回はノーコードbubbleの”shape”について解説しました。
”shape”は、ウェブサイトを作る際にとても便利です。
しかし、個人的には、エディタ内にあるグループを使用しても同じことができるのではないかなとも思います。

最初に説明した、フッダー、ヘッダーの使用方法もありますが、サイト内ページが多くあるなら”Reusable elements”の方が使い勝手は断然いいです。


この記事が気に入ったらサポートをしてみませんか?