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

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

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

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

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

スポンサーリンク

Liveweaveにアクセスする

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

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

Liveweave サイト画面

Liveweave サイト画面

 
 
左上にHTML、左下にCSS、右上にJavascriptを記入します。
編集結果は、右下のプレビュー画面に表示されます。
 
 

Liveweaveとは

Liveweaveは、HTML、CSS、Javascriptをリアルタイムプレビューしながら編集できるオンラインエディタです。

通常、HTMLやCSSのコーディングをしながら見た目や動作を確認するには、別画面を開いて確認する必要があります。
例えば以下のように、

  1. コーディング
  2. ファイルの保存
  3. ブラウザで更新
  4. 確認

 
というような作業を繰り返すのですが、これがなかなか面倒臭いです。

リンゴ
コーディングのタイミングですぐに確認できるとベストですよね。
 
 
そんな悩みを解消してくれるのがLiveweaveです。

Liveweaveでは、一つの画面の中にHTML、CSS、Javascript、プレビューが4分割して表示されるので、画面を切り替えずにリアルタイムで実行確認をすることができます。

ブラウザ上で動作するので、エディタを別途インストールする必要もありません。
ネットにつながっていれば、どのパソコンからでも編集作業が可能です。
 
 

スポンサーリンク

HTMLを書く

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

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

入力した内容がリアルタイムで反映される

入力した内容がリアルタイムで反映される

 
 
リンゴ
ものすごく便利ですね!
 
 

CSSを書く

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

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

 
 
右下の見た目も変わりましたね。

入力した内容がリアルタイムで反映される

入力した内容がリアルタイムで反映される

 
 
リンゴ
画面を確認しながら編集できるのでわかりやすいですね。
 
 

スポンサーリンク

Javascriptを書く

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

画面上部のメニューにある『Library』をクリック

『Library』をクリック

 
 
以下のようなメニューが開きます。
この中から、記述したいライブラリを選んでクリックします。

記述したいライブラリを選んでクリック

Liveweave Javascriptのライブラリ

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

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

選んだライブラリが記述される

 
 
リンゴ
ライブラリは、GoogleライブラリAPIから読み込まれるようになっています。
 
 

CSS Exploler

CSS Explolerを使えば、CSSが分からなくても簡単にボックスを作成することができます。

画面左のメニューにある『CSS Exploler』をクリックしましょう。

『CSS Exploler』をクリック

『CSS Exploler』をクリック

 
 
以下のような画面が開きます。

Liveweave CSS Exploler

Liveweave CSS Exploler

 
 
右上のプレビュー画面を見ながら、画面左にあるパラメーターをいじってみましょう。

右下にCSSコードが生成されます。
あとはこれをコピペして使うだけです。

プレビュー画面を見ながらパラメーターを設定

プレビュー画面を見ながらパラメーターを設定

 
 

CSS Explolerの設定項目

CSS Explolerで設定できる項目は以下の通りです。

Radius and Box Shadow

  • Border Radius
    ボックスのコーナーの角丸を指定
  • Box Shadow Offset
    ボックスにドロップシャドウを指定
  • Box Shadow Blur
    ドロップシャドウのぼかしを指定
  • Box Shadow Color
    ドロップシャドウの色を指定

Text Shadow

  • Text Shadow Offset
    テキストにドロップシャドウを指定
  • Text Shadow Blur
    ドロップシャドウのぼかしを指定
  • Text Shadow Color
    ドロップシャドウの色を指定
 
 

Transforms

  • Rotate
    ボックスの回転を指定
  • Scale
    ボックスの拡大・縮小を指定
  • Skew X/Horizontal
    ボックスを横方向に傾斜変形させる
  • Skew Y/Vertical
    ボックスを縦方向に傾斜変形させる

Columns

  • Columns
    ボックス内のカラム数を指定
  • Gap
    カラムの間隔を指定
  • Rule Thickness
    カラムの区切り線の太さを指定
  • Rule Color
    カラムの区切り線の色を指定
 
 

Gradient Background

  • Direction
    背景色のグラデーションの種類を指定
  • From Color
    グラデーションの開始色を指定
  • From Position (relative)
    グラデーションの開始位置を指定
  • To Color
    グラデーションの終了色を指定
  • To Position (relative)
    グラデーションの終了位置を指定

Border and Outline

  • Border Thickness
    ボックス周りのボーダーの太さを指定
  • Border Color
    ボックス周りのボーダーの色を指定
 
 

Background

  • Background Color
    ボックスの色を指定
  • Opacity (0.0 = fully transparent)
    ボックスの透明度を指定
  • Z-index
    ボックスの重なり順を指定

Content and Text

  • Content
    ボックス内のコンテンツを指定
  • Padding
    ボックス内の余白を指定
  • Text Size
    ボックス内のテキストのサイズを指定
  • Text Color
    ボックス内のテキストの色を指定
  • Alignment
    ボックス内のコンテンツの揃え位置を指定
 
 

スポンサーリンク

Color Explorer

Color Explorerは、パレットから選択した色の16進カラーコードを表示してくれる機能です。

画面左のメニューにある『Color Explorer』をクリックしましょう。

『Color Explorer』をクリック

『Color Explorer』をクリック

 
 
以下のような画面が開きます。
カラーパレットの中の気になる色をクリックしてみましょう。

Liveweave Color Explorer

Liveweave Color Explorer

 
 
すると、画面右上にクリックした色のカラーコードが表示されます。

クリックした色のカラーコードが表示される

クリックした色のカラーコードが表示される

 
 
こちらのカラーコードはもちろんコピー可能です。
 
 

Vector Editor

Vector Editorは、書いた絵をHTMLで出力するペイント機能です。

画面左のメニューにある『Vector Editor』をクリックしましょう。

『Vector Editor』をクリック

『Vector Editor』をクリック

 
 
以下のようなイラストが描けるパレットが開きます。
ここに好きなイラストを描いてみましょう。

イラストを描けるパレット

Liveweave Vector Editor

 
 
ザッと描きましたが、リンゴのつもりです。笑

パレットに描いたリンゴのイラスト

パレットに描いたリンゴのイラスト

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

『HTML Source』をクリック

『HTML Source』をクリック

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

表示されたコードをコピー

表示されたコードをコピー

 
 
Liveweaveに戻り、コピーしたコードをHTMLエディタに貼り付けましょう。
すると、先ほど描いたイラストがプレビュー画面に表示されます。

描いたイラストがプレビュー画面に表示される

描いたイラストがプレビュー画面に表示される

 
 
リンゴ
これはすごいですね!
 
 

スポンサーリンク

コードを保存

Liveweaveで書いたコードはオンライン上に保存できるだけでなく、HTML、CSS、Javascriptそれぞれのファイルをダウンロードすることもできます。
 
 

オンライン上に保存

画面上部の『Save』をクリックしましょう。

『Save』をクリック

『Save』をクリック

 
 
これで、オンライン上にコードが保存されました。
 
 

コードをダウンロード

オンライン上にコードを保存したら、画面上部の『Tools』をクリックし、以下のメニューを開きましょう。

『Tools』をクリックし、メニューを開く

『Tools』をクリックし、メニューを開く

 
 

HTMLファイルにまとめてダウンロード

Download this weave as a single HTML file』をクリックすると、書いたコードが1つのHTMLファイルにまとまった形でダウンロードされます。

ダウンロードしたHTMLファイル

ダウンロードしたHTMLファイル

 
 

ZIPファイルにまとめてダウンロード

Download this weave as a .ZIP file』をクリック(もしくはCtrl+Dキーを押します)すると、HTML、CSS、JavascriptそれぞれのファイルがまとまったZIPファイルをダウンロードできます。

ZIPファイルをダウンロードし中身を確認すると、以下のように、HTML、CSS、Javascriptのファイルがそれぞれ分けられてダウンロードされています。

ダウンロードしたZIPファイルの中身

ダウンロードしたZIPファイルの中身

 
 

Liveweaveの便利なポイント

入力補助機能

開始タグを入力すると自動で終了タグが入力されたり、入力候補リストが出るなどの入力補助機能も充実しています。

開始タグを入力すると自動で終了タグが入力される

開始タグを入力すると自動で終了タグが入力される

 
 

エラーチェック機能

自動でコードのエラーチェックを行ってくれます。
HTMLでエラーがあると、対象のタグがマーキングされます。

エラーがあると対象のタグがマーキングされる

エラーがあると対象のタグがマーキングされる

 
 
CSSでエラーがあると、警告文が出ます。

エラーがあると警告文が出る

エラーがあると警告文が出る

 
 

ユーザー登録

ユーザー登録をすると、保存したコードを別のPCで呼び出したり、データを複数保存することができるようになります。

リンゴ
もちろんユーザー登録しなくても問題なく使えます。
 
 

スポンサーリンク

Liveweaveの惜しいポイント

本格的なWEBサイト制作には不向き

HTML、CSS、Javascript、プレビューと、画面が4分割されていて使いやすいのですが、Javascriptファイルを2つ読み込みたい場合などには不便です。
そのため、本格的なWEBサイトを作るというよりかは、ちょっとしたコードチェックなどに使うと便利かもしれません。

リンゴ
HTMLやCSSを勉強したい方におすすめのツールです。
 
 

動作が重くなる

コードが長くなるとマウスのスクロールがつっかかったりして動作が重くなります。
そのため、長いコードを書くのには向いていません。
上でも書きましたが、簡単な動作確認などに使うのをおすすめします。
 
 

まとめ

今回は、とっても便利なオンラインエディタ「Liveweave」の使い方を解説しました。

Liveweaveは、リアルタイムでHTML、CSS、JavaScriptの実行確認ができる優れものです。
コードのエラーチェックも自動で行ってくれるので、初心者の方やこれからHTML・CSSを勉強したいという方にもおすすめです。
気になった方はぜひ使ってみてください。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








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