はじめに
ウェブフォームは、ウェブサイトやアプリケーションにおいてユーザーとのコミュニケーションを可能にする重要な要素です。
ウェブフォームを実装するにはプログラミングやセキュリティ、アクセシビリティについての知識が必要であり、HTMLやCSS、JavaScriptを学び始めたばかりの方にとって、ウェブフォームの実装は一つの壁と言えるでしょう。
そこで、「お問い合わせフォームを作ってみよう」というテーマでウェブ制作初学者の方向けにチュートリアルを作成しました。
ウェブ制作をスキルとして身に付けるために、最初から高度な知識や技術の理解は必要ありません。重要なのは作ってみることであり、このチュートリアルを通してウェブ制作の知識を深めて頂けたら幸いです。
なお、このチュートリアルの内容はHTML、CSS、JavaScriptなどのフロントエンド側に限られたものであり、PHPなどのサーバーサイド側の実装は含まれません。
このチュートリアルの目的について
ウェブフォームを作ることはウェブ制作初心者の方にとって多くの学びを得る良い機会になります。このチュートリアルは、お問い合わせページを制作することでウェブ制作初心者の方にHTMLやCSS、JavaScriptの理解を深めてもらうことを目的としています。
HTMLやCSS、JavaScriptの基本的な知識があればスムーズにこのチュートリアルを進めることができます。また、各記事にサンプルコードの全体を記載しているので、写経といった学習方法も取り入れやすいかと思います。
このチュートリアルの対象者
- ウェブ制作初心者の方
- ウェブフォームの実装に興味のある方
- HTML、CSS、JavaScriptを学習中の方
このチュートリアルで学べること
- ウェブフォームの基本知識
- フォーム部品のスタイリングについて
- バリデーションチェックの実装
- 効率や保守性を意識したJavaScriptコーディング
- モーダルウィンドウの実装
- アクセシビリティの基本的な対策
チュートリアルの構成
このチュートリアルは以下の9つの記事で構成されています。
- 基本編：ウェブフォームの概念や利用されるシーン、フォーム部品として使用される基本的なHTML要素について学びます。
- HTMLマークアップ編：お問い合わせフォームでよく使用されるHTML要素を使用してお問い合わせページのマークアップを行い、具体的なフォーム部品の使用方法について学びます。
- CSSスタイリング編：お問い合わせページをCSSでスタイリングし、フォーム部品をスタイリングするためのテクニックやポイントについて学びます。
- バリデーションチェック編（HTML）：バリデーションチェックの概要について学び、HTML要素に属性を追加してバリデーションチェックの実装を行います。
- バリデーションチェック編（JavaScript）：JavaScriptを使用して発展的なバリデーションチェックの実装方法を学びます。
- リファクタリング編：リファクタリングの基本的な考え方について学び、バリデーションチェック編で作成したJavaScriptコードを保守性や効率を意識して改修します。
- 確認画面の実装編：確認画面の必要性について学び、お問い合わせフォームの値を反映させた確認画面をモーダルウィンドウで実装します。
- アクセシビリティ対策編：モーダルウィンドウのアクセシビリティ面での課題について学び、スクリーンリーダーを使用したユーザーがモーダルウィンドウの情報にアクセスできるように対策を行います。
- 完成コード編：このチュートリアルで制作するお問い合わせページの完成コードを記載しています。このチュートリアルのレベル感を確認したい方や、手っ取り早くこのチュートリアルを終えたい方、コーディングに慣れるために写経したい方などはご活用ください。
使用するツールについて
このチュートリアルは以下のツールを使用します。リンクからダウンロードページへジャンプできます。
ウェブブラウザ、テキストエディタはお好みで問題ないかと思います。Visual Studio Codeを新たにインストールする場合、初期設定では日本語になっていないので以下の記事を参考にしていただけると良いです。
スクリーンリーダーはWindowsであればナレーターというものがプリインストールされていますが、こちらは使用せずNVDAというアプリケーションを使ってアクセシビリティのテストを行っています。
NVDAは無料で使用できるスクリーンリーダーで、ナレーターに比べて使いやすく視覚障害を持つ方にも多く利用されているツールです。ウェブページの音声読み上げのテストを行う場合はオススメです。
次のステップ
このチュートリアルの概要説明は以上です。
【基本編】に進み、ウェブフォームの概念や利用されるシーン、フォーム部品として使用される基本的なHTML要素について学びましょう。