こんにちは！ノーコーダーのIKDです。
前回の【part1,2,3】をまだ読んでいない方は、一度読んでからきていただけると、よりわかりやすい内容になっていると思います。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
コンテンツを作成する
の前に、前回の確認をしましょう。
以下の画像のようになっていれば、OKです！
まだの方は、前回までの記事で確認してみてください。
確認できたら、次に進んでいきます。
まずは、画像のように、左グループの中にimageを入れてください。枠が赤くなっていれば大丈夫です。
- imageのタイトルをわかりやすく画像に変える
- ここをクリックして、画像を配置する
使用する画像は、ここからダウンロードしてください。
そうすると、画像のように、少し大きめに表示されるので右側の白丸をクリックして左にドラッグしてください。
綺麗にハマったら、次は右のテキストを作成していきます。
- StyleをH2 Heading Darkにすると、いい感じの大きさにしてくれます。
次はその下にwidth:350 height:300の大きさのテキストを配置して、文章を記述していきます。
画像の下に、例文を載せておきます。
例文：以下をコピペして使ってください。
ノーコードウォーカーとは、日本でノーコードの活用を推進すべく活動する団体である。
ノーコードの可能性を伝え、わかりやすい使用例を紹介していきます。
ゆくゆくは、現在のプログラミング事業の65%ほどがノーコードに置き換わっていくと言われている技術の有用性を当メディアを通じて、少しでも知っていただけたら幸いです。
まずは、bubbleをしっかり理解していきましょう。
これで、コンテンツ部分は完成です。メインカラムと背景グループをいい感じの色に変更してフッターの作成に取り掛かりましょう。
フッターの作成
いよいよ、最後はフッターです！最後まであとちょっとなので、頑張りましょう！
まずは、よくある下部の@~を作っていきます。とは言っても、テキストで配置するだけなので、ここまで出来ている方には問題ありませんね！
次は、フッター部分の大きな要素となっている、各ページへのリンクを貼っていきます。
今回は、あくまで例なので一つだけ作ります。
- 内部リンクか外部リンクかを設定できます。今回はinternal pageに設定しておきます。
- リンク先のページを設定します。今回は、bubbleのトップに飛ぶようになっています。
これで、リンクを貼り終わりました！初めてやる部分でしたが、そんなに難しい部分はありませんよね？
詳しい解説は、また次回以降で話していくので割愛します。
完成図はこんな感じになります。
まとめ
これで、超簡単なwebサイトのフロントの部分を作成することが出来ました。
フロントは、本当にプログラミングを一切必要とせず誰にでも出来たと思います。
なので、この分野の差別化としては、UI/UXやデザインが肝になってくると感じています。
この話も追々していくので楽しみにしていてくださいね！
最後に、bubbleのページの右上にあるpreviewを押して、実際にみてみましょう！
今回は以上です。長いシリーズ、お疲れ様でした〜
コメント