HTML Editor: Code & Preview

HTMLエディタを使えば、Webのアイデアを実際に動作するページに変換できます。CSSとJavaScriptを埋め込んだHTMLを記述し、結果をプレビューし、短いレッスンで変更しているコードを理解しましょう。モバイルデバイスで小さなWebページを試作する学生、初心者、開発者にとって、実用的なワークスペースです。

コードの記述とチェック

構文ハイライト、括弧のマッチング、自動閉じ、元に戻す/やり直し機能を備えたコードエディタで作業できます。行番号の表示、テキストの検索、スニペットが長くなった場合の行へのジャンプも可能です。追加の記号ツールバーにはよく使うコーディング文字が配置されているため、タグや式を入力する際に​​キーボードレイアウトを切り替える必要が少なくなります。

コード、出力、コンソールのタブを切り替えて使用できます。出力ビューでは、スタイルやスクリプトを含めたドキュメントがアプリ内でレンダリングされます。編集中はプレビューの自動更新を有効にしたり、結果の更新タイミングを自分で制御したい場合は自動更新をオフにしたりできます。コンソールメッセージは、ページのJavaScriptの動作を確認するのに役立ちます。

さまざまなプレビュー幅を試してみましょう

スマートフォン、タブレット、デスクトップのプレビューモードを選択して、レイアウトが異なる幅でどのように表示されるかを確認できます。これらはアプリ内のビューで、レスポンシブデザインを作成する際に、間隔や配置を確認するのに役立ちます。見出しを試したり、スタイルルールを調整したりした後、出力に戻って効果を確認してみましょう。

概念を学び、実践してみましょう

学習モードでは、HTML、CSS、JavaScriptのトピックをまとめて学習できます。すべてを順番に読むのではなく、テーマでフィルタリングしたり、概念を検索したりできます。各レッスンには、説明、簡単なヒント、実用的な使い方、よくある落とし穴、例、コード解説が含まれています。

レッスンの後には、2つの短いコーディング課題があります。まず例を復元し、次に概念を使って新しいコードスニペットを作成します。解答を確認し、フィードバックを読み、もう一度挑戦したい場合はスタートをリセットしてください。最初の課題が完了すると、2つ目の課題がアンロックされます。学習と練習の進捗状況はローカルに記録されるため、途中で中断したトピックに戻ることができます。

作業内容を保存して共有しましょう

ドキュメントを作成したり、保存済みのHTMLファイルを開くか、「保存」と「名前を付けて保存」を使用して、作業内容をHTMLファイルとして保存できます。ドキュメント自体を送信したい場合は、ファイルを共有してください。オンラインで引き渡す場合は、転送コードまたは共有リンクを生成し、付属のWebエディタを使用してスニペットの作業を継続できます。オンライン転送では、現在のコードがサービスに送信されるため、インターネット接続が必要です。

快適なワークスペースをカスタマイズしましょう

ライト、ダーク、またはシステム外観を選択し、エディタのフォントサイズを調整できます。設定では、行番号、アクセシビリティモード、自動保存、終了時のバックアップ、セッションの復元を制御できます。下書きとワークスペースのコピーはローカルアプリデータです。重要な作業は、ローカルセッションを永続的なバックアップとして扱うのではなく、ファイルとして保存してください。

「データとプライバシー」ページでは、設定の確認、一時的なエディタデータの消去、ローカルアプリデータのリセットができます。リワードハブでは、オプションで毎日の報酬や広告ベースのコインアクティビティも提供しています。報酬コインはアプリ内アイテムであり、現金ではありません。

独立したページの編集やバンドルされたレッスンの閲覧には、オンラインサービスは必要ありません。リモート画像、外部スクリプト、オンライン転送、広告には接続が必要です。HTMLエディタを使用して、コンセプトを読み、変更を試し、結果を確認し、構築したいコードを保持してください。