特集
カテゴリー
タグ
メディア

プレビューが便利! Web構築に役立つ『Mozilla Thimble』

  • カテゴリー:
  • TOOL

「自分でブログをカスタマイズしたり、Webサイトを作ったりしてみたいけど、HTMLやCSSを学ぶにはどこから手をつけて良いかわからない」

そんな初心者の方にぴったりな『Mozilla Thimble』というツールが公開されました。これ使うにはブラウザひとつでOKです

120627mozillathimble1.jpg

左側のEditorでHTMLやCSSを編集すると、すぐに右側のプレビューに反映されるので、自分が今どこを編集しているのか一目瞭然です。逆に、右側のプレビューを見ながら編集したい箇所をクリックすると、左側のEditorでコード内のどこに該当するのかを青いマーカーで表示して教えてくれます

120627mozillathimble2.jpg

Mozilla Thimbleでは、「Project」と呼ばれるテンプレートが複数用意されているので、そのコードを元にカスタマイズして練習することもできます。

120627mozillathimble3.jpg

白紙の状態から始めて自分でいろいろ試したい人は、トップページの「Start from scratch」をクリックしましょう。

120627mozillathimble4.jpg

完成したら右上の「Publish」を押すと、オリジナルのURLが発行されて実際に公開することができます。Mozilla Thimbleは英語のサイトですが、HTMLやCSSの仕組みをなんとなくでもわかっていれば、ほとんど抵抗なく使えると思います。一度試してみてはいかがでしょうか?

Mozilla Thimble

(野本纏花)

swiper-button-prev
swiper-button-next