【簡単】Liveweaveの使い方を紹介！オンラインでHTML・CSSの編集しよう

Liveweaveがあれば、わざわざHTML・CSS編集用のテキストエディタやIDE(統合開発環境)をインストールして準備する必要がなく、変更内容もすぐにプレビューされるためとても使いやすいエディタの一つでしょう。

ここからはLiveweaveを使うメリットや使い方を詳しく見ていきましょう。

オンラインサービスを利用する場合、アカウント登録をしないと使えないことが多いですが、Liveweaveはアカウント登録なしで利用できます。

そのためわざわざLiveweaveのためにメールアドレスとパスワードを設定する必要がなく、気軽に利用することも可能です。

ただし、アカウント登録をすると保存して別のパソコンからでも読み込むことが簡単にできるようになるので、アカウント登録をすればメインエディタとしても利用できるでしょう。

Liveweaveはオンラインエディターであり、ブラウザさえあれば動作します。

そのため、Windows・Mac・Linuxどれも同じ環境でHTML・CSSを編集することができ、どんな環境からでも慣れたエディタを使ってHTML・CSSの編集を行えます。

また、アカウント登録を行うことでWindowsで編集したコードをMacで編集することも簡単に出来るので、複数OS使い分けている方にとても相性が良いエディタでしょう。

Liveweaveの大きなメリットの一つです。

編集内容が即プレビューされるようになっており、CSSの編集内容がどのように反映されるかといったことを、ページリロードすることなく確認できます。

もちろんimgタグなどを使って画像を読み込んだ場合も即プレビューしてくれます。

リアルタイムプレビュー機能を無効化することもできますが、特別な理由がない限りは無効化するメリットはないでしょう。

この機能があるとタグ名を全て入力する必要がない関係でタイプミスを起こす可能性も減るので、是非使っておきたい機能でしょう。

もちろんJavaScriptの変更内容も即反映されるほか、HTML・CSSと同じようにオートコンプリート機能を使えるので、関数名がうろ覚えでも間違えずに入力できるでしょう。

Liveweaveは、ただただHTML・CSSを編集できるだけでなく、様々な機能が用意されています。

ここからはLiveweaveの使い方について見ていきましょう。

デフォルトでは、

• 左上：HTML
• 左下：CSS
• 右上：JavaScript
• 右下：リアルタイムプレビュー

このURLさえ覚えておけば、後日編集し直すことも可能です。

「Download this weave as a single HTML file」なら、エディタ上のHTMLのみをダウンロードして保存できます。

全ての編集内容を保存したい場合は「Download this weave as a ZIP file」をクリックすることで、HTML・CSS・JavaScriptすべてのファイルがまとめられたZIPファイルをダウンロードできます。

また、手動でscriptタグでほかのJavaScriptファイルを読み込むことができるので、必要に応じて追加するといいでしょう。

 

基本的には、

• Liveweaveエディタの基本的な使い方
• 編集内容の保存方法(ダウンロード含む)
• JavaScriptライブラリの追加方法

Liveweaveは日本語にこそ対応していませんが、HTML・CSS編集目的で使うのであれば特に支障はないでしょう。

ただし、PHPなどのサーバサイドで使われるプログラミング言語には対応していないので、そういったサーバサイド寄りの言語を使いたい場合はほかのオンラインエディタを探すと良いでしょう。