chevron_left PCサイトコーディング

PCサイトコーディング

PREMIUM
第4回

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

2016年7月20日 60min

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

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
お知らせ