chevron_left

”スラスラわかる”未経験からのHTMLとCSS

PREMIUM
第1回

”スラスラわかる”未経験からのHTMLとCSS

2013年11月16日 120min

スライド資料

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

1 / 9

授業の概要

未経験者向けHTMLとCSSの授業です。基礎的なHTMLタグ、レイアウトを調整するためのCSSを使用して、受講生の皆さんと一緒に作業をしながらWebページを組み立てる実習授業です。架空のカフェ「KUJIRA cafe」のサイト2ページ分を作成します。

ページの作成に使用する写真などは用意しているので、あとはHTMLとCSSを書いてみるだけ。書いて作って、結果を確認したら、「なるほどこういうものなのか」と、おおよそのことは理解できるようになるでしょう。

「はじめてみたいけどなにから手を付けたらよいかわからない」という方は、是非参加してみてください。

 

この授業の実習内容


HTML
・すべてのページで使われるHTMLを記述する
・見出し、段落、リストを記述する
・リンクを張る
・画像を挿入する

 

CSS
・背景色、文字色を指定する
・背景に画像を指定する
・レイアウトを調整する
など

※実習ではこちらの素材を利用しますので、事前にダウンロードしておいてください
http://goo.gl/VJyPAa

※本授業は、書籍『スラスラわかるHTML&CSSのきほん』(狩野祐東著/SBクリエイティブ刊)をベースに構成しています。

授業で使用する教材

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

チャプター

play_arrow
自己紹介&アジェンダ
01:06
play_arrow
実習前の準備
06:45
play_arrow
HTMLとはどういうものか
04:17
play_arrow
HTML実習 ドックタイプ宣言 〜
13:35
play_arrow
HTML実習 ナビゲーションメニュー 〜
07:15
play_arrow
HTML実習 画像挿入 〜
09:00
play_arrow
HTML実習 CSSを適応させる為のタグ 〜
17:35
play_arrow
受講生からの質問
03:53
play_arrow
CSSの記述前に行う事
02:07
play_arrow
CSS実習 スタイルシート 〜
14:02
play_arrow
CSS実習 メニューの背景画像を指定する 〜
19:46
play_arrow
Q:各サイズを指定している「○px」というのは、感覚で掴むものでしょうか?
01:54
play_arrow
Q:CSSが反応しないのですが、どうすれば良いでしょうか?
02:22
play_arrow
Q:自分のタグの間違いを訂正してくれるサイトはありますか?
02:56
play_arrow
Q:回り込み解除には、clear:both; は使わない方が良いのでしょうか?
01:14
play_arrow
Q:CSSの他にSassなども勉強した方が良いのでしょうか?
01:53
play_arrow
Q:htm5からの新しいタグ、navやsectionなどは使えるものから使っていってもいいのでしょうか?
01:15
play_arrow
Q:#nav li { display:inlines; が効かないです。ブラウザが問題でしょうか?
00:50
play_arrow
Q:たとえばbody #nav {} でも大丈夫ですか?
01:58
play_arrow
Q:先生のお勧めのエディタはありますか?
02:01
play_arrow
Q:<br /> この記述でも大丈夫ですか?
01:54
play_arrow
Q:独学でもwebデザイナーは目指せますか?
01:26
play_arrow
課題発表