Liveweave mlooking

リアルタイムで編集・確認ができるエディタLiveweaveが超便利!その魅力と使い方をご紹介!


皆さんは HTML エディタ、何を使用していますか?
Windows 標準搭載のメモ帳、mi、ez-HTML… いろいろなものが存在していますね。
今回は、最近話題の Liveweave という
HTML5、CSS3、Javascript のエディタを紹介します。

まずはパソコンにダウンロード…?

Liveweave mlooking

それでは、まずは Liveweave を使うために
あなたのパソコンにダウンロード…しません!
Liveweave は Web アプリケーションと同じでブラウザ上で動作するエディタです。
よって、パソコンにダウンロードする必要はないのです。

ブラウザを立ち上げてさあ使おう!

liveweave スクリーンショット001

Liveweave は以下の URI (URL) へアクセスすることで使うことができます。
http://liveweave.com(外部サイト)
アクセスすると、このような画面になります。

HTML エディタを探している人がこの記事にたどり着いたと思いますので、
この画面を見ただけで大体の使い方は理解できるかと思います。

次以降の項で、HTML、CSS、Javascript を少し書いてみましょう。

HTML を書く

画面が4分割されていますが、その左上が HTML を書くスペースとなっています。初期状態では以下のサンプルコードが入力されていますね。

<head> 内にコードを入力しても画面右下のプレビュー画面には何も影響がありませんから、
ひたすら <body> に内容を書いていきましょう。

今回はこのコードを入力しました。あなたも是非入力してみてください。
コピー&ペーストではなく、直接入力することをオススメします。

すると、画面は以下のスクリーンショットのようになります。

liveweave スクリーンショット002

さて、入力の際にお気づきになったと思いますが、
この Liveweave、入力中に HTML のチェックやタグのサジェスト表示を行ってくれるんですよね。

HTML はある程度、コーディングをミスしたとしても、ブラウザが筆者の意図を読んでうま〜く表示してくれるんですよね。
ちゃんと表示してくれるので OK …ではないんですよ。

間違った HTML は SEO の順位に大きく影響します。
よって、HTML コーディングを適当にすることはできません。
ここが Liveweave のいいところですね。

さて、次は CSS を書いていきましょうか。

CSS を書く

今回は次のように入力します。

入力を終えると、プレビュー画面が次のように変わっているでしょう。

liveweave スクリーンショット003

今回はレビューということで簡単な CSS しか書いていませんが、
もっと高度な、ゴリゴリの CSS を書いても全く問題ありません。

また、HTML と同様に CSS のコーディングチェックも行ってくれますので、
エラー潰しもらくらくです。

まとめ

Liveweave のレビュー記事はここまでです。
NESTonline Blog の文字数制限によって簡単な紹介しかできませんでしたが、
Liveweave の良さが少しでも伝わったかと思います。

まとめると、

  • パソコンにダウンロードする必要がないから、
    OS に依存しせず、ブラウザさえあればどこでも書ける!
  • HTML、CSS、Javascript を同時に書くことができる!
  • コーディングと同時に動作のプレビューも行うことができる!
  • 各コードのエラーチェックも自動で行ってくれるので、
    自分でエラーを探す必要がなくなる!

が今回紹介した Liveweave の良いところです。

また、Liveweave にはもっと便利な機能が備わっていますので、
ご自身の手で確かめてみてください!
すべて簡単な英語ですから、誰でも使いこなすことができますよ。

 

http://liveweave.com(外部サイト)

About Liveweave(外部サイト)

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next Article国内の洗練されたWebデザインが見られるギャラリーサイトまとめ