Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
誰でもわかる HTML基礎&CSS基礎
Rating: 3.7 out of 5(44 ratings)
265 students

誰でもわかる HTML基礎&CSS基礎

Webアプリケーション開発の第一歩となるコースです。必須となるHTMLの基礎と、デザインレイアウトに必要なCSSの基礎を学ぶことができます。
Last updated 8/2025
Japanese

What you'll learn

  • HTMLを読めるようになる。
  • HTMLの文法に沿ったプログラムを組めるようになる。
  • オンライン・ショッピングなどのWebアプリケーションの動作概要が理解できるようになる。
  • Webアプリケーション開発に挑戦できるだけの知識を得られるようになる。
  • CSSを読めるようになる。
  • HTMLとCSSの関連性が理解できるようになる。
  • レイアウトや動的なボタン作成の知識を得られるようになる。

Course content

2 sections67 lectures10h 15m total length
  • HTML基礎 ー 参考用ファイル(ダウンロード)1:11
  • 開発環境のインストール8:09
  • 第1章 Webの概要11:16
    • 1.1 Webシステムの仕組み
    • 1.2 HTMLって何?
    • 1.3 WWWって何?
    • 1.4 HTTPって何?
    • 1.5 URLって何?
  • 第1章 章末問題3:30
  • 第2章 HTMLの環境設定8:16
    • 2.1 HTMLの開発環境
    • 2.2 HTMLの開発手順


  • 第2章 章末問題2:25
  • 第3章 HTMLの基礎知識18:26
    • 3.1 HTMLの基本文法
    • 3.2 HTMLの基本構造
    • 3.3 名前を表示しよう!
    • 3.4 プログラムを読みやすくしよう!


  • 第3章 章末問題4:10
  • 第4章 ページレイアウト関連タグ15:19
    • 4.1 見出しを設定しよう!
    • 4.2 段落を設定しよう!
    • 4.3 グループを設定しよう!
    • 4.4 水平線を設定しよう!
    • 4.5 改行を設定しよう!


  • 第4章 章末問題3:06
  • 第5章 フォント関連タグ10:27
    • 5.1 フォントを設定しよう!
    • 5.2 文字を強調しよう!
    • 5.3 文字を斜体にしよう!


  • 第5章 章末問題2:56
  • 第6章 リスト関連タグ13:06
    • 6.1 マーク付きリストを設定しよう!
    • 6.2 番号順リストを設定しよう!
    • 6.3 定義順リストを設定しよう!
  • 第6章 章末問題3:35
  • 第7章 表関連タグ24:30
    • 7.1 表を設定しよう!
    • 7.2 見出し付きの表を設定しよう!
    • 7.3 複数のセルを横に連結しよう!
    • 7.4 複数のセルを縦に連結しよう!
  • 第7章 章末問題3:18
  • 第8章 ハイパーリンク関連タグ17:55
    • 8.1 ハイパーリンクって何?
    • 8.2 絶対パスと相対パス
    • 8.3 他ページにリンクしよう!
    • 8.4 同じページ内の別の場所にリンクしよう!
    • 8.5 Eメールを送ろう!
  • 第8章 章末問題4:19
  • 第9章 イメージ関連タグ16:04
    • 9.1 画像ファイルって何?
    • 9.2 絶対パスと相対パス
    • 9.3 画像を表示しよう!
    • 9.4 画像の幅と高さを変更しよう!
    • 9.5 代替文字を設定しよう!
  • 第9章 章末問題3:49
  • 第10章 色の設定と特殊文字17:25
    • 10.1 背景色や文字色を指定しよう!
    • 10.2 特殊文字を表示しよう!
  • 第10章 章末問題2:36
  • 第11章 Webアプリケーション6:35
    • 11.1 Webアプリケーションって何?
    • 11.2 静的コンテンツと動的コンテンツ
    • 11.3 Webアプリケーションの環境設定
  • 第11章 章末問題2:11
  • 第12章 フォーム関連タグ(1)15:18
    • 12.1 フォーム送信の仕組み
    • 12.2 データの送信方法
    • 12.3 フォームの基本構成
  • 第12章 章末問題3:26
  • 第13章 フォーム関連タグ(2)-122:59
    • 13.1 入力データを送信しよう!


  • 第13章 フォーム関連タグ(2)-217:05
    • 13.2 選択データを送信しよう!(1)
  • 第13章 フォーム関連タグ(2)-317:14
    • 13.3 選択データを送信しよう!(2)
  • 第13章 章末問題3:42

Requirements

  • エディタ(TeraPad、メモ帳、Visual Studio Codeなど)
  • Webブラウザ(Internet Explorer、Firefox、Google Chromeなど)
  • XAMPP
  • 最低限HTMLにトライしたいという気持ちが必要です。
  • 最低限CSSにトライしたいという気持ちが必要です。
  • Windows PC(MACを使用しての解説はしておりません)

Description

「誰でもわかる HTML基礎」と「誰でもわかる CSS基礎」の2つのコースがセットになったお得な教材です。

●誰でもわかる HTML基礎

会社のホームページやオンライン・ショッピングなどは、Webブラウザで閲覧するシステムで、HTMLをベースとして構成されています。
この講座では主にホームページを作るためのHTMLの基礎を習得できます。

Webブラウザで表示されるものは、全てHTMLで構成されています。
HTMLで書かれたプログラムを、Webブラウザが解析し表示するという仕組みになっています。
HTMLを理解するとホームページを作成するだけでなく、JavaやPHPやJavaScriptなどの他言語と連携し、Webアプリケーションにも対応できるようになれます。
HTMLの知識を習得したい方。HTMLの基礎を習得したい方。将来Webアプリケーションを開発してみたい方。大きな目標への第一歩となるコースです!

コースの概要
HTMLの基本文法を習得できるコースです。

・Webの概要
・HTMLの環境設定
・HTMLの基礎知識
・主要タグ
・色の設定と特殊文字
・Webアプリケーション
・フォーム関連タグ
などを学習できます。


●誰でもわかる CSS基礎

会社のホームページやオンライン・ショッピングなどは、Webブラウザで閲覧するシステムで、HTMLをベースとして構成されています。
しかし、ホームページのデザインやレイアウトは、HTMLではなくCSSで設定されています。
この講座では、主にホームページのデザインやレイアウトを設定するための、CSSの基礎を習得できます。

Webブラウザで表示されるものは、全てHTMLで構成されていますが、デザインやレイアウトはCSSで行います。HTMLは文書作成に特化させ、CSSはデザインやレイアウトを担当し構成します。また、CSSを利用すると、HTML文書は同じでも使用するメディアによって、デザインやレイアウトを変えることもできます。CSSを理解すると、JavaScriptなどと連携し、Webアプリケーションにも対応できるようになれます。
CSSの知識を習得したい方。CSSの基礎を習得したい方。見栄えのいいホームページの作り方を習得したい方。大きな目標への第一歩となるコースです!

コースの概要
CSSの基礎を習得できるコースです。

・CSSの概要
・CSSの環境設定
・CSSの基礎文法
・セレクタ
・主要プロパティ
・CSSの応用
などを学習できます。

Who this course is for:

  • 将来の目標としてホームページやWebアプリケーションを作りたいと思っている方
  • システム開発の仕事に就きたいと思っている方
  • CSSの基礎を習得したい方。
  • 見栄えのいいホームページの作り方を習得したい方。
  • CSSを使用したシステム開発の仕事に就きたいと思っている方
  • スキルアップを計りたい方
  • 探求心のある方