HTML&CSSの学習には、テキストエディタとブラウザが必要だ。関連書籍や既存サイトなどのソースコードを真似るようにテキストエディタに記述する。それをブラウザで動作確認する。これがHTML&CSS学習の一連の流れである。
しかしそれぞれツールを用意したり、起動させたり、と面倒くさくはないだろうか。
たとえば関連書籍の一項を写経するにしても、数行程度で済むわけだが、HTML,CSSファイルそれぞれを保存するなど煩わしい。そのために毎度styleタグやインラインスタイルで書くのも余計な作業である。
ましてやモニターサイズに制限があって広々と作業できないのならば、ツール切り替えが発生して効率悪い。エディタ記述して、ブラウザ見て、またエディタ、といった具合だ。
この工程に違和感やフラストレーションを感じているあなたならば、活用してもらえるであろうオンラインエディタなるツールを紹介したい。
オンラインエディタとは
オンライン上でHTML&CSSなどを記述、動作確認が行えるツールのこと。ブラウザでサービスのURLにアクセスすることで利用可能だ。別段アカウントを作成する必要はないが、勉強した内容をアーカイブしておけるためユーザー登録するのも良い判断だろう。
特徴
- HTML&CSS,JavaScriptの記述
- 動作確認がシームレス
- 記述内容のアーカイブ
- 記述内容のシェア機能
- フレームワークやライブラリの読み込み
使い方
いくつかあるオンラインエディタから「JSFiddle」をピックアップしてみよう。これは私が比較的よく使用するオンラインエディタであるが、ほかにも候補があるので興味があれば検索してみてほしい。
まずJSFiddleにアクセスすると、上部に青いバーが目につく。ここにはテンプレートが用意されている。ボタンをクリックすれば、下部エディタにソースコードが反映すると同時に動作確認することができる。一定の記述があり、勉強の取っ掛かりとして役立つかもしれない。
HTML,CSS,JavaScriptのフレームが設けられていて、ここがエディタとして機能する。HTMLフレームにあたっては、htmlタグやbodyタグで梱包する必要がない。つまりdivタグやh1タグ、pタグなどから書き始められる。
動作確認は、逐次「Run」ボタンをクリックする。Runボタンは、上部メニューバー左に配置されている。記述がシームレスに反映するオンラインエディタもあるが、検証したいソースコードが即座に描画されると煩わしい処理もある。そのようなことから私は、使いづらさなど感じたことはない。
まとめ
ご覧のようにHTML&CSS学習を強力にサポートするオンラインエディタであるが、さらに他人のソースコードをダッシュボード上に保存しておける。この機能も大変有り難い。結局のところ学習期は、他人のソースコードがもっとも優れた教材なのだと思う。
オンラインエディタは、あなたの学習を効率化して、習得を加速させるツールになるはずだ。
