HTML&CSSの勉強を効率的にするツール「オンラインエディタ」のすすめ

HTML&CSSの学習には、テキストエディタとブラウザが必要だ。関連書籍や既存サイトなどのソースコードを真似るようにテキストエディタに記述する。それをブラウザで動作確認する。これがHTML&CSS学習の一連の流れである。

しかしそれぞれツールを用意したり、起動させたり、と面倒くさくはないだろうか。

たとえば関連書籍の一項を写経するにしても、数行程度で済むわけだが、HTML,CSSファイルそれぞれを保存するなど煩わしい。そのために毎度styleタグやインラインスタイルで書くのも余計な作業である。

ましてやモニターサイズに制限があって広々と作業できないのならば、ツール切り替えが発生して効率悪い。エディタ記述して、ブラウザ見て、またエディタ、といった具合だ。

この工程に違和感やフラストレーションを感じているあなたならば、活用してもらえるであろうオンラインエディタなるツールを紹介したい。

オンラインエディタとは

オンライン上でHTML&CSSなどを記述、動作確認が行えるツールのこと。ブラウザでサービスのURLにアクセスすることで利用可能だ。別段アカウントを作成する必要はないが、勉強した内容をアーカイブしておけるためユーザー登録するのも良い判断だろう。

特徴

  • HTML&CSS,JavaScriptの記述
  • 動作確認がシームレス
  • 記述内容のアーカイブ
  • 記述内容のシェア機能
  • フレームワークやライブラリの読み込み

使い方

いくつかあるオンラインエディタから「JSFiddle」をピックアップしてみよう。これは私が比較的よく使用するオンラインエディタであるが、ほかにも候補があるので興味があれば検索してみてほしい。

https://jsfiddle.net/

まずJSFiddleにアクセスすると、上部に青いバーが目につく。ここにはテンプレートが用意されている。ボタンをクリックすれば、下部エディタにソースコードが反映すると同時に動作確認することができる。一定の記述があり、勉強の取っ掛かりとして役立つかもしれない。

HTML,CSS,JavaScriptのフレームが設けられていて、ここがエディタとして機能する。HTMLフレームにあたっては、htmlタグやbodyタグで梱包する必要がない。つまりdivタグやh1タグ、pタグなどから書き始められる。

動作確認は、逐次「Run」ボタンをクリックする。Runボタンは、上部メニューバー左に配置されている。記述がシームレスに反映するオンラインエディタもあるが、検証したいソースコードが即座に描画されると煩わしい処理もある。そのようなことから私は、使いづらさなど感じたことはない。

まとめ

ご覧のようにHTML&CSS学習を強力にサポートするオンラインエディタであるが、さらに他人のソースコードをダッシュボード上に保存しておける。この機能も大変有り難い。結局のところ学習期は、他人のソースコードがもっとも優れた教材なのだと思う。

オンラインエディタは、あなたの学習を効率化して、習得を加速させるツールになるはずだ。

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。