講座カリキュラム
LECTURE
この講座で作るもの＆制作環境を整えよう
Web制作の基本講座、第1回。この講座で完成させるカフェサイトの紹介と、VS Codeのインストール・拡張機能の導入・フォルダ構成・画像素材のダウンロードまで、制作環境をゼロから整えます。
LECTURE
HTMLの基本 — Webページの"骨格"を知ろう
DOCTYPE宣言、html・head・bodyの3層構造、セマンティックHTMLなど、Webページの基礎となるHTMLの仕組みを丁寧に解説。café SOELの骨格をHTMLで組み立てます。
LECTURE
サイトのコンテンツをHTMLで組み立てよう
img要素、class属性、article要素、定義リストなど、実践的なHTMLの書き方を学びながら、café SOELのWebサイトのHTML構造を完成させます。
LECTURE
CSSの基本 — サイトに"見た目"を与えよう
CSSの基本構文、セレクタ、ボックスモデル、CSS変数を学び、café SOELのサイトに色・フォント・余白を与えます。ゼロからWebサイトを作ろう第4回。
LECTURE
レイアウトの組み方 — Flexboxでパーツを並べよう
CSS Flexboxの基本を学び、café SOELのヘッダー・コンセプト・アクセス・フッターを横並びレイアウトに。display: flex、justify-content、align-items、gap、flex: 1 を実践で習得します。
LECTURE
CSS Gridとレスポンシブデザイン — どんな画面でも美しく
CSS Gridでメニューカードとギャラリーを2列レイアウトに配置し、メディアクエリでタブレット・モバイル対応を実装。ハンバーガーメニューのHTMLとCSSも追加して、どんな画面サイズでも美しいサイトに仕上げます。
LECTURE
デザインの仕上げ — CSSで"ちゃんとした"サイトに
Google Fontsでタイポグラフィを整え、transitionと:hoverで気持ちのいい動きを加え、backdrop-filterでヘッダーをすりガラスに。細部を整えるだけで、サイトは一気に"ちゃんとした"印象になります。
LECTURE
SEOと構造化データ — 検索エンジンにも正しく伝えよう
meta description、OGP（Open Graph Protocol）、JSON-LD構造化データを追加して、検索エンジンとSNSにサイトの情報を正しく伝える方法を学びます。見た目は変わらなくても、サイトの"中身"は大きく変わります。
LECTURE
公開前の最終チェック — アクセシビリティとパフォーマンス
aria属性、alt見直し、loading="lazy"、HTMLバリデーション、Lighthouse、JPGからWebPへの変換まで。café SOELを"公開できる品質"に仕上げる最終チェック。
LECTURE
サイトを公開しよう — レンタルサーバーへのアップロード
café SOELのWebサイトをレンタルサーバーにアップロードして公開する手順を解説。サーバー・ドメイン・FTP・SSLの基礎知識から、FileZillaを使ったアップロード、公開後の確認まで。
LECTURE
CSSアニメーションで動きをつけよう
café SOELのWebサイトにCSSアニメーションを追加する番外編。@keyframesによるフェードイン、スクロール連動アニメーション、ホバー演出の強化、prefers-reduced-motionによるアクセシビリティ対応まで丁寧に解説します。
LECTURE
JavaScriptを少しだけ ― インタラクションを加えよう
完成したcafé SOELサイトにJavaScriptを追加し、ハンバーガーメニュー、ARIA更新、スクロール連動アニメーションを実装します。
LECTURE
デザインカスタマイズ集 — こうしたい時はこう書く
café SOELのサイトを自分らしくカスタマイズする方法を集めました。配色変更、フォント差し替え、ダークモード対応、レイアウトの組み替え、2ページ目の追加まで。