ゼロから学ぶウェブ制作

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

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

入門

CSS

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

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

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

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

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

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

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

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

【入門】メディアクエリの使い方とモバイルファーストな実装方法について解説!

メディアクエリは異なる画面サイズや解像度に対応するための重要なテクニックであり、ウェブサイトのレスポンシブ化においては一般的な手法です。この記事では、メディアクエリの基本的な使い方やブレイクポイントの設定、モバイルファーストなアプローチについて解説します。
チュートリアル

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

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

【入門】ブロック要素とインライン要素について解説!

CSSでは、HTMLで定義された要素をブロック要素とインライン要素の2種類に分類します。この記事では、ウェブ制作初心者の方向けにブロック要素とインライン要素それぞれの特徴や、該当するHTML要素について解説します。
CSS

【入門】疑似クラス・擬似要素とは?基本的な使い方や注意点について解説!

CSSには一特定の状態や位置の要素に指定する擬似クラスや、HTMLを記述しなくても要素を追加できる疑似要素という概念があります。この記事では、ウェブ制作初心者の方向けに擬似クラス・疑似要素の概要と基本的な使い方について解説します。
CSS

【入門】CSSの基本的なプロパティについて解説!:ボックスモデル編

この記事では、ウェブ制作初心者の方に向けてCSSの基本であるボックスモデルの説明と、width, height, border, margin, paddingなどのボックスモデルに関係する基本的なプロパティ、要素の大きさはどのように計算されるかについて解説します。
CSS

【入門】テキストのスタイルでよく使うプロパティを紹介!

この記事では、CSSの基本知識として、テキストのスタイリングでよく使われるプロパティについての使い方や注意点、便利な使い方などについて解説します。「こうしたい時はどうするんだっけ?」となった時に調べられるよう、何が出来るかに重点を置くと良いでしょう。