アプリのインストール

上のボタンからダウンロードページに行き、アプリのインストールを行ってください。

アプリの内容

※画像をクリックで拡大

iPadでアプリを開くと、上の画像のような画面が表示されます。
上部タブにある『JS』『HTML』『CSS』をタッチすることによって画面が切り替わります。

基本操作とHTML入力

単なるHTMLコーディングをする場合、使うタブは『HTML』『CSS』だけで十分です。
『JS』はヘタに触らないようにしましょう。

まずは以下の手順通りに準備を始めます。

1. 画面上部にある『+』ボタンをタップ
2. プロジェクト名を『test』として入力
3. テンプレートを『基本』をタップ
4. 完了をタップの後、保存をタップ
5. 一覧画面に移動するので、『test』をタップ

以上で入力画面が表示され、コーディングの準備ができました。
では『HTML』タブ内にタグ打ちしましょう。
基本構文は出来上がっているので、組みたいHTMLタグを入力していくだけです。

では、テストとして以下のコードをbodyタグ内にコピペしてみましょう。

<h1>H1タグ</h1>
<h2>H2タグ</h2>
<hr>
<table class="table">
	<tbody>
		<tr>
			<th>th-1</th>
			<td>td-1</td>
		</tr>
		<tr>
			<th>th-2</th>
			<td>td-2</td>
		</tr>
	</tbody>
</table>

入力例は上の画像のようになります。
※iPhone画面です

コピペが完了したら画面上部の『▶』ボタンを押します。
表示結果は以下の画像のようになればOKです。

CSSの入力

続いてタブを『CSS』に切り替えて入力してみましょう。
以下のソースコードをコピペしてください。

h1{
	border-bottom: 2px solid #42a1c8;
}

h2{
	border-left: 5px solid #42a1c8;
	padding-left: 5px;
}

th{
	background-color: #ecf4f8;
	font-weight: bold;
	border: 1px solid #eee;
}

td{
	border: 1px solid #eee;
}

入力例は上の画像のようになります。
※iPhone画面です

コピペが完了したら画面上部の『▶』ボタンを押します。
文字や背景が装飾された以下の画像のようになればOKです。

以上がiPadまたはiPhoneでHTMLコーディングをする方法になります。

勝手がPCとは違うので注意！

前述した方法でコーディングはできますが、アプリで動作させているため、どうしてもPCとは勝手が違ってきます。
学習サイトや技術ブログを参考にWEBページを作ろうとしたときに、この違いがハンデになるときが来ると思います。

WEB制作に慣れている人であれば、この違いもなんとなく対応できますが、初めての方はかなり苦労するかもしれません。
それでも、絶対にPCでなければ勉強できないというわけでもありませんので、この違いだけ留意してもらえば結構です。

調べれば、探せば、なんとかなる！

今回、講義中に環境をどうするかという質問が出て、それへの対応がうまくできず、反省することとなりました。
それでも、当記事のように検索することによって、アプリが見つかり、使いやすい環境でコーディングができることがわかりました。

今回紹介したアプリの他にも、便利なもの、有料で多機能なものなど複数ありますので、自分の好みに合わせて利用してみてください。