HTML/CSS/Javascriptをリアルタイムで実行確認できるLiveweaveが便利過ぎる

HTML/CSS/Javascriptをリアルタイムで実行確認できるLiveweaveが便利過ぎる

HTMLやCSSに関する記事を書いてて、必ず記事中にタグの使用例を記載するのですが、間違った内容になっていないかどうかいつも気になってしまいます。

そこで、記述したコードを手軽にチェックできるテキストエディタを探してみたのですが、とても便利なものを見つけることができました。

それが、HTML、CSS、Javascriptをリアルタイムで実行確認できる「Liveweave」というオンラインエディタです。
今回は、このLiveweaveの使い方を簡単に紹介したいと思います。
 
 

スポンサーリンク

Liveweaveにアクセスする

Liveweaveは、公式サイトにアクセスするだけですぐに使うことができます。
 

 
 
サイトにアクセスすると、以下のように4分割された画面が開きます。

Liveweave サイト画面
 
 

HTMLを書く

4分割されている画面の左上がHTMLを記述するスペースです。
今回は例として、以下のようなコードを入力してみます。

 
 
すると、4分割されている画面の右下にリアルタイムで入力内容が反映されます。

HTMLエディタに入力した内容が右下にリアルタイムで反映される
 
 
これなら手軽に実行確認ができますね!
 
 

スポンサーリンク

CSSを書く

今度はCSSを書いてみましょう。
CSSは、4分割されている画面の左下に記述します。

今回は、以下のように入力してみます。

 
 
右下の表示内容も変わりましたね。

CSSエディタに入力した内容が右下にリアルタイムで反映される
 
 

Javascriptを書く

Javascriptのライブラリも豊富に用意されています。
画面上部のメニューにある『Library』をクリックしましょう。

画面上部のメニューにある『Library』をクリック
 
 
以下のようなメニューが開きます。
この中から、記述したいライブラリを選んでクリックします。

記述したいライブラリを選んでクリック
 
 
今回は、「jQuery」をクリックしてみます。
すると、以下のようにHTMLエディタに選んだライブラリが追記されます。

HTMLエディタに選んだライブラリが追記される
 
 

スポンサーリンク

図形などをCSSで出力する

個人的にこれが一番面白い機能でした。
まず、画面左のメニューにある『Graphics Editor』をクリックしてみましょう。

画面左のメニューにある『Graphics Editor』をクリック
 
 
すると、以下のようなイラストを描けるパレットが開きますので、ここに好きなイラストを描いてみます。

イラストを描けるパレット
 
 
ザッと描きましたが、リンゴのつもりです。笑

パレットに描いたリンゴのイラスト
 
 
イラストを描いたら、画面上部にある『View』をクリックし、さらに表示された『HTML Source』をクリックします。
(もしくは[Ctrl]+[U]キーを押します)

『HTML Source』をクリック
 
 
以下のようにコードが表示されますので、コードをコピーして画面を閉じましょう。

表示されたコードをコピー
 
 
コピーしたコードをHTMLエディタに貼り付けると、なんと先ほど描いたイラストが表示されます。
これはすごい!

描いたイラストがプレビューに反映される
 
 

まとめ

今回は、とっても便利なオンラインエディタ「Liveweave」の使い方を解説しました。
簡単にしか紹介できませんでしたが、他にも面白い機能などあったらどんどん紹介していこうと思います。
みなさんもぜひ使ってみてください。
 
 

スポンサーリンク


HTML/CSS/Javascriptをリアルタイムで実行確認できるLiveweaveが便利過ぎる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です