Blosite
  • チュートリアル一覧へ
  • ヘルプ
  • コードを表示
  • スクリプトの
    常時実行:OFF
  • サンドボックス
    で作り続ける
  • プレビューを
    全画面で表示
×

Blositeって?
×
➡ ➡ ➡

Blositeへようこそ!

このサイトでは、直感的にブロックを組み合わせることで、ウェブサイトを作るための基本的な技術(HTML, CSS, JavaScript)について学びつつ、自分の思うようにサイトを作り、他の人が遊べるように公開することができます!
この文章が書かれているポップアップは、右上の「ヘルプ」からいつでも開くことができますよ!

では、次のスライドに移動しましょう。上のボタンか右下の「進む」を押してください!

Sample Image

移動できましたね!
このブロックはホールドして自由に配置できます。また、左側のメニューを選択するとパネルが開いて、ブロックを取り出すことができます。
テンプレートには、すでに組み合わさったブロックがいくつかあります。
ブロックにマウスポインターをかざすと説明文が出てくるので、ぜひ活用してください!

右側の丸いアイコンを押すとメニューが開かれます。機能は以下のとおりです。

  • コードを表示:実際のHTMLのコードを見ることができます。興味があれば左のブロックと見比べてみてください!
  • スクリプトの常時実行:OFFのときはボタンを押すたびに<script>が実行され、ONだと右側のボタンのアイコンが切り替わり、常時実行の状態だとブロックを動かすたびに<script>が実行されます。
  • サンドボックスで作り続ける:チュートリアルの内容から外れて作り続けたいときに押しましょう!サンドボックスでは作ったサイトを公開することができます。
  • プレビューを全画面で表示:右側にあるプレビューを別のタブで全画面で見ることができます。

右には作ったサイトのプレビューが表示されます。丸型の実行アイコンを押してから、「押してください」と書かれたボタンを押してみましょう!
余裕のある方は、真ん中のブロックを自由に動かしたり、テキストを変えたりしてみて、右側のプレビューがどう変わるのか見てみましょう!

ブロックの意味していることがわからなくても大丈夫です!これからのチュートリアルを通じて、基本的な内容について学んでいきましょう!

進めている途中で何かわからないことがあれば、ぜひスタッフに聞きましょう!