ゼロから学ぶウェブ制作

NS Web Docsでは、ウェブ制作初心者の方がHTML/CSS/JavaScriptを学ぶための情報を発信しています。

ウェブ制作に興味がある方、コーディングスキルを高めたい方はご活用ください。

JavaScript

JavaScript

JavaScriptの学習に必須!コンソールの使い方と確認方法について解説

コンソールへの出力と確認は JavaScript でプログラミングを行う際の基本的な手法であり、 JavaScript を効率よく学ぶための最初のステップです。 この記事では、 JavaScript を初めて学ぶ方向けに JavaScript コードの実装方法や実行されるタイミングについてと、コンソールへの使い方について解説します。
JavaScript

【入門】JavaScriptとは?本質を理解して効率よく学ぼう

この記事では、 JavaScript を効率よく学ぶための知識として JavaScript の特徴や利用シーン、学習を進めるうえで気を付けるべきポイントについて解説します。JavaScript のプログラミング言語としての特徴を知ることで、コードの読解力の向上や、保守性を意識したコーディングを行う際の助けとなるでしょう。また、ウェブ制作における JavaScript の基本的な役割について知り、 JavaScript の活用シーンをイメージできるようになることも効率の良い学習に貢献します。
チュートリアル

「お問い合わせフォームを作ってみよう」チュートリアルの概要

ウェブフォームを作ることはウェブ制作初心者の方にとって多くの学びを得る良い機会になります。このチュートリアルは、お問い合わせページを制作することでウェブ制作初心者の方にHTMLやCSS、JavaScriptの理解を深めてもらうことを目的としています。
チュートリアル

JavaScriptでバリデーションチェックを実装してみよう!【バリデーションチェック編(JavaScript)】

この記事では、これまでで作成したお問い合わせフォームにJavaScriptでバリデーションチェックを実装していきます。【バリデーションチェック編(HTML)】で実装したHTMLのバリデーションチェックは不要なので、【CSSスタイリング編】終了時点でのindex.htmlを使用します。
チュートリアル

コードをリファクタリングしてコードの品質を高めよう!【お問い合わせフォームを作ってみよう:リファクタリング編】

この記事では、リファクタリングの基本的な考え方について学び、【バリデーションチェック編(JavaScript)】で作成したJavaScriptコードを保守性や再利用性を意識して改修します。
チュートリアル

モーダルウィンドウの実装!お問い合わせフォームの確認画面を作ってみよう【お問い合わせフォームを作ってみよう:確認画面の実装編】

実際のお問い合わせフォームの制作では、送信する前に確認画面を表示させるといった実装が一般的です。この記事では、確認画面の必要性について学び、お問い合わせフォームの値を反映させた確認画面をモーダルウィンドウで実装します。
チュートリアル

モーダルウィンドウはアクセシビリティ対策が必須!ポイントを理解して対策してみよう【お問い合わせフォームを作ってみよう:アクセシビリティ対策編】

この記事では、モーダルウィンドウのアクセシビリティに関する課題と対策のポイントについて解説し、【確認画面の実装編】で制作したモーダルウィンドウの確認画面に対してアクセシビリティ対策を行っていきます。
チュートリアル

お問い合わせフォームを作ってみよう【完成コード】

この記事では「お問い合わせフォームを作ってみよう」チュートリアルの完成コードを記載しています。チュートリアルのレベル感を確認したい方や、手っ取り早くこのチュートリアルを終えたい方、コーディングに慣れるために写経したい方などはぜひご活用ください。
チュートリアル

ナビゲーションメニューを作ってみよう!プルダウンやトグルメニューの実装方法について解説!

ウェブサイトを制作するにあたって、ナビゲーションメニューはとても重要な要素です。この記事ではウェブ制作初心者の方向けに、レスポンシブに対応したナビゲーションメニューの作成を通じて、ウェブ制作やHTML/CSSの基本的なところを解説します。