ゼロから学ぶウェブ制作

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

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

チュートリアル

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

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

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

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

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

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

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

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

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

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

グリッドの基本!最小限のプロパティを使用した3カラムレイアウトの構築方法!【レスポンシブあり】

グリッドレイアウトを使用した構築は、とても強力で柔軟なレイアウトを実現することができます。この記事では、グリッドレイアウトの基本的な概念と使い方について、グリッドを使用した3カラムレイアウトの構築を例にして解説します
CSS

【初心者向け】ウェブサイトのテーマを作ってみよう!カスタムプロパティの使い方について解説!

はじめにCSSにはカスタムプロパティという便利なものがあります。カスタムプロパティを使用することで、プロパティに設定する値をウェブサイト全体で共通化することができ、コーディングの作業効率を向上させることができます。この記事では、CSSカスタ...
チュートリアル

【初心者向け】メインビジュアルの作り方!ポイントとレスポンシブ対応について解説!

ウェブサイトの最初に目に入る部分であるメインビジュアルは、ウェブサイトの魅力や目的を伝える重要な役割を果たします。この記事では、メインビジュアルのコーディングを実際に行い、メインビジュアルをコーディングする際のポイントやテクニックを紹介します。
基本知識

【入門】クラス名の付け方・付ける際のポイントについて解説!

ウェブ制作において、HTML要素のクラス属性に付与するクラス名をどのように定義するかはとても重要な課題です。この記事ではウェブ制作初心者の方向けに、クラス名の付け方について具体的な例や実践的なアドバイスを交えて解説します。
CSS

【初心者向け】フレックスボックスの基本とよくある使い方について詳しく解説!

フレックスボックスを使用したレイアウト構築は比較的簡単にレスポンシブデザインを実現できるため、ウェブ制作初心者の方には最適な手法です。この記事では、フレックスボックスの概要や仕組みについて解説し、よく使われるプロパティやレイアウトのパターンについてご紹介します。