HTML-CSS 入門講座

HTML-CSS 入門講座

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

HTML-CSS 入門講座概要

目次

本サイトについて

サイト概要

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

お知らせ

  • 本サイトに追加したい内容が沢山あります。順次追加していきますのでご期待ください。
  • 以下の大きな変更点を記述してありますが変更点の詳細については、「改版履歴」を参照してください。
■ 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 サイトを作成するための情報としてご活用ください。また、お問い合わせフォームも追加しましたので誤字脱字や間違いなどを見つけた時に連絡頂けると幸いです。

本サイトの記載内容

目次

備忘録

改版履歴

■ 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
  • グリッドレイアウトの説明追加（L9）
  • レスポンシブ対応の改善を実施
  • その他の軽微な不具合を修正
■ 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/Lesson-5）
■ 2021年06月24日 V1.20
  • Web サイト開発フォルダ構成の説明追加（Lesson-1）
■ 2021年06月20日 V1.10
  • 文字コード、コードチェックの説明追加（Lesson-1）
  • フッタ表示を追加して一般公開（全体）
■ 2021年06月10日 V1.00
  • 初版（限定公開）

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