HTML-CSS入門講座

濱屋太郎

Top Page

講座概要

目次

本サイトについて

サイト概要

  • 本サイトは、Webサイトを作成するためのHTML・CSSの基礎知識について記述しています。
  • 対象となるHTMLとCSSは、HTML5・CSS3を対象にしてあります。
  • 記載されているタグやプロパティの分類や説明が厳密ではない部分がありますが分かり易さを優先しましたのでご了承ください。
  • >HTML5・CSS3には多くの規定がありますが本サイトでは、短期間でWebサイトを作成するための知識を習得するために主要機能を中心に記述してあります。本サイトに記述されていない機能については関連図書や関連サイトを参照してください。
  • 本サイトを作成するに当たって下記のサイトを参考にさせて頂きました。詳細な情報提供に感謝いたします。

    【参考サイト】

レッスン概要

各レッスンで学ぶことは、以下の通りです。

(1) Lesson-1
 HTML-CSSの勉強を始める前に
HTML、CSSの勉強を始める前に知っておきたい基本的な事項について説明します。
(2) Lesson-2
 HTMLでの記述を始めましょう
HTMLの記述方法と文法(タグの使用方法)について説明します。
(3) Lesson-3
 CSSでデザインを始める前に
CSSでのデザインを始める前に知っておきたい事項についいて説明します。
(4) Lesson-4
 CSSでレイアウトを作りましょう
CSSでページのレイアウトを作成する方法を指定します。
(5) Lesson-5
 CSSで文字飾りを付けましょう
CSSでのテキストへの文字飾り、フォント設定、リスト構造作成方法などを説明します。
(6) Lesson-6
 CSSで飾りを追加しましょう
CSSでのバックグランド設定、テーブル構造作成、疑似クラス、疑似要素などについて説明します。
(7) Lesson-7
 テーブルを活用しましょう
テーブルを活用するための機能とサンプルについて説明します。
(8) Lesson-8
 フレックスレイアウトを活用しましょう
フレックスレイアウトを活用するための機能とサンプルについて説明します。
(9) Lesson-9
 グリッドレイアウトを活用しましょう
グリッドレイアウトを活用するための機能とサンプルについて説明します。
(10) Lesson-10
 CSSアニメーションで動かしましょう
CSSアニメーションを活用するための機能とサンプルについて説明します。
(11) Appendix-A
 色見本(カラーネーム、カラーコード)
各種の色見本(カラーネーム、カラーコード)を掲載しています。

本サイトの記載内容

改版履歴

■ 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
  • 初版(限定公開)