検索

次のセクション: 添加联系信息1825 回再生

5 秒后自动播放下一节
  もう一度見る

理想的なビデオ チュートリアル Web サイトのフロントエンド ページのビデオ チュートリアル

導入 >
コースウェア
章1htmlとxhtml

HTML構造

04分00秒

HTML 構文

09分48秒

HTMLタグ

17分13秒

HTML 属性

11分29秒

XHTML 構造

06分49秒

XHTML タイプ

05分08秒

DTD分析

06分13秒

名前空間

03分46秒
章2html5の紹介

HTML5 構文

13分02秒

HTML5要素

15分12秒

HTML5 属性

06分30秒

HTML5 グローバル属性

07分57秒

HTML5のその他の機能

11分05秒

HTML5 ドキュメント構造を理解する

11分02秒

HTML5要素の分類

記事の特定

05分10秒

セグメントの内容

デザインナビゲーション情報

05分50秒

設計支援情報

03分36秒

マイクロフォーマットの設計

発売日を追加

表題欄を追加する

01分58秒

グループタイトル

脚注ブロックを追加する

連絡先情報を追加する

設計概要

デザインスタイル

章3応用例

メールタイプのアプリケーション

03分45秒

URL型アプリケーション

02分46秒

数値型アプリケーション

レンジタイプの用途

02分32秒

日付チェッカー型アプリ

検索型アプリケーション

電話タイプのアプリケーション

カラータイプのアプリケーション

章4新しいコンテンツ

新しいオートコンプリート属性

新しいオートフォーカス属性

05分04秒

新しいフォーム属性

新しいフォームの上書きプロパティ

新しい高さと幅の属性

01分48秒

新しいリスト属性

新しい min、max、step 属性

新しい複数属性

新しいパターン属性

新しいプレースホルダー属性

新しい必須属性

新しいデータリスト要素

新しい keygen 要素

新しい出力要素

新しいオートコンプリート属性

00分58秒

新しい novalidate 属性

01分28秒
章5キャンバスの描画

Canvas 要素をページに追加する

02分33秒

Canvas がグラフィックを描画する仕組み

06分14秒

キャンバス座標を理解する

Canvas を使用しない場合

ブラウザがCanvasをサポートしていない場合

ブラウザのサポートを確認する

直線を引く

02分34秒

長方形を描く

円を描く

三角形を描く

03分08秒

クリアキャンバス

二次ベジェ曲線を描く

3次ベジェ曲線を描く

キャンバスの状態を保存および復元する

座標空間を移動する

座標空間を回転する

座標空間を回転する

ズームグラフィックス

行列変換

グラフィックの組み合わせ

04分55秒

クリッピングパス

さまざまな線スタイルを適用する

直線的なグラデーションを描く

放射状のグラデーションを描く

パターンを描く

グラフィックの透明度を設定する

影を作成する

フィラーテキストを描画する

アウトラインテキストを描画する

テキストの幅を測定する

Canvas に画像をインポートする

画像サイズを変更する

画像スライスの作成

07分04秒
章6オーディオとビデオ

JavaScript を使用してオーディオ形式のサポートを検出する

04分20秒

JavaScript を使用してビデオ形式のサポートを検出する

03分38秒

オーディオ要素を理解する

02分28秒

オーディオを再生する

05分22秒

ビデオ要素を理解する

01分12秒

動画を再生します

06分11秒

オーディオおよびビデオ関連のプロパティ

オーディオおよびビデオ関連のメソッド

08分58秒

オーディオおよびビデオ関連のメソッド

オーディオとビデオ関連のイベント

スクリプトで音楽再生を制御する

ビデオフレームを表示する

章7Webブラウザアプリケーション

ブラウザのサポートを確認する

06分32秒

データの設定と取得

データ漏洩を防ぐ

Web ストレージのその他の用途

02分25秒

Webストレージのイベント監視

03分37秒

例 1: Web ページのスキンのデザイン

例 2: localStorage データの追跡

05分48秒

例 3: デザインカウンター

包括的なアプリケーション: Web アプリケーション プロジェクトのリアルタイム追跡

08分56秒

Web SQLデータベースの使用

例 1: 単純なローカル データベースを作成する

05分56秒

例 2: ローカル データをバッチで保存する

包括的なアプリケーション: Web Storage と Web SQL の混合開発

実践的な戦闘 1: ホームページのキャッシュ

実践的な戦闘 2: コンテンツをオフラインで編集する

実践的な戦闘 3: オフライン追跡

ブラウザのサポートを確認する

Web ワーカーの作成

Web ワーカーとのコミュニケーション

Web Workers を使用した実践演習

章8マルチスレッドアプリケーション

マルチスレッドを使用してバックグラウンド操作を実装する

バックグラウンドで値をフィルターする

マルチタスクの同時処理

複数のスレッド間で通信する

スレッディング技術を使用してフィボナッチ数列を計算する

描画にマルチスレッドを使用する

アプリケーションのメインページを作成する

03分13秒

ワーカー js の作成

Web ワーカーとのコミュニケーション

04分15秒
章9CSS3の知識ポイントを詳しく解説

CSS1.0とCSS2.0の概要

CSSとDIVタグの関係

05分15秒

CSSコーディング標準

07分57秒

属性セレクター

05分15秒

RGBA透明度

複数列のレイアウト

複数の背景画像

01分54秒

文字列オーバーフロー

ブロックシャドウと丸い影

丸い角

ボーダー絵

変形

CSS3の適用範囲

現在 CSS 3 をサポートしているブラウザ

実践事例: 美しいフォームをデザインする

属性セレクターを理解する

事例演習

構造的な疑似クラス セレクターを理解する

事例演習

一般的な UI 疑似クラス セレクターを理解する

事例演習

その他のセレクター

text-shadow プロパティを定義する

影効果を適用する

総合的な実践: ハッカー Web サイトのホームページをデザインする

05分49秒

オーバーフローテキスト

テキストの折り返し

RGBAカラー値を使用する

HSL カラー値を使用する

HSLA カラー値を使用する

不透明度属性を定義する

透明色の値を定義する

詳しい使い方説明

事例演習

01分04秒

詳しい使い方説明

事例演習

詳しい使い方説明

実践例: 楕円グラフィックのデザイン

詳しい使い方説明

実践事例: Windows 7 のインターフェイス効果の設計

背景座標を定義する

背景のトリミング領域を定義する

背景画像のサイズを定義する

背景画像のループ方法を定義する

複数の背景画像を定義する

変換について知る

04分26秒

回転アニメーション

ズームアニメーション

動くアニメーション

チルトアニメーション

変形アニメーション

事例実践: 落書きの壁をデザインする

カスタム変換

複雑な変形を定義する

遷移プロパティを定義する

移行時間を定義する

遷移遅延時間を定義する

トランジション効果を定義する

事例実践: OS Navigator の設計

実践例: 画像反転効果のデザイン

Webkit グラデーションのデザイン

Webkit ケースの実践

Webkit グラデーションのデザイン

Webkit ケースの実践

Gecko グラデーションをデザインする

Gecko ケースの練習

IE グラデーションの設計

W3C グラデーションの設計

デザインギフトボックス

折りたたみパネルのデザイン

デザイン缶

デザインディスクのスライドアニメーション

デザインドロップダウンメニュー

精巧なデザインのボタン

章10レイアウト

複数列のレイアウトを設計する

03分16秒

列幅を定義する

01分29秒

列数を定義する

01分08秒

列間隔を定義する

01分07秒

列の境界線のスタイルを定義する

02分19秒

列全体の表示を定義する

01分45秒

列の高さを定義する

01分49秒

デザインボックスのレイアウト

04分53秒

適応幅を定義します。 OK

04分08秒

列の表示順序を定義する

01分48秒

列の配置方向を定義する

01分13秒

モジュールサイズの適応を定義する

03分05秒

空白を削除する

04分03秒

位置合わせを定義する

総合的な演習: 複数列の Web ページのデザイン

05分19秒

ボックスモデルの構成方法を変更する

要素のサイズを調整する

アウトラインを定義する

輪郭の変位を定義する

ナビゲーション順序を定義する

方向キーの制御シーケンスを定義する

表示内容を追加する

要素スタイルをキャンセルします

イニシャルを使用する場合は注意してください

オーバーフロー処理

@font-face ルールを使用する

メディア クエリ モジュールを紹介します

@media ルールを理解する

@media ルールを使用する

@media ルールをサイトに適用する

音声機能を追加

デザインの反射

04分42秒
  • キャンセル返事送信
  • キャンセルノートの配布送信