HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは！
今日も頑張ろう

HTML-CSS 入門講座概要

目次

本サイトについて

サイト概要

  • 本サイトは、HTML と CSS を使用してWebサイトを作成するための基礎知識について記述しています。
  • 本サイトは、以下の分類で記述してあります。
(1) レッスン（Lesson）
HTML、CSS、JavaScript、jQuery を習得するために文法と使用例などを説明しています。
(2) Webパーツ（Web Parts）
Web サイトの作成時に使う HTML・CSS と JavaScript や jQuery の部品サンプルを説明しています。
(3) 付録（Appendix）
Web サイトの作成時に知っておいた方が良い関連知識を説明しています。

WordPress のテーマ作成に関する勉強は、関連サイトである「WordPress テーマ作成入門」を参照してください。
WordPress テーマ作成入門

お知らせ

  • 本サイトに追加したい内容が沢山あります。順次追加していきますのでご期待ください。
  • 以下の大きな変更点を記述してありますが変更点の詳細については、「改版履歴」を参照してください。
■ 2026年04月09日
本サイトの付録に掲載していた「WordPress テーマ作成入門」を大幅に加筆し関連サイトとして独立させました。WordPress の勉強をする場合は「WordPress テーマ作成入門」を参照してください。また、フレックスレイアウトやグリッドレイアウトのチートシートを作成して公開しました。<
■ 2025年10月12日
HTML や CSS の構成見直しや記載内容の大幅な追加や充実を実施しました。また、最初に覚えてほしい事項に初心者マーク（初心者向け）を付与しました。
■ 2024年09月27日
HTML の要素の見直しを行い最新の状態にすると同時に説明の詳細化を行うために全面的に書き換えました。
■ 2024年05月18日
知恵袋（Tips）の記載寮が多くなったので項目単位にページに分割をしました。また、知恵袋の三角形や正方形を作成する説明に新しい手法を追記しました。
■ 2024年04月21日
HTML/CSS を具体的に練習するのテンプレートやサンプルコード（float/position/display/list/疑似クラス/疑似要素）を掲載しました。
■ 2024年01月22日
JavaScript/jQuery の説明を 3つの Lesson に分割し説明内容の具体化・詳細化をしました。
■ 2023年09月23日
CSS だけで作成する紙吹雪のパーティクルを追加しました。
■ 2023年08月27日
メニューのレイアウトを変更（PC の場合に画面上部固定）しました。また、テーブルレイアウトの説明追加や jQuery のエフェクト関連サンプルを追加しました。
■ 2023年05月07日
写真ギャラリーを作成するためのデザイン例と作成方法や画像のマスキング方法の説明を追加しました。また、Web パーツの素材を追加しました。
■ 2023年04月25日
Windows や Mac で Web サイト（ページ）を開発するためのツールの説明を追加しました。また、一部の Web パーツのサンプル表示を CPU 負荷を考慮してスクリーンショット画像に変更しました。
■ 2023年01月11日
Web パーツにパーティクル関連（3D 空間に粒子を発生させ粒子に様々な形状や効果を割り当てる技術）の Web パーツを追加しました。
■ 2022年8月7日
全体的に具体的説明の追記を行うと同時に Web パーツ（スライダー、リスト、時計、フォームなど）を追加しました。
■ 2022年6月2日
WordPress のテーマ作成の説明にシンプルなテーマや大学ノート風テーマの作成の説明を追加しました。
■ 2022年5月20日
全体的に具体的説明の追記を行うと同時に Web パーツ（Web Parts）のカテゴリ見直しと作りためてあった新しいパーツを追加しました。
■ 2022年2月27日
WordPress のオリジナルテーマやテーマのカスタマイズ・子テーマの作成方法を説明するページを追加しました。
■ 2022年2月6日
単語を調べやすくするために索引ページの追加と Web パーツを検索しやすくするための Web パーツ一覧を追加しました。
■ 2022年1月29日
レスポンシブ Web デザイン（RWD）に対応するための説明と JavaScript / jQuery の説明ページを追加しました。
■ 2021年11月30日
Web サイト作成時に使用可能な Web パーツの説明を追加しました。まだまだ、追加したい Web パーツがありますので順次追加していきます。完成度の高い Web サイトを作成するための情報としてご活用ください。また、お問い合わせフォームも追加しましたので誤字脱字や間違いなどを見つけた時に連絡頂けると幸いです。
■ 2021年08月29日
必要事項を一通り記述しました。ただ、まだまだ記述したい項目があります。追加の事項を順次追加していきますのでご期待ください。
■ 2021年06月10日
初版の公開をしました。色々と記述したい項目があります。不足している記述項目を順次追加していきますのでご期待ください。

本サイトの記載内容

目次

備忘録

改版履歴

■ 2026年04月09日 V4.90
  • Appendix にあった WordPress テーマ作成入門に大幅な加筆を行い関連サイト「WordPress テーマ作成入門」として独立させました。
  • 特殊文字のコード表を作成（Appendix-4）
  • フレックスレイアウトのチートシートを作成（Lesson-9）
  • グリッドレイアウトのチートシートを作成（Lesson-10）
  • その他の軽微な改善を実施
■ 2025年10月12日 V4.80
  • HTML の説明を記述していた Lesson-2 が大きくなったので Lesson-2 と Lesson-3 に分割
  • 上記の変更により章名（旧）Lesson-3～ を（新）Lesson-4～ に変更（以降は新章名で記述）
  • 最初に覚えてほしい事項に初心者マーク（初心者向け）を付与（Lesson-2～）
  • HTML 要素説明に使用例を充実（Lesson-2～3）
  • 属性セレクター、セレクターの列挙、入れ子セレクターの記述方法を追加（Lesson-4）
  • 画面の幅や高さの割合の単位である vw/vh の変動単位の説明を追加（Lesson-4）
  • 画面の幅や高さの大きい方や小さい方の値をとる単位（vmin/vmax）の説明を追加（Lesson-4）
  • 角度の単位（deg, turn）の説明を追加（Lesson-4）
  • 円錐グラデーションと各グラデーションの反復の説明を追加（Lesson-4）
  • 非置換インライン要素と置換インライン要素の説明を追加（Lesson-4）
  • CSS プロパティ説明で分類の見直しと説明するプロパティを大幅に追加（Lesson-4～11）
  • CSS プロパティ説明で使用例を充実（Lesson-4～11）
  • CSS のプロパティに公式定義の初期値・適用先・継承の説明を追加（Lesson-5～11）
  • その他の大幅な改善を実施（大幅な追加と変更を実施）
■ 2025年02月09日 V4.72
  • address 要素、グラデーション指定などの軽微な改善を実施
■ 2024年11月11日 V4.71
  • Web パーツなどの軽微な改善を実施
■ 2024年09月27日 V4.70
  • HTML の要素の見直しを行い最新の状態に更新（説明する要素を大幅に追加）（Lesson-2）
  • HTML の要素説明を詳細化・具体化するために全面的に書き換えを実施。（Lesson-2）
  • その他の軽微な改善を実施
■ 2024年05月18日 V4.60
  • 知恵袋の記載量が多くなったので項目単位にページに分割（Appendix-3）
  • 知恵袋の margin プロパティの注意事項にマイナスマージンや横方向配置の方法を追記（Appendix-3）
  • 知恵袋の三角形や正方形を作成する方法に aspect-ratio プロパティの使用例を追記（Appendix-3）
  • その他の軽微な改善を実施
■ 2024年04月21日 V4.50
  • HTML/CSS 記述するためのテンプレートを掲載（Lesson-2）
  • CSS の使用法を練習するサンプルコード（float/position/display）を掲載（Lesson-4）
  • CSS の使用法を練習するサンプルコード（list）を掲載（Lesson-5）
  • CSS の使用法を練習するサンプルコード（疑似クラス/疑似要素）を掲載（Lesson-6）
  • その他の軽微な改善を実施
■ 2024年02月07日 V4.40
  • JavaScript のじゃんけんアプリケーションのサンプルを修正（Lesson-12）
  • HTML/CSS/JavaScript/WordPress の参考オンラインドキュメントを掲載（Lesson-0/-1/-3/-12、Appendix-4）
  • その他の軽微な改善を実施
■ 2024年01月22日 V4.30
  • JavaScript / jQuery の説明を3つに分割し説明の具体化・詳細化を実施（Lesson-12 → Lesson-12/-13/-14）
  • HTML マークアップの練習の記述内容の詳細化を実施（Lesson-2）
  • その他の軽微な改善を実施
■ 2023年09月23日 V4.20
  • メニューのドロップダウンメニュー表示時の非表示制御方法を変更（全ページ）
  • img 要素の説明に画像の幅と高さの説明を追加（Lesson-2）
  • マークアップサンプル（山田太郎の自己紹介）の img タグの記述方法を変更（Lesson-2）
  • position プロパティの説明誤りを訂正（Lesson-4）
  • ドロップダウンメニューの非表示制御方法を変更（WebParts-5）
  • CSS だけで作成する紙吹雪のパーティクルを追加（WebParts-12）
  • その他の軽微な改善を実施
■ 2023年08月27日 V4.10
  • メニューのレイアウトを変更（PC の場合に画面上部固定）（全ページ）
  • リセット CSS の見直しを実施（Lesson-3）
  • display: table 関連プロパティを使用したテーブル定義の説明を追加（Lesson-7）
  • vertical-align プロパティの説明を追加（Lesson-4/-7）
  • table-layout プロパティの説明を追加（Lesson-7）
  • jQuery のエフェクト関係のサンプルを追加（Lesson-12）
  • その他の軽微な改善を実施
■ 2023年05月07日 V4.00
  • 写真ギャラリーを作成するためのデザイン例と作成方法の説明を追加（Appendix-3）
  • 画像のマスキング方法の説明を追加（Appendix-3）
  • Web パーツにスクロール時の画像ページやテキストページの効果表示の作成方法を追加（WebPart-4）
  • Web パーツに通常メニューとハンバーガーメニューの複合メニューの作成方法を追加（WebPart-5）
  • Web パーツにボタンや画像へのオンマウス時の光効果の作成方法を追加（WebPart-10）
  • Web パーツに Google Fonts の Noto Sans Japanese の使用法を追加（WebPart-11）
  • Web パーツのパーティクルに散る桜と飛ぶほたるの生成方法を追加（WebPart-12）
  • その他の軽微な改善を実施
■ 2023年04月25日 V3.90
  • Windows や Mac で Web サイト（ページ）を開発するためのツールの説明を追加（Appendix-5）
  • 一部の Web パーツのサンプル表示を CPU 負荷を考慮してスクリーンショット画像に変更（WebPart-0/-12）
  • その他の軽微な改善を実施
■ 2023年02月11日 V3.80
  • JavaScript、jQuery、PHP で作成したじゃんけんアプリケーションを掲載（Lesson-12）
  • 端末やブラウザ情報の取得方法を掲載（Appendix-3）
  • CSS での三角形の作成方法を掲載（Appendix-3）
  • CSS でのレスポンシブ対応の正方形の作成方法を掲載（Appendix-3）
  • 絞り込み検索結果を JavaScript で動的に作成するフォームを追加（WebParts-13）
  • その他の軽微な改善を実施
■ 2023年01月11日 V3.70
  • WebParts 内のスライダーの分類を再整理（WebParts-1）
  • WebParts にパーティクルを追加（WebParts-12）
  • 上記の追加により「WebParts その他」の章番号を P13 に変更（WebParts-13）
  • マークアップ練習のコンテンツと説明を追加（Lesson-2）
  • object-fit、object-position の説明を追加（Lesson-4）
  • clear プロパティの具体的な説明を追加（Lesson-4）
  • その他の軽微な改善を実施
■ 2022年08月07日 V3.60
  • Webパーツを追加（スライダー、リスト、時計、フォームなど）（WebParts-1/-8/-12）
  • word-wrap プロパティ、word-break プロパティの説明を追加（Lesson-5）
  • 具体的説明の追記（詳細説明の追加）を実施（全ページ）
  • その他の軽微な改善を実施
■ 2022年06月18日 V3.51
  • コンテンツ・モデルの説明を追加（Lesson-2）
  • その他の軽微な改善を実施
■ 2022年06月02日 V3.50
  • WordPress テーマ作成にシンプルテーマの説明追加（Appendix-4）
  • WordPress テーマ作成に大学ノート風テーマの説明追加（Appendix-4）
  • その他の軽微な改善を実施
■ 2022年05月20日 V3.40
  • 具体的説明の追記（詳細説明の追加）を実施（全ページ）
  • Web パーツのカテゴリの見直しを実施（WebParts 全体）
  • 新しい Web パーツの追加（WebParts 全体）
  • その他の軽微な改善を実施
■ 2022年02月27日 V3.30
  • WordPress テーマ作成、カスタマイズ方法の説明追加（Appendix-4）
  • その他の軽微な改善を実施
■ 2022年02月06日 V3.20
  • 索引の追加（索引ページ）
  • Web パーツにサンプル一覧の追加（WebParts-0）
  • その他の軽微な改善を実施
■ 2022年01月29日 V3.10
  • レスポンシブ Web デザイン（RWD）の説明追加（Lesson-11）
  • JavaScript と jQuery の説明追加（Lesson-12）
  • その他の軽微な改善を、たくさん実施（結構、疲れました）
■ 2022年01月09日 V3.01
  • 誤りの訂正および軽微な修正を実施（Lesson-2/-3/-4/-8/-9/-10/WebParts-4/-7）
■ 2021年11月30日 V3.00
  • Web パーツページを追加（Web パーツページ）
  • 付録ページの独立化と画像ファイル形式、知恵袋ページを追加（付録ページ）
  • お問い合わせページを追加（お問い合わせページ）
  • コンテンツ追加に伴いメニュー体系の見直しを実施（全ページ）
  • 章番号体系の見直しを実施（全ページ）
  • トップに戻るボタンをロケット型式に変更（全ページ）
  • コンテンツマネージメントシステムに対応（内部変更）（全ページ）
  • 目次作成の自動化機能を追加（内部変更）（全ページ）
  • その他の軽微な改善を実施
■ 2021年09月24日 V2.30
  • iframe コンテンツの縦方向幅の調整機能を追加（内部変更）（全ページ）
  • iframe コンテンツのリロード機能を追加（内部変更）（全ページ）
  • オンマウスをスマホのタップにする処理を追加（内部変更）（全ページ）
  • その他の軽微な改善を実施
■ 2021年09月22日 V2.20
  • 第 4 レベルの見出しの体裁を変更（全ページ）
  • 上記に伴いペーススタイルの見直しを実施（全ページ）
  • その他の軽微な改善を実施
■ 2021年09月20日 V2.10
  • ソースコード掲載をハイライト型式に変更（全ページ）
  • サンプルソースコードを折り畳み状態に変更（掲載ページ）
  • ソースコード変換ツールを追加（Lesson-2）
  • 細かな章タイトルを ■ から(数字)に変更（全ページ）
  • その他の軽微な改善を実施
■ 2021年08月29日 V2.00
  • 改版情報を追加（トップ（目次）ページ）
  • 目次ボックスの背景色を指定（全ページ）
  • 説明リストのレイアウトを変更（Lesson-8/-9/-10）
  • ソースコードなどに強調部分の記載（色指定）を追加（全ページ）
  • article タグ部と section タグ部の分離を実施（内部変更）（全ページ）
  • 目次作成用のコメントを追加（内部変更）（全ページ）
  • その他の軽微な改善を実施（綴りミスの修正など）
■ 2021年08月22日 V1.90
  • フォントファミリーを指定（スマホのゴシック表示）（全ページ）
  • その他の軽微な改善を実施（iframe の縦サイズなど）
■ 2021年07月26日 V1.80
  • グリッドレイアウトの説明追加（Lesson-9）
  • レスポンシブ対応の改善を実施（全ページ）
  • その他の軽微な不具合を修正
■ 2021年07月22日 V1.70
  • CSS アニメーションの説明追加（Lesson-10）
  • メニュー表示を 6 項目/行に変更
  • レスポンシブ対応を実施
  • （Lesson-9）を（工事中）として追加
  • その他の軽微な不具合を修正
■ 2021年07月13日 V1.60
  • フレックスレイアウト活用の説明追加（Lesson-8）
  • 濱屋太郎のアニメーションロゴに回転表示を追加（全ページ）
■ 2021年07月11日 V1.50
  • CSS を共通部と個別部（各 HTML）に分割（内部変更）
  • 濱屋太郎のアニメーションロゴ追加（池冨さんに感謝）
■ 2021年07月04日 V1.40
  • 目次および目次からのリンクを追加（全ページ）
■ 2021年06月27日 V1.30
  • テーブル活用の説明追加（Lesson-7）
  • ul/ol/dl の表示サンプル追加（Lesson-2/-5）
■ 2021年06月24日 V1.20
  • Web サイト開発フォルダ構成の説明追加（Lesson-1）
■ 2021年06月20日 V1.10
  • 文字コード、コードチェックの説明追加（Lesson-1）
  • フッタ表示を追加して一般公開（全ページ）
■ 2021年06月10日 V1.00
  • 初版（限定公開）

ロケット本体
PAGE
TOP
ロケット炎