検索

次のセクション: focus伪类选择器688 回再生

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

フロントエンド初心者のための HTML5+CSS3 入門

導入 >
コースウェア
章1コースの紹介とコンピュータの基本知識

学習ルート

03分54秒

HTML の概要

00分36秒

ウェブ関連の概念

07分44秒

一般的なブラウザとカーネル

04分44秒

ウェブ標準

07分32秒
章2HTMLの基本構文と構造

HTMLタグの概要

01分01秒

HTML 構文の仕様

07分11秒

HTMLの基本構造タグ

07分15秒

VSCodeツール作成ページ

06分36秒

DOCTYPE と lang および文字セットの役割

08分56秒
章3HTMLタグ

タグのセマンティクス

02分22秒

タイトルタグ

05分14秒

段落タグと改行タグ

06分23秒

スポーツニュースの事例

04分24秒

テキスト書式設定タグ

07分57秒

divタグとspanタグ

04分43秒

画像タグ(上)

09分13秒

画像タグ(下)

04分14秒

イメージタグに関する注意事項

02分47秒
章4相対パスと絶対パス

ディレクトリフォルダーとルートディレクトリ

06分30秒

相対パス(上)

06分07秒

相対パス(下記)

02分56秒

絶対パス

03分20秒
章5リンクとアンカー

リンクタグ(上)

08分38秒

リンクタグ(下記)

09分16秒

アンカーリンク

07分02秒

コメントタグと特殊文字

08分18秒
章6総合的な事例

総合事例(その1)

10分36秒

総合事例(パート2)

05分13秒
章7HTMLテーブル

HTML タグの概要 (パート 2)

01分11秒

テーブルラベルの基本的な使い方

08分10秒

ヘッダーセルのラベル

02分30秒

テーブル関連の属性 (理解)

08分24秒

小説ランキング事件

09分25秒

テーブル構造タグ

04分45秒

セルを結合します

08分30秒

表の概要

03分46秒
章8HTMLリスト

順序なしリスト

08分44秒

順序付きリスト

03分16秒

カスタムリスト

06分37秒

リストの概要

02分52秒
章9HTMLフォーム

フォームの使用シナリオと分類

04分19秒

フォームフィールド

05分25秒

入力タイプ属性テキストボックスとパスワードボックス

06分32秒

入力タイプ属性のラジオボタンとチェックボックス

04分36秒

入力の名前と値の属性

05分49秒

入力のチェック済み属性と maxlength 属性

03分32秒

入力フォーム要素の4つの属性の使用シナリオに関する教室での質疑応答

03分03秒

入力タイプ属性の送信およびリセット ボタン

06分27秒

入力タイプ属性の通常のボタンとファイルフィールド

04分13秒

ラベル ラベル

06分08秒

ドロップダウンフォームを選択

05分41秒

textarea テキストエリアのラベル

05分13秒

フォーム要素の概要

02分50秒
章10総合的な事例

登録ページ(1)

08分23秒

登録ページ(2)

08分58秒

登録ページ(3)

05分23秒

登録ページ (4)

03分59秒

文書の読み方を学ぶ

06分14秒
章11CSS カスケード デモ テーブルの概要

CSS カスケード スタイル シートの概要

01分08秒

CSS の概要

05分09秒
章12CSSの構文仕様とコードスタイル

CSS 構文の仕様を体験する

07分17秒

CSSコードスタイル

04分42秒
章13CSSセレクター

CSSセレクターの役割

03分34秒

タグセレクター

06分01秒

クラスセレクター

10分31秒

クラスセレクターを使用してボックスを描画する

05分17秒

クラスセレクターの特別な使用 - 複数のクラス名

08分02秒

IDセレクター

06分23秒

ワイルドカードセレクター

05分04秒
章14CSSフォント

font-family はフォントファミリーを設定します

07分39秒

フォントサイズ フォントサイズ

04分01秒

font-weight フォントの太さ

08分09秒

フォントスタイル フォントスタイル

03分06秒

フォント複合属性の書き方

07分46秒

フォント属性の概要

03分01秒
章15cssテキスト

テキストの色色

05分57秒

テキストの配置 text-align

03分06秒

テキスト装飾 テキスト装飾

05分04秒

テキストインデント テキストインデント

05分26秒

行間隔、行の高さ

08分09秒

CSSテキストプロパティの概要

03分01秒
章16CSSスタイルシート

内部スタイルシート

04分25秒

インラインスタイルシート

04分05秒

外部スタイルシート

05分04秒

CSSの導入方法まとめ

02分11秒
章17総合的な事例

ニュースページ

06分03秒

スタイルの変更 (1)

04分45秒

スタイルの変更 (2)

07分40秒

スタイルを変更する (3)

03分09秒

Chrome デバッグ ツールの使用

07分04秒
章18emmet 構文

CSS 2 日目ガイド

01分29秒

emmet 構文は HTML タグを生成します

09分57秒

CSS スタイルをすばやく生成するための emmet 構文

03分08秒

コードを素早くフォーマットする

05分27秒
章19複合セレクター

複合セレクターの概要

01分36秒

子孫セレクター

08分57秒

子要素セレクター

03分18秒

クラス演習

02分54秒

ユニオンセレクター

06分14秒

リンク擬似クラスセレクター(その1)

09分39秒

リンク疑似クラスセレクター (下記)

05分36秒

フォーカス擬似クラスセレクター

03分01秒

複合セレクターの概要

03分03秒
章20要素表示モード

要素表示モードとは

04分16秒

ブロック要素

06分38秒

インライン要素

05分32秒

インラインブロック要素

03分39秒

要素の表示モードの概要

03分22秒

表示モード変換

08分12秒
章21サイドバーの小さなケース

小さなツールのスニペーストの使用

04分44秒

Xiaomiサイドバーケースのシンプルバージョン

07分29秒

単一行テキストの垂直方向の中央揃えの原則

07分07秒

背景色

03分59秒

背景画像

04分22秒

背景のタイリング

05分12秒

背景の位置方向名詞

07分29秒

背景位置のケース 1

06分57秒

背景ロケーションケース2-King of Glory背景画像

04分57秒

背景の位置 - 正確な単位

04分01秒

背景位置 - 混合ユニット

04分07秒

背景を修正しました

04分20秒

背景属性の複合記述方法

03分03秒

背景色半透明

06分28秒

背景の概要

03分40秒

症例総合5色ナビゲーション(前編)

07分01秒

総合事件五彩ナビゲーション (2)

03分34秒
章22CSSの3大特徴

積み重ね可能性

04分18秒

継承

04分40秒

行の高さの継承

09分31秒

優先度

06分31秒

優先課題

07分42秒

CSS ウェイトのオーバーレイ

06分47秒

ウェイトを使った 2 つのエクササイズ

05分25秒
章23ボックスモデル

ボックスモデルの紹介

01分13秒

Webページのレイアウトの本質を理解する

03分56秒

ボックスモデルのコンポーネント

03分33秒

ボックスモデルの境界線

07分31秒

枠線の合成書き込み

07分49秒

表の細い線の境界線

05分29秒

枠線はボックスの実際のサイズに影響します

03分40秒

ボックスモデルの内側マージンパディング

04分05秒

パディング複合プロパティ

06分02秒

パディングはボックスの実際のサイズに影響します

04分45秒

パディング アプリケーション - Sina ナビゲーション バー (パート 1)

06分09秒

パディングアプリケーション-Sina Navigation (パート 2)

05分47秒

Xiaomiサイドバーの変更

02分56秒

パディングでは箱を開けたままにできません

04分53秒

ボックスモデルのマージン

06分31秒

マージンの一般的な適用 - ブロックレベルのボックスは水平方向と中央に揃えられます。

03分39秒

インライン要素とインラインブロック要素は水平方向に中央揃えで配置されます

02分41秒

マージンのマージ - 隣接するブロック要素の垂直マージン

04分14秒

マージンの結合 - ネストされたブロック要素が折りたたまれる

06分01秒

内側と外側の余白を明確にする

04分51秒
章24総合的な事例

psの基本操作

05分36秒

包括的なケース製品モジュールのレイアウト分析

02分14秒

包括的なケースとボックスのレイアウト

03分38秒

包括的な症例写真と段落の制作

06分05秒

包括的なケース評価と詳細な作成

06分28秒

包括的なケース垂直ラインの詳細制作

04分11秒

先生が説明する

05分15秒

Express モジュール レイアウト分析

02分11秒

高速モジュールヘッダーの生成

06分15秒

モジュールリストの高速作成

07分39秒
章25丸い境界線

丸い境界線の原則

06分20秒

丸い角の使用

07分43秒
章26影

ボックスシャドウ

09分04秒

テキストシャドウ

01分54秒
章27浮く

フローティングガイド

02分05秒

従来の Web ページ レイアウトの 3 つの方法

04分43秒

なぜフロートが必要なのか

05分16秒

フロートとは何ですか

04分46秒

フロート特性 - 標準外

06分33秒

フローティングプロパティ - フローティング要素は 1 行で表示されます

03分48秒

Float プロパティ - Float 要素にはインライン ブロック プロパティがあります

04分52秒

フローティング要素は、多くの場合、標準フローの親要素とペアになります。

03分09秒

フローティング レイアウトの演習-1

04分04秒

フローティング レイアウトの演習-2

09分17秒

空中演習 - 携帯電話モジュール(前編)

06分05秒

浮遊演習~携帯電話モジュール(その2)

05分00秒

一般的な Web ページのレイアウト

10分39秒

フローティングの2つの注意点

07分47秒
章28クリアフロート

なぜフロートをクリアするのか

10分17秒

クリアな浮遊性とエクストララベル方式

07分51秒

浮動親要素のオーバーフローをクリアする

02分33秒

疑似要素後のクリアフローティング

05分04秒

浮動二重擬似要素をクリアする

03分02秒

クリアフロート

02分49秒
章29psのカット写真

一般的な画像フォーマット

03分44秒

レイヤーカット(上)

04分48秒

レイヤーの切り抜き (下)

04分59秒

スライスツール

07分19秒

カッターマンのインストール

04分35秒

カッターマンの使い方のヒント

06分04秒
章30雪城オンラインケース

準備

06分40秒

css属性の記述順(重要)

04分56秒

ページレイアウトの全体的な考え方

05分30秒

ヘッダー領域の作成

08分08秒

ロゴエリア制作

04分40秒

ナビゲーションバー・ナビエリア制作(前編)

06分24秒

ナビゲーションバー・ナビエリア制作(中)

05分59秒

ナビゲーションバー・ナビエリア制作(その2)

02分54秒

検索検索モジュール入力制作

08分36秒

検索検索モジュールボタン制作

05分27秒

ユーザーモジュールの製作

04分55秒

バナーモジュール制作

06分31秒

サブナビモジュール製作(前編)

05分56秒

サブナビモジュール製作(その2)

03分17秒

コースモジュール制作(前編)

04分29秒

コースモジュール制作(中)

03分20秒

コースモジュール制作(その2)

07分35秒

プレミアムレコメンドモジュール(前編)

03分42秒

プレミアムレコメンドモジュール(中)

03分34秒

プレミアムレコメンドモジュール(パート2)

04分51秒

box-hdモジュールの生産

07分22秒

box-bdモジュールの製造

05分41秒

ボックスモジュール完成

05分54秒

フッターモジュールの制作

04分46秒

著作権モジュールの制作

06分15秒

リンクモジュール生産

04分35秒
章31位置

位置決めガイド

00分59秒

なぜポジショニングが必要なのか

03分43秒

ポジショニング構成

04分11秒

相対的な位置決め

08分16秒

絶対配置 - 親なし、または親配置なし

07分16秒

絶対位置決め - 親は位置決めステータスを持っています

06分04秒

規格外の絶対位置決めは、本来の位置を占めません。

02分07秒

息子と父親の関係の起源

07分07秒

息子の絶対的な父親熱モジュールの場合

07分47秒

固定位置

07分26秒

固定位置のヒント - ページの中央の右側に固定します。

06分30秒

スティッキーポジショニング (理解)

05分10秒

ポジショニングの概要

02分42秒

重ね順の配置

07分18秒

絶対位置ボックスセンタリングアルゴリズム

07分45秒

位置決めの特別な機能

02分47秒

フローティング要素は、標準フローのテキストの配置を抑制しません。

05分09秒
章32淘宝網重点マップ

レイアウト分析

03分07秒

大きな箱の生産

左矢印ボタンの制作

07分45秒

右矢印ボタンの制作

ULボックスモジュールの生産

李小ドットモジュールの生産

Web ページのレイアウトの概要

章33ポテトケース

表示には隠し要素が表示されます

06分39秒

可視性非表示の要素を表示する

オーバーフロー表示非表示

ポテトケース(前編)

ポテトケース(その2)

章34高度な CSS のヒント

導入

01分25秒

なぜエルフの技術が必要なのか

04分57秒

スプライトチャートの使用(原則)

06分18秒

スプライト図の使い方(コード)

06分30秒

スプライトの例 - 自分の名前を綴ります

07分32秒

フォントアイコンの生成と利点

05分10秒

フォントアイコンのダウンロード

05分50秒

フォントアイコンの使用

08分20秒

フォントアイコンの追加と読み込みの原理

04分06秒

CSSトライアングルの使い方

05分14秒

CSS トライアングル アプリケーション - Jingdong 効果

03分48秒

ユーザーインターフェイス - マウススタイル

ユーザー インターフェイス - フォームのアウトラインを削除し、テキスト フィールドのドラッグを防止します。

vertical-align は、インラインブロックとテキストの垂直方向の中央揃えを実装します。

写真の下部にある空白のギャップの解決策

単一行のテキストが省略記号表示からはみ出る

複数行のテキストが省略記号表示からはみ出る

レイアウトスキル - マイナス余白の賢い使い方 (パート 1)

レイアウトスキル - マイナス余白の上手な使い方(パート2)

レイアウトテクニック - フローティング要素の周囲にテキストを巧みに使用する

レイアウトテクニック - インラインブロックの賢い使い方

レイアウト スキル - CSS トライアングルの賢い使い方 (パート 1)

レイアウト スキル - CSS トライアングルの賢い使い方 (パート 2)

CSSの初期化

章35HTML5の新機能

HTML5CSS3 はナビゲーションを改善します

セマンティックタグを追加する

動画タグを追加

オーディオタグを追加する

入力フォームを追加

新しいフォームプロパティを追加する

章36CSS3の新機能

属性セレクター (上)

属性セレクター (下記)

構造擬似クラスセレクター - n 番目の要素を選択します

n 番目の子セレクター (上)

n 番目の子セレクター (下記)

nth-child と nth-of-type の違い

疑似要素セレクターの使用シナリオと起源

疑似要素セレクターの基本的な使用法

擬似要素セレクターの使用シナリオ - フォント アイコンに一致する

疑似要素使用シナリオ・イミテーションポテト効果

疑似要素セレクター - 疑似要素が浮遊性をクリアします

CSS3ボックスモデルボーダーボックス

CSS3画像ぼかし処理

ボックスの幅を計算する calc 関数

CSS3の新属性遷移(その1)

CSS3の新属性遷移(その2)

CSS3 移行演習

一般化された H5 (理解)

章37ぴにょうごプロジェクト

導入

00分48秒

Webサイト制作の流れ

05分05秒

ぴによう号プロジェクト企画

ピンヨウゴウプロジェクト建設

Pinyougou プロジェクト - スタイルのモジュール開発

ピンヨウ号プロジェクト - ファビコンアイコン制作

Pinyougouプロジェクト - TDK三大レーベルSEO最適化

Pinyougou ホームページ-クイックナビゲーションショートカット構造の構築

Pinyougou ホームページ-クイックナビゲーション 左側の制作

Pinyougou ホームページ - 右側に構築されたクイック ナビゲーション

Pinyougou ホームページ - クイック ナビゲーションの右側にあるフォント アイコン

Pinyougou ホームページヘッダーモジュールの構築

04分30秒

Pinyougou ホームページ-ロゴSEO の最適化 (パート 1)

06分54秒

Pinyougou ホームページ-ロゴSEO の最適化 (パート 2)

04分21秒

Pinyougou ホームページ検索検索モジュール (その 1)

06分14秒

Pinyougou ホームページ検索検索モジュール (その 2)

Pinyougou ホームページ - ホットワード モジュール

Pinyougouホームページ-ショップカーモジュール製作

Pinyougou ホームページカウント ショッピング カート統計モジュール

Pinyougou ホームページ-ナビゲーション ナビゲーション モジュールの構築

Pinyougouホームページドロップダウンモジュール制作

ぴにゅう号ホームページ-ナビゲーション詳細分類制作(その1)

ぴにゅう号ホームページ-ナビゲーション詳細分類制作(その2)

Pinyougouホームページ-navitemsモジュール制作

Pinyougou ホームページフッター下部モジュールの構築

Pinyougou ホームページ-mod-servie モジュール制作 (前編)

Pinyougou ホームページ-mod-servie モジュール制作 (その 2)

Pinyougouホームページ-mod_helpモジュール制作

Pinyougouホームページ-mod_copyrightモジュール制作

Pinyougouホームページ-メインメインボックス構築

Pinyougou ホームページ - ニュースフラッシュ モジュール

Pinyougou ホームページ-ニュース-HD モジュールの生産

Pinyougouホームページ-新作-BDモジュール制作

ぴにゅう号ホームページ - ライフサービス制作(前編)

06分30秒

ぴにゅう号ホームページ - ライフサービス制作(その2)

07分04秒

ぴにょうごうホームページ推奨モジュールレコメン(その1)

Pinyougouホームページ推奨モジュールレコメン(その2)

Pinyougou ホームページ-家電モジュールの構築

Pinyougou ホームページ-家電モジュールヘッドの生産

タブバータブの原則的なレイアウト要件

Pinyougou ホームページ-タブ_リスト-項目のレイアウト (その 1)

Pinyougouホームページ-タブ_リスト-項目レイアウト(中)

Pinyougou ホームページ-タブ_リスト-項目のレイアウト (その 2)

製品購入リスト-構造工事

ピンヨウゴ一覧ページ - フラッシュ販売モジュール制作

Pinyougou リスト ページ ナビゲーション モジュールの修正

ぴにょうご一覧ページ - ちょっとした問題

ぴにょうごリスト ページ終了

ピンヨウゴウ登録ページヘッダー制作

ピンヨウゴ一覧ページ - 登録メインモジュールヘッダー作成

ぴにょうご登録ページ - 登録対象作品制作(前編)

ぴにょうご登録ページ - 登録対象制作(その2)

04分45秒

Pinyougou 登録ページ - セキュリティモジュール

Pinyougo 登録ページ - 同意モジュールと登録完了モジュール

Pinyougou のプロジェクト ページが相互にジャンプし、作業の手配が可能

サーバーとは何ですか

無料スペースとウェブサイトへのアップロードを申請する

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