chevron_left

挫折した人のための 初心者速習HTML/CSS基礎

PREMIUM

スライド資料

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

1 / 28

授業の概要

【html+cssを挫折した全ての人に贈るシリーズ 全5回】

このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。

第1回:初心者速習html+css【2カラムボックスモデル編】

初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のために、サイトの基礎工事の部分から学び、サイトの看板となるTOPページを仕上げます

この授業を受講すると、基礎的なWeb制作におけるhtml+CSSの基礎を学ぶ事ができます。ぜひ、パソコンを用意してご参加下さい!

■ 必要なもの■

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

■資料に記載されているURL

【スライド P14】
http://validator.w3.org/#validate_by_input

【スライド P19】
http://roadstohtml5.com/html5karuta/

【スライド P24】
https://code.google.com/p/html5shiv/

【スライド P25】
https://code.google.com/p/html5resetcss/downloads/list

【スライド P26】
https://www.google.com/fonts

【スライド P27】
https://github.com/Behomazn/schoo20140307html_css_Beginner1

授業で使用する教材

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

チャプター

play_arrow
自己紹介&アジェンダ
04:12
play_arrow
htmlとcssの簡単なお話
01:26
play_arrow
本をwebであらわすと?
03:40
play_arrow
webページの組み立て方 html編①
01:37
play_arrow
はさまないとどうなる
04:16
play_arrow
webページの組み立て方 html編②
01:45
play_arrow
webページの組み立て方 css編①
03:21
play_arrow
body内の組み立て方html編③
01:38
play_arrow
body内の組み立て方html編④
04:40
play_arrow
webページの組み立て方 css編②
07:43
play_arrow
早速書いてみよう!
03:20
play_arrow
セリフを挿入してみる
02:18
play_arrow
cssのリンク設定を書き込む
03:50
play_arrow
ブラウザで確認してみる
02:59
play_arrow
asideのcssに追加してみる
03:01
play_arrow
footerのcssをチェックしてみる
03:22
play_arrow
W3Cでコードのチェックをしてエラーをみる
03:17
play_arrow
header.txtの内容をコピー&ペーストする
03:12
play_arrow
articleのコンテンツを制作する
04:18
play_arrow
floatするナビの組み立て方
03:46
play_arrow
Q:先生の過去3回の授業と今シリーズの全5回の授業を電子書籍化に!
01:03
play_arrow
Q:タグ打ちをする時にsublimeやドリームウィーバーなどありますが、作っているwebサイトを見ながらするのに、他に便利なテキストエディタなど、ありますか?
02:34
play_arrow
Q:ブラウザ間の見え方の標準化のファイルは更新が多いそうですが、いちいちダウンロードしないと使えないものなんでしょうか?
01:23
play_arrow
Q:floatの時のoverflow:hiddenの件について
00:35
play_arrow
Q:ナビゲーションバーはnav中で、ulタグを書けばいいのですか?
02:50
play_arrow
Q:sublimeの使い方はどこで勉強すればいいですか。
03:38
play_arrow
課題発表