Bubble

【初心者向け】ゼロから始めるWebアプリ ~商品投稿アプリを開発する~準部編part2

コードを記述することなく、Webアプリが作成できるツールbubbleを使い、商品投稿アプリを作成していきます。
今回の準備編part2では、ボタンやテキストのデザインを変更してみたり、グループ化のやり方を初心者の方にも分かりやすく、画像付きで説明していきます。
「準備編part1」をまだご覧になってない方は是非参考にしてください。

Textで遊んでみよう

Textのデザインのやり方を解説していきます。

文字を入力してみよう

まずは、上記画像の赤線部分「Text」を 右側にドラッグ&ドロップします。

「Text」をドラッグ&ドロップ右側に張り付けると、黒いエディターが現れます。
エディターが出現しない場合は、張り付けたテキストをダブルクリックすると現れます。

エディター内の赤枠で囲んである部分の文字を変更すると、テキストの文字が変更されます。
今回は、なんでもいいので、文字を入力してみましょう。

文字のを変更しよう

まず、文字のスタイル(デザイン)を変更するためには、上の画像の赤枠で囲んでいる、「Style」をクリックします。
クリックをすることで、様々な「Style」が表示されますが、自分で自由にデザインをするために、赤枠で囲んである空欄をクリックしましょう。

空欄をクリックすることで、文字のフォントや大きさ、並びなどを自由に編集することが出来ます。

自由に触ってみて、慣れていきましょう。

全て消したい時は、消したいエレメントを選択し、キーボードのバックスペースで削除することが出来ます。

Buttonのデザインを変更しよう。

それでは、「Button」のデザインを変更していきましょう。

buttonの文字を変更しよう

「Text」と同じように、赤線のButtonを右側へドラッグ&ドロップ張り付けましょう。

張り付けると、ButtonもTextと同じようにエディターが表示されます。

文字を変更すると、Button内部にある文字を変更することが出来ます。

bottonのデザインを変更しよう

まずはテキストと同じように、「Style」を空欄に変更しましょう。

「style」を空欄に変更することで、ボタンのデザインを変更することが出来ます。

このようにボタン内部の文字を大きくしたり、フォントを変更することが出来ます。

「color」では、背景の色を変更でき、「Background style」では、背景色にグラデーションをかけたりと、自由に設定することが出来ます。

Styleを登録することで、デザインが楽になる


何度も使う、デザインを毎回手作業で設定していくのは、とても面倒ですよね?
自分が作ったデザインをstyleに登録することで、次回から同じデザインを楽に使用できます。

デザインをStyleに登録しよう

作成した、デザインをStyleに登録するには、「Text」や「Button」のエディター内にある、styleの中にある、「Create a new style…」をクリックします。

このような画面が表示されたら、1番上の空欄に自分がわかりやすよう「Style」の名前を付け、「Create」をクリックします。

これでStyleの登録は完了です。

登録したStyleを使ってみよう。

コードを記述することなく、Webアプリが作成できるツールbubbleを使い、商品投稿アプリを作成していきます。
今回の準備編part2では、ボタンやテキストのデザインを変更してみたり、グループ化のやり方を初心者の方にも分かりやすく、画像付きで説明していきます。
「準備編part1」をまだご覧になってない方は是非参考にしてください。

Textで遊んでみよう

Textのデザインのやり方を解説していきます。

文字を入力してみよう

まずは、上記画像の赤線部分「Text」を 右側にドラッグ&ドロップします。

「Text」をドラッグ&ドロップ右側に張り付けると、黒いエディターが現れます。
エディターが出現しない場合は、張り付けたテキストをダブルクリックすると現れます。

エディター内の赤枠で囲んである部分の文字を変更すると、テキストの文字が変更されます。
今回は、なんでもいいので、文字を入力してみましょう。

文字のを変更しよう

まず、文字のスタイル(デザイン)を変更するためには、上の画像の赤枠で囲んでいる、「Style」をクリックします。
クリックをすることで、様々な「Style」が表示されますが、自分で自由にデザインをするために、赤枠で囲んである空欄をクリックしましょう。

空欄をクリックすることで、文字のフォントや大きさ、並びなどを自由に編集することが出来ます。

自由に触ってみて、慣れていきましょう。

全て消したい時は、消したいエレメントを選択し、キーボードのバックスペースで削除することが出来ます。

Buttonのデザインを変更しよう。

それでは、「Button」のデザインを変更していきましょう。

buttonの文字を変更しよう

「Text」と同じように、赤線のButtonを右側へドラッグ&ドロップ張り付けましょう。

張り付けると、ButtonもTextと同じようにエディターが表示されます。

文字を変更すると、Button内部にある文字を変更することが出来ます。

bottonのデザインを変更しよう

まずはテキストと同じように、「Style」を空欄に変更しましょう。

「style」を空欄に変更することで、ボタンのデザインを変更することが出来ます。

このようにボタン内部の文字を大きくしたり、フォントを変更することが出来ます。

「color」では、背景の色を変更でき、「Background style」では、背景色にグラデーションをかけたりと、自由に設定することが出来ます。

Styleを登録することで、デザインが楽になる


何度も使う、デザインを毎回手作業で設定していくのは、とても面倒ですよね?
自分が作ったデザインをstyleに登録することで、次回から同じデザインを楽に使用できます。

デザインをStyleに登録しよう

作成した、デザインをStyleに登録するには、「Text」や「Button」のエディター内にある、styleの中にある、「Create a new style…」をクリックします。

このような画面が表示されたら、1番上の空欄に自分がわかりやすよう「Style」の名前を付け、「Create」をクリックします。

これでStyleの登録は完了です。

登録したStyleを使ってみよう

登録した「Style」を使ってみましょう。

今回は、buttonのStyleを「ボタン1」とい名前で登録したので、新たに画面にButtonを設置しました。

新しく設置したbuttonをクリックし、エディターを出します。

デザインを変更する時と同様に、Styleをクリックします。

すると、その中に登録した「ボタン1」が新たに加わっているので、選択しましょう。

Styleを「ボタン1」と変更すると、1回でデザインが登録したものに変わりました。

何度も使うものであれば、手間が減らせ非常に便利なので、是非活用してください。

登録したStyleのデザインを変更する。

登録したStyleのデザインを変更する方法をご紹介します。
まずは、Styleの下に小さく表示されている「Edit style」をクリックしましょう。

すると画面がDesignから「Styles」に切り替わります。

画面の右側で、登録したStyleのデザインを一括で変更することが出来ます。

こちらを操作すると、設置されている登録されたStyleが一括で変更されるので、注意も必要です。

まとめ

今回で、準備編は終了となります。

次回からは、いよいよ商品アプリを作成していきます。

まずは、サイトのヘッダーを作成し、グループ化を使いつつ「購入ボタン」などを作成していきます。

準備編と同じように、画像付きで丁寧に解説をしていきますので、是非参考にしてください。

COMMENT

メールアドレスが公開されることはありません。