WebデザインのためのHTML入門

  • このエントリーをはてなブックマークに追加
HTML入門 -文書構造を形作る-
第1回:2015年9月11日公開 01:00:00

HTML入門 -文書構造を形作る-

受講する

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

授業一覧
HTML入門 -文書構造を形作る-
2015年9月11日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

今回の授業では、HTMLの概要と、その基本的な書き方について学んでいきます。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

HTML入門 -文書構造を形作る-
2015年9月11日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

今回の授業では、HTMLの概要と、その基本的な書き方について学んでいきます。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

HTML入門 -入れ子で使うタグ-
2015年8月2日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

今回の授業では、リストタグやテーブルタグなど親子関係を持つタグとその書き方を学びます。インデントをきる事によって複雑なネスト構造も楽々理解していきましょう。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

HTML入門 -入れ子で使うタグ-
2015年8月2日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

今回の授業では、リストタグやテーブルタグなど親子関係を持つタグとその書き方を学びます。インデントをきる事によって複雑なネスト構造も楽々理解していきましょう。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

HTML入門 -属性と要素-
2015年8月11日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

HTMLタグの中には色々な属性名や属性値を含む事ができます。それらの用途と指定方法を学んでいきます。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

  • 自己紹介&アジェンダ
  • 01:46
  • 開始タグと終了タグ
  • 00:28
  • 開始タグと終了タグ: 終了タグのないタグ<br>
  • 01:26
  • 開始タグと終了タグ: 終了タグのないタグ<hr>
  • 02:52
  • 開始タグと終了タグ: 終了タグのないタグにcssは当たるのか?
  • 01:37
  • 属性と要素
  • 04:34
  • 【質問】imgタグ内のheight属性とwidth属性はHTML5で廃止されたか
  • 06:26
  • グローバル属性
  • 00:21
  • グローバル属性: 文字の流れる方向を決める dir
  • 02:56
  • グローバル属性: 実はどこでも使える lang
  • 01:06
  • グローバル属性: 実はどこでも使える title
  • 01:55
  • グローバル属性: tabindex
  • 02:45
  • グローバル属性: accesskey属性
  • 08:59
  • map要素の属性: img要素の中にリンクを指定
  • 00:57
  • map要素の属性: map要素とarea要素
  • 08:03
  • Q:Dreamweaverが禁じ手ってどういう意味でしょうか?
  • 01:16
  • Q:areaとhoverは一緒に使えますか?
  • 01:13
  • Q:hrで出てたsectionに見出しがありませんでしたが、そうなるとarticleの使い分けがよく分かりません。できれば具体例で教えていただけると大変ありがたいです。
  • 02:10
  • Q:スマホ用とパソコン用などデバイスによってそれぞれCSSを書き分けて 切り替える場合のHTMLの指定の仕方が知りたいです。
  • 01:48
  • Q:tabindexはどのようなときに使いますか?
  • 00:35
  • Q:langを使ったらなにができますでしょうか?
  • 01:13
  • Q:属性で、jaをja-jpとしているところもありますが、特にどちらでも変わりませんでしょうか?ja-jpが逆でしたらすいません。
  • 01:05
  • Q:bodyに書くtitleタグもSEOでは重要視されるのですか?
  • 01:26
  • Q:固定するサイトの場合、画像に属性ではなくCSSでwidthとheightを指定しても同じように崩れないでしょうか?それともCSSファイルを読み込む方が遅いので、属性に入れるべきなのでしょうか?
  • 01:20
  • Q:100ポイント?10ポイント?ヒットポイントでしょうか?
  • 00:39
  • お知らせ
HTML入門 -属性と要素-
2015年8月11日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

HTMLタグの中には色々な属性名や属性値を含む事ができます。それらの用途と指定方法を学んでいきます。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

  • 自己紹介&アジェンダ
  • 01:46
  • 開始タグと終了タグ
  • 00:28
  • 開始タグと終了タグ: 終了タグのないタグ<br>
  • 01:26
  • 開始タグと終了タグ: 終了タグのないタグ<hr>
  • 02:52
  • 開始タグと終了タグ: 終了タグのないタグにcssは当たるのか?
  • 01:37
  • 属性と要素
  • 04:34
  • 【質問】imgタグ内のheight属性とwidth属性はHTML5で廃止されたか
  • 06:26
  • グローバル属性
  • 00:21
  • グローバル属性: 文字の流れる方向を決める dir
  • 02:56
  • グローバル属性: 実はどこでも使える lang
  • 01:06
  • グローバル属性: 実はどこでも使える title
  • 01:55
  • グローバル属性: tabindex
  • 02:45
  • グローバル属性: accesskey属性
  • 08:59
  • map要素の属性: img要素の中にリンクを指定
  • 00:57
  • map要素の属性: map要素とarea要素
  • 08:03
  • Q:Dreamweaverが禁じ手ってどういう意味でしょうか?
  • 01:16
  • Q:areaとhoverは一緒に使えますか?
  • 01:13
  • Q:hrで出てたsectionに見出しがありませんでしたが、そうなるとarticleの使い分けがよく分かりません。できれば具体例で教えていただけると大変ありがたいです。
  • 02:10
  • Q:スマホ用とパソコン用などデバイスによってそれぞれCSSを書き分けて 切り替える場合のHTMLの指定の仕方が知りたいです。
  • 01:48
  • Q:tabindexはどのようなときに使いますか?
  • 00:35
  • Q:langを使ったらなにができますでしょうか?
  • 01:13
  • Q:属性で、jaをja-jpとしているところもありますが、特にどちらでも変わりませんでしょうか?ja-jpが逆でしたらすいません。
  • 01:05
  • Q:bodyに書くtitleタグもSEOでは重要視されるのですか?
  • 01:26
  • Q:固定するサイトの場合、画像に属性ではなくCSSでwidthとheightを指定しても同じように崩れないでしょうか?それともCSSファイルを読み込む方が遅いので、属性に入れるべきなのでしょうか?
  • 01:20
  • Q:100ポイント?10ポイント?ヒットポイントでしょうか?
  • 00:39
  • お知らせ
HTML入門 -アンカーリンクの指定法-
2015年8月15日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

HTMLはマークアップ言語であると同時にハイパーテキストです。ハイパーテキストとは、アンカーリンクによって、別のページや同一ページの別の場所に遷移する仕様の事です。今回の授業ではこのハイパーテキストの設定方法を学びます。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

  • 自己紹介&アジェンダ
  • 01:28
  • ハイパーテキストとは
  • 01:57
  • ハイパーテキストとは: href属性について
  • 01:26
  • ハイパーテキストとは: hrefに指定できるtarget属性について
  • 05:30
  • 相対パスと絶対パス: 相対パスについて
  • 02:12
  • 相対パスと絶対パス: 絶対パスについて
  • 03:53
  • 外部リンクとページ内リンク: 外部リンクについて
  • 00:40
  • 外部リンクとページ内リンク: ページ内リンクについて
  • 10:44
  • 【問い掛け】aタグに内包できるタグは何でしょうか?
  • 04:21
  • カテゴリーとコンテンツモデル
  • 02:29
  • カテゴリーとコンテンツモデル: W3Cのガイドページを見てみよう
  • 03:54
  • Q:HTML/CSSって、入門じゃない講義の予定はありますか?
  • 01:48
  • Q:google推奨のインデントは、2スペではなかったでしょうか?
  • 00:27
  • Q:内部リンクは、idの他、classも大丈夫ですか?
  • 00:38
  • Q:ページ内リンクの際にスティッキーヘッダーが遷移後のテキストと若干被ってしまう場合があるのですが、どうしたら良いでしょうか?
  • 01:19
  • Q:httpsのページは絶対パスにしますが、httpの場合、相対と絶対パスではどちらでも良いでしょうか?
  • 01:23
  • Q:aタグにブロック要素を入れた場合は、display:blockは必要でしょうか?
  • 01:24
  • Q:相対パスで階層が深いときの書き方を教えて頂きたいです。
  • 07:14
  • Q:相対パスがセキュリティで今後非推奨になってくると聞いたのですが、どうでしょうか?
  • 01:29
  • Q:headerやarticleやsectionの中にhを入れないといけないということですが。
HTML入門 -アンカーリンクの指定法-
2015年8月15日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

HTMLはマークアップ言語であると同時にハイパーテキストです。ハイパーテキストとは、アンカーリンクによって、別のページや同一ページの別の場所に遷移する仕様の事です。今回の授業ではこのハイパーテキストの設定方法を学びます。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

  • 自己紹介&アジェンダ
  • 01:28
  • ハイパーテキストとは
  • 01:57
  • ハイパーテキストとは: href属性について
  • 01:26
  • ハイパーテキストとは: hrefに指定できるtarget属性について
  • 05:30
  • 相対パスと絶対パス: 相対パスについて
  • 02:12
  • 相対パスと絶対パス: 絶対パスについて
  • 03:53
  • 外部リンクとページ内リンク: 外部リンクについて
  • 00:40
  • 外部リンクとページ内リンク: ページ内リンクについて
  • 10:44
  • 【問い掛け】aタグに内包できるタグは何でしょうか?
  • 04:21
  • カテゴリーとコンテンツモデル
  • 02:29
  • カテゴリーとコンテンツモデル: W3Cのガイドページを見てみよう
  • 03:54
  • Q:HTML/CSSって、入門じゃない講義の予定はありますか?
  • 01:48
  • Q:google推奨のインデントは、2スペではなかったでしょうか?
  • 00:27
  • Q:内部リンクは、idの他、classも大丈夫ですか?
  • 00:38
  • Q:ページ内リンクの際にスティッキーヘッダーが遷移後のテキストと若干被ってしまう場合があるのですが、どうしたら良いでしょうか?
  • 01:19
  • Q:httpsのページは絶対パスにしますが、httpの場合、相対と絶対パスではどちらでも良いでしょうか?
  • 01:23
  • Q:aタグにブロック要素を入れた場合は、display:blockは必要でしょうか?
  • 01:24
  • Q:相対パスで階層が深いときの書き方を教えて頂きたいです。
  • 07:14
  • Q:相対パスがセキュリティで今後非推奨になってくると聞いたのですが、どうでしょうか?
  • 01:29
  • Q:headerやarticleやsectionの中にhを入れないといけないということですが。
HTML入門 -headタグに記述する物-
2015年8月15日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

今回の授業では、headタグの中に書かれる様々なタグの書き方を学びます。HTMLのHeadタグは、機械室の様な存在です。UI(見た目)を作り上げるcssを添付したり、文字のエンコーディングを指定したり、SNSや検索エンジンに対して情報を提供したりします。bodyタグ内にWebページの本体を作ったらheadタグ内に指令を送り、htmlを稼働させましょう。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

HTML入門 -headタグに記述する物-
2015年8月15日公開
01:00:00

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。

今回の授業では、headタグの中に書かれる様々なタグの書き方を学びます。HTMLのHeadタグは、機械室の様な存在です。UI(見た目)を作り上げるcssを添付したり、文字のエンコーディングを指定したり、SNSや検索エンジンに対して情報を提供したりします。bodyタグ内にWebページの本体を作ったらheadタグ内に指令を送り、htmlを稼働させましょう。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

タグ
担当の先生
受講生代表
  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

  • 青島 莉子

    青島 莉子

    スクー放送部

  • 田原 彩香

    田原 彩香

    スクー放送部

  • 江川 みどり

    江川 みどり

    スクー放送部

この授業を受けたい(2101人)
その他 2021人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×