おためし受講中

挫折した人のための、初心者速習html+css【2カラムボックスモデル編】

【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

学生代表

  • 未定

    未定

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

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