コードを記述することなく、Webアプリが作成できるツールbubbleを使い、商品投稿アプリを作成していきます。
今回の準備編part2では、ボタンやテキストのデザインを変更してみたり、グループ化のやり方を初心者の方にも分かりやすく、画像付きで説明していきます。
｢準備編part1｣をまだご覧になってない方は是非参考にしてください。
Textで遊んでみよう
Textのデザインのやり方を解説していきます。
文字を入力してみよう
まずは、上記画像の赤線部分｢Text｣を 右側にドラッグ＆ドロップします。
｢Text｣をドラッグ＆ドロップ右側に張り付けると、黒いエディターが現れます。
エディターが出現しない場合は、張り付けたテキストをダブルクリックすると現れます。
エディター内の赤枠で囲んである部分の文字を変更すると、テキストの文字が変更されます。
今回は、なんでもいいので、文字を入力してみましょう。
文字のを変更しよう
空欄をクリックすることで、文字のフォントや大きさ、並びなどを自由に編集することが出来ます。
自由に触ってみて、慣れていきましょう。
全て消したい時は、消したいエレメントを選択し、キーボードのバックスペースで削除することが出来ます。
Buttonのデザインを変更しよう。
buttonの文字を変更しよう
｢Text｣と同じように、赤線のButtonを右側へドラッグ＆ドロップ張り付けましょう。
張り付けると、ButtonもTextと同じようにエディターが表示されます。
文字を変更すると、Button内部にある文字を変更することが出来ます。
bottonのデザインを変更しよう
｢style｣を空欄に変更することで、ボタンのデザインを変更することが出来ます。
｢color｣では、背景の色を変更でき、｢Background style｣では、背景色にグラデーションをかけたりと、自由に設定することが出来ます。
Styleを登録することで、デザインが楽になる
何度も使う、デザインを毎回手作業で設定していくのは、とても面倒ですよね？
自分が作ったデザインをstyleに登録することで、次回から同じデザインを楽に使用できます。
デザインをStyleに登録しよう
作成した、デザインをStyleに登録するには、｢Text｣や｢Button｣のエディター内にある、styleの中にある、｢Create a new style…｣をクリックします。
このような画面が表示されたら、１番上の空欄に自分がわかりやすよう「Style」の名前を付け、｢Create｣をクリックします。
これでStyleの登録は完了です。
登録したStyleを使ってみよう。
コードを記述することなく、Webアプリが作成できるツールbubbleを使い、商品投稿アプリを作成していきます。
今回の準備編part2では、ボタンやテキストのデザインを変更してみたり、グループ化のやり方を初心者の方にも分かりやすく、画像付きで説明していきます。
｢準備編part1｣をまだご覧になってない方は是非参考にしてください。
Textで遊んでみよう
Textのデザインのやり方を解説していきます。
文字を入力してみよう
まずは、上記画像の赤線部分｢Text｣を 右側にドラッグ＆ドロップします。
｢Text｣をドラッグ＆ドロップ右側に張り付けると、黒いエディターが現れます。
エディターが出現しない場合は、張り付けたテキストをダブルクリックすると現れます。
エディター内の赤枠で囲んである部分の文字を変更すると、テキストの文字が変更されます。
今回は、なんでもいいので、文字を入力してみましょう。
文字のを変更しよう
空欄をクリックすることで、文字のフォントや大きさ、並びなどを自由に編集することが出来ます。
自由に触ってみて、慣れていきましょう。
全て消したい時は、消したいエレメントを選択し、キーボードのバックスペースで削除することが出来ます。
Buttonのデザインを変更しよう。
buttonの文字を変更しよう
｢Text｣と同じように、赤線のButtonを右側へドラッグ＆ドロップ張り付けましょう。
張り付けると、ButtonもTextと同じようにエディターが表示されます。
文字を変更すると、Button内部にある文字を変更することが出来ます。
bottonのデザインを変更しよう
｢style｣を空欄に変更することで、ボタンのデザインを変更することが出来ます。
｢color｣では、背景の色を変更でき、｢Background style｣では、背景色にグラデーションをかけたりと、自由に設定することが出来ます。
Styleを登録することで、デザインが楽になる
何度も使う、デザインを毎回手作業で設定していくのは、とても面倒ですよね？
自分が作ったデザインをstyleに登録することで、次回から同じデザインを楽に使用できます。
デザインをStyleに登録しよう
作成した、デザインをStyleに登録するには、｢Text｣や｢Button｣のエディター内にある、styleの中にある、｢Create a new style…｣をクリックします。
このような画面が表示されたら、１番上の空欄に自分がわかりやすよう「Style」の名前を付け、｢Create｣をクリックします。
これでStyleの登録は完了です。
登録したStyleを使ってみよう
今回は、buttonのStyleを｢ボタン1｣とい名前で登録したので、新たに画面にButtonを設置しました。
デザインを変更する時と同様に、Styleをクリックします。
すると、その中に登録した｢ボタン1｣が新たに加わっているので、選択しましょう。
Styleを｢ボタン1」と変更すると、1回でデザインが登録したものに変わりました。
何度も使うものであれば、手間が減らせ非常に便利なので、是非活用してください。
登録したStyleのデザインを変更する。
すると画面がDesignから｢Styles｣に切り替わります。
画面の右側で、登録したStyleのデザインを一括で変更することが出来ます。
こちらを操作すると、設置されている登録されたStyleが一括で変更されるので、注意も必要です。
まとめ
今回で、準備編は終了となります。
次回からは、いよいよ商品アプリを作成していきます。
まずは、サイトのヘッダーを作成し、グループ化を使いつつ「購入ボタン」などを作成していきます。
準備編と同じように、画像付きで丁寧に解説をしていきますので、是非参考にしてください。
コメント