【最新モダンHTML / CSS】 実践開発コース　逆引きINDEX付き、コピぺ利用可能　最新スキルリスキリングコース

Course Curriculum

Chapter 1: Grid レイアウト

Lecture 1: このコースで学習すること

Lecture 2: 学習の進め方

Lecture 3: HTMLのコード

Lecture 4: CSSの設定(1)

Lecture 5: CSSの設定(2)

Lecture 6: CSSの設定(3)

Lecture 7: Step02のHTML

Lecture 8: Step02のCSS(1)

Lecture 9: Step02のCSS(2)

Lecture 10: Step02のCSS(3)

Lecture 11: 少し進んだグリッドレイアウト

Lecture 12: Step03のHTML

Lecture 13: レイアウトの簡略化

Chapter 2: iPhoneサイズのOwlページ（１）

Lecture 1: このセクションで学習すること

Lecture 2: header要素のHTML

Lecture 3: header要素のCSS

Lecture 4: WEBフォントの使用

Lecture 5: headerレイアウトの完成

Lecture 6: ハンバーガーメニューのHTML

Lecture 7: ハンバーガーメニューのCSS(1)

Lecture 8: ハンバーガーメニューのCSS(2)

Lecture 9: ハンバーガーメニューのCSS(3)

Lecture 10: メニュー内容の設定

Lecture 11: ハンバーガーメニューの完成

Chapter 3: iPhoneサイズのOwlページ（２）

Lecture 1: main部分のHTML

Lecture 2: main部分のCSS(1)

Lecture 3: main部分のCSS(2)

Lecture 4: SliderのHTML

Lecture 5: SliderのCSS

Lecture 6: SNS

Lecture 7: footer(1)

Lecture 8: footer(2)

Lecture 9: 擬似要�

Lecture 10: 擬似クラス

Lecture 11: 隣接、間接、直下セレクタ

Lecture 12: Positionプロパティ

Chapter 4: Responsiv WEB Design

Lecture 1: Responsiv WEB Designとは

Lecture 2: Media Queriesとは

Lecture 3: メディアクエリの役割

Lecture 4: メディアクエリのhtml

Lecture 5: iPhone サイズのCSS

Lecture 6: iPadサイズのメディアクエリ

Lecture 7: PCサイズのメディアクエリ

Lecture 8: Fluid Gridのhtml

Lecture 9: Fluid GridのCSS (1)

Lecture 10: Fluid GridのCSS (2)

Lecture 11: Flluid Imageのhtml

Lecture 12: Flluid ImageのCSS

Lecture 13: 背景画像のFlluid Image

Chapter 5: iPadサイズのOwlページ

Lecture 1: このセクションで学習すること

Lecture 2: Break Pointの設定

Lecture 3: mainの設定(1)

Lecture 4: mainの設定(2)

Lecture 5: SNS, footerの設定

Lecture 6: PCサイズの設定(1)

Lecture 7: PCサイズの設定(2)

Lecture 8: PCサイズの設定(3)

Lecture 9: 仕上げ

Chapter 6: iPhoneサイズのindexページ（１）

Lecture 1: このセクションで学習すること

Lecture 2: 準備

Lecture 3: 動画の挿入と設定

Lecture 4: announceの設定

Lecture 5: ギャラリーのHTML

Lecture 6: ギャラリーのレイアウト設定

Lecture 7: ギャラリーの効果の概要

Lecture 8: ギャラリー効果のCSS設定 (1)

Lecture 9: ギャラリー効果のCSS設定 (2)

Lecture 10: ギャラリー効果のCSS設定 (3)

Lecture 11: ギャラリーのアンカータグ設定

Chapter 7: iPhoneサイズのindexページ（２）

Lecture 1: 観察ボタンの配置

Lecture 2: 観察ボタン効果のCSS設定 (1)

Lecture 3: 観察ボタン効果のCSS設定 (2)

Lecture 4: 観察会案内のhtml

Lecture 5: 観察会案内のCSS (1)

Lecture 6: 観察会案内のCSS (2)

Lecture 7: 生態部分のhtml

Lecture 8: 生態部分のCSS

Lecture 9: マウスオンで画像拡大の効果

Lecture 10: 季節の野鳥部分のhtml

Lecture 11: 季節の野鳥部分のCSS

Lecture 12: 季節の野鳥部分の効果

Lecture 13: 四季の野鳥html

Lecture 14: 四季の野鳥CSS

Lecture 15: リンクの設定と修正 (1)

Lecture 16: リンクの設定と修正 (2)

Chapter 8: iPad、PCサイズのindex.html

Lecture 1: headerのレスポンシブ化

Lecture 2: Galleryのレスポンシブ化

Lecture 3: indexページの修正

Lecture 4: サイト全体の仕上げ

Lecture 5: htmlのインクルード化(1)

Lecture 6: htmlのインクルード化(2)

Lecture 7: htmlのインクルード化(3)