理解のためのマルチメディア

CSSのbox modelの理解のため、各要素のborderを描画しています。

テキスト

更新途中です。最新版を参照してください。

Web情報システム(2018-10-10版) [約1.1MB]

補足

dist-archive.zip[約140MB] ツール

FirefoxPortableDev.zip

授業資料・課題

第1回授業内スライド
第1回～第2回課題
第1回～第2回授業内スライド
第3回授業内スライド
第4回第 7章演習問題
第5回第 8章演習問題スライド：Javascript
第6回第 9章演習問題
この先は予定
第7回新規HTMLファイルで第10章演習問題
第8回新規HTMLファイルで第11章演習問題
第9回授業内でこれまでの成果を発表してもらいます。[1人15分程度]

サンプル

サンプルページ

HTMLの書き方サンプル

表について table 1

表について table 2

CSSの例による説明

cssのbox modelについて

Javascript入門

時計とタイマー

Canvasへの描画

Random walk アニメーション

jQueryサンプル

jQuery入門 01

動画キャプチャ

動画キャプチャの応用

参考図書

理解のためのマルチメディア関連: Booklog mis-labo mmタグ
HTML: Booklog mis-labo HTMLタグ
Cascading style sheet: Booklog mis-labo cssタグ
JavaScript: Booklog mis-labo JavaScriptタグ

外部リソース

HTML

HTML5.2: W3Cによる、HTML5.2規格勧告(recommendation)です。(2017-12-14版)
HTML5.1 2nd edition: W3Cによる、HTML5.1規格勧告第2版(recommendation)です。(2017-10- 3版)
HTML5 A vocabulary and associated APIs for HTML and XHTML: W3Cによる、HTML5規格勧告(recommendation)です。(2014-10-28版)
XHTML 1.0 The Extensible HyperText Markup Language (Second Edition): W3Cによる、XHTML 1.0規格（勧告）です。
W3C Markup Validation Service: W3Cの提供するHTML/XHTMLのvalidationサービスサイトです
HTML5.JP: HTML5の解説サイト
HTML5, きちんと: HTML5の位置づけについてのスライドです。やや旧いですが、他のバージョンとの違いの概要を知りたい人に。
今からハジメるHTML5マークアップ: XHTML1.0までを知っている人向けのHTML5の違いを説明したスライドです。
HTML5とは何かを簡単にまとめてみた: XHTML1.0までを知っている人向けに、HTML5の特徴を簡単なサンプル付きでまとめたもの。入門向け。
Academic HTML: HTML4.0, XHTML1.1, css2.1 までのチュートリアル。正確な記述が心地よい。
ドットインストール: 動画による学習サイト。HTML, CSS, Javascriptも含まれる。

Webブラウザ

Mozilla Firefox Developer Edition, Portable: USBメモリなどに入れて、システムへのインストールを必要としないブラウザの開発者向け機能を搭載した版です。
Firefox portable edition: USBメモリなどに入れて、システムへのインストールを必要としないブラウザです。
HTML Validator: Firefox用のadd-onで、HTML妥当性検査を行います。
Can I use...: 新しめなHTML5/css3などの項目毎にどのブラウザが対応しているかの一覧表です。

Cascading Style Sheet

Normalize CSS: クロスブラウザ(Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+)で見映えを統一するためのベースとなるcssファイルを提供しています。
ドットインストール: 動画による学習サイト。HTML, CSS, Javascriptも含まれる。

Javascript

Javascriptの入門サイト。オンラインでインタラクティブな操作で学んでいける。登録しなくてもstep by stepで体験可能。

マンガでわかるJavaScriptプログラミング講座第2版

秀和システムより書籍版(ISBN: 978-4798027838)も出ていますが、ほぼ同内容で、最初の入門によいでしょう。

Web上のJavascriptの事実上の標準的ライブラリ。記述の簡略化を狙った機能を提供する。

HTML5, CSS, JavaScriptのコードコミュニティ。いくつかピックアップしてみます。

ドットインストール

動画による学習サイト。HTML, CSS, Javascriptも含まれる。

Web情報システムの理解

サイトの強み・弱みを可視化する、ヒートマップ9選: Javascriptによるイベント取得で利用者の動きを把握できます。

開発環境

Liveweave: Webブラウザ上で，HTML, CSS, Javascriptを直接試すことが出来る．

その他

The evolution of the web: GoggleがGoogle Chromeリリース3周年を記念して公開したウェブブラウザの変遷を示すインタラクティブなサイト。
Webラーニングプラザ: 独立行政法人科学技術振興機構が無料で提供するコース群があります。