ゼロから学ぶウェブ制作

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

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

CSS

チュートリアル

【AI】CursorのAI機能を使ってTODOアプリを作ってみます

この記事では、なるべく既存の知識で判断せずにCursorのAIアシスタント機能を積極的に利用して、簡単なTodoアプリを作成してみます。Cursorでの開発体験を得て、Cursorが普及した場合に「エンジニアがAIに仕事を奪われる可能性があるか」について考えてみます。
JavaScript

【初学者向け】HTML要素を操作する基本的な方法について解説!

DOMはウェブページの構造を表現するためのツリー構造で、HTML要素を親子関係で結びつけます。JavaScriptを使用してDOMを操作することで、テキストの変更や、要素の追加・削除、スタイルの変更など、ウェブページの外観と動作を制御することができます。
チュートリアル

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

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

ウェブフォームの基本!HTMLでお問い合わせページを作ろう【お問い合わせフォームを作ってみよう:HTMLマークアップ編】

この記事では、お問い合わせフォームでよく使用されるHTML要素を使用してお問い合わせページのマークアップを行い、具体的なフォーム部品の使用方法について学びます。
チュートリアル

フォーム部品のスタイリングは難しい?基本的な方法やポイントについて解説!【お問い合わせフォームを作ってみよう:CSSスタイリング編】

この記事では、「お問い合わせフォームを作ってみよう【HTMLマークアップ編】」で作成したお問い合わせページをCSSでスタイリングし、フォーム部品をスタイリングするための基本的な方法やポイントについて学びます。
チュートリアル

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

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

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

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

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

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

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

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

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

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