chevron_left

HTML・CSS基礎
PREMIUM
第2回

文字起こし

HTMLコーディング①

2022年8月5日 20min
HTMLコーディング① play_arrow おためし受講

スライド資料

会員登録して、全てのスライドを見よう

1 / 31

授業の概要

HTMLの基本構造について、Visual Studio上での実演を通しながら解説します。

※コードを用いた演習は「Visual Sutudio Code」を使用します。受講前にインストールをお願いします。ダウンロードページはコチラをご確認ください。
※サンプルコードとサンプル画像は事前に授業ページ上の「授業で使用する教材」からダウンロードをお願いします

■ 今回作成するデモサイト
https://kobayas.net/test/

※ユーザー名とパスワードは第一回の授業内で紹介しています。


■アジェンダ
１）HTMLの基本構造
２）マークアップの基本
３）headの中身を作る
４）bodyの構造を考える

 

※授業で使用するAdobe stockの画像は有料になります。
サンプルデータ内、「img」フォルダにグレーバックのサンプル画像素材をご利用いただくか、授業で利用している同じ画像を使用する場合は、以下のURLからダウンロードをお願いいたします。
 

【ファーストビュー】

https://stock.adobe.com/jp/images/tasty-chicken/134699923

【ハンバーグ講座イメージ】

https://stock.adobe.com/jp/images/%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%B0%E3%82%B9%E3%83%86%E3%83%BC%E3%82%AD/288626977

【肉じゃが講座イメージ】

https://stock.adobe.com/jp/images/%E8%82%89%E3%81%98%E3%82%83%E3%81%8C/145196926

【アイシングクッキー講座イメージ】

https://stock.adobe.com/jp/images/unicorn-sugar-cookies/318369125

【メリット1】

https://stock.adobe.com/jp/images/%E6%96%99%E7%90%86%E3%82%92%E3%81%99%E3%82%8B%E3%82%B7%E3%83%8B%E3%82%A2%E5%A5%B3%E6%80%A7%E3%81%AE%E6%89%8B%E5%85%83/130575964

【メリット2】

https://stock.adobe.com/jp/images/young-woman-reading-cookbook-in-the-kitchen-looking-for-recipe/101512684

【メリット３】

https://stock.adobe.com/jp/images/%E9%A3%9F%E4%BA%8B%E3%82%92%E3%81%99%E3%82%8B%E8%A6%AA%E5%AD%90/282034096

担当の先生／パーソナリティ

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
この授業の流れ
00:23
play_arrow
事前に準備するもの
01:42
play_arrow
１）HTMLの基本構造
03:01
play_arrow
２）マークアップの基本
02:56
play_arrow
　　実演：index_htmlデータの作り方
08:23
play_arrow
３）headの中身を作る
01:07
play_arrow
　　実演：head
02:22
play_arrow
４）bodyの構造を考える
04:38
play_arrow
　　header
03:45
play_arrow
　　main
05:53
play_arrow
５）まとめ