chevron_left

PCサイトコーディング
PREMIUM
第4回

PCサイトコーディング -下層ページのHTMLを書こう-

2016年7月20日 60min
PCサイトコーディング -下層ページのHTMLを書こう- play_arrow おためし受講

スライド資料

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

1 / 57

授業の概要

このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。

「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。しかしながら、基礎があやふやだと応用がききません。まずは基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。

第4回は下層ページのHTMLの書き方を学習します。適切なHTMLタグの使い方を覚えましょう。 

授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。

こんな人にオススメ

HTML、CSSの基本を学んだので実際にWebサイトを制作したいと考えているWebデザイナー

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

授業で使用する教材

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

チャプター

play_arrow
自己紹介
01:23
play_arrow
今日の授業について
00:21
play_arrow
授業のアジェンダ
01:35
play_arrow
サンプルデータの説明
01:12
play_arrow
ヘッダーとフッターのソースを流用する
03:37
play_arrow
2カラムレイアウトのHTML
00:35
play_arrow
問題#01 A→B→C→D→Eの順番でHTMLを書いてもま以外ではありませんが、情報の重要度を考慮したいです。どういう順番で書くのが良いでしょう。
02:21
play_arrow
答え#01
01:01
play_arrow
ヒトの視線の移動
00:36
play_arrow
配置はCSSで指定
03:03
play_arrow
article, sectionの使い方
00:43
play_arrow
articleとsection
02:07
play_arrow
aside
02:04
play_arrow
セマンティックWeb
06:33
play_arrow
要素の親子関係について
02:36
play_arrow
問題#02 ul,liの他に、親子関係（セットである必要）のあるHTMLタグやCSS使用例を挙げてみましょう。
05:50
play_arrow
答え#02
00:32
play_arrow
dl - 定義リスト
00:58
play_arrow
ol - 順序リスト
00:44
play_arrow
position
01:45
play_arrow
サイドバーのナビゲーション
03:54
play_arrow
おまけ話
06:32
play_arrow
まとめ
02:38
play_arrow
Q：mainタグは使用しないのでしょうか？
00:52
play_arrow
Q：デザイン上hタグがある章とない章がある場合はsection、div、sectionという感じになっても問題ないのですね。間だけdivはおかしいかと思ったのですがよいのですね。
02:11
play_arrow
Q：例えばFlexboxを使う時に一番大きな枠をdivとして使い、その入れ子としてarticleやsectionを使うとSEO的には問題ないでしょうか？
01:42
play_arrow
Q：clearfixを使う際、確かarticleなどHTML5で新しく出てきたタグには適用されなかったと思いますが、その際はdivを使う事になるでしょうか？
01:11
play_arrow
Q：sectionとarticle、figureとpの中のimgどちらかいつも迷います。 自己完結しているかしていないかの違いらしいですが、 どのように区別していますか？ 実務でもあまりこだわらなくてもよいのでしょうか？
01:06
play_arrow
Q：html5なのにタグを有効利用していないサイトを更新しています。どのように改善提案すべきでしょうか
02:25
play_arrow
お知らせ