Coding Tab

HTML、CSS、JavaScriptのコーディングをブラウザ上で!
Viewで表示確認しながらコーディングすることもできます。

Coding Tab

Coding Tabとは

Coding TabとはHTML,CSS,JavaScriptのコーディングをブラウザ上で行うオンラインエディタです。
新規にコーディングを始めたり、既存のコードを貼り付けて表示確認しながらコード修正をすることができます。 ソフトウェアのようにインストールする必要はありません。 インターネットに接続する環境があれば、誰でもどこからでもアクセスして無料で利用できます。 コーディングの学習にも使えるツールです。

個人で開発していますので機能不足な部分があるかもしれませんが、よければお試しください。

主な機能

HTMLエディタ

HTMLのコードを入力するエディタです。
タグを入力するか、もしくは既存のコードがあればここに貼り付けます。 エディタの右側にあるメニュー「コードアシスト」から選択したコードを入力することもできます。 「Esc」もしくは「F11」を押すとエディタ領域が横に広がりコード入力に集中することができます。元に戻す場合は 再度「Esc」もしくは「F11」を押します。

HTMLエディタ

CSSエディタ

CSSのコードを入力するエディタです。
コードを入力するか、もしくは既存のコードがあればここに貼り付けます。 エディタの右側にあるメニュー「コードアシスト」から選択したコードを入力することもできます。 「Esc」もしくは「F11」を押すとエディタ領域が横に広がりコード入力に集中することができます。元に戻す場合は 再度「Esc」もしくは「F11」を押します。

CSSエディタ

JavaScriptエディタ

JavaScriptのコードを入力するエディタです。
コードを入力するか、もしくは既存のコードがあればここに貼り付けます。 エディタの右側にあるメニュー「コードアシスト」から選択したコードを入力することもできます。 「Esc」もしくは「F11」を押すとエディタ領域が横に広がりコード入力に集中することができます。元に戻す場合は 再度「Esc」もしくは「F11」を押します。

JavaScriptエディタ

ビュー

コーディングの結果を表示します。コーディング中に「F4」を押すとビューを更新します。ビューの右上にある「Live」に チェックを入れると、コーディング中は自動更新されるため、表示を確認しながらコーディングを進めることができます。

※外部ファイルのJavaScriptを呼び出すようにコーディングしている場合は、更新処理が遅くなる場合があります。

ビュー

その他の機能

スタートアップ
Webサイトのタイトルとレイアウトを指定してコーディングを始めることができます。 新規にコーディングを始める場合に役立ちます。
コードアシスト
HTML,CSS,JavaScriptエディタの右側にあるメニューです。 コーディングの手助けとなるようなメニュー、サンプルコードを用意しています。
グリッド
ビューの背景をグリッド画像に置き換えます。要素の位置情報を調整するときの目安に使います。

メジャー
ビューの上側と左側にメジャーを表示します。目盛りは10pxで、要素の位置情報を確認するときの目安に使います。
ガイド
ビュー上に青色のガイドを2本(水平、垂直)表示します。要素の位置を揃えるときの目安として使います。
ビューサイズ変更
ビューの表示サイズを変更することができます。モバイルやタブレットでの表示を確認する際に使います。