HTML+CSS+JS ポートフォリオ実践公開(シーズン1)

コーディングワークス、HTML+CSS+JQUERY ポートフォリオ中級実戦パブリッシング講義

「パブリッシング必須理論と実践例の合計143の授業」

'合計42時間に近い 本番パブリッシング講義ビデオ

「パブリッシャー就職のためのスキルアップ必須コース」

「実務パブリッシング本当の実力のためのハードコーディングクラス」

📔ハードコーディング（Hard Coding）の実力が本当のパブリッシングの実力です。

ジェイクエリプラグインを使用してダイナミックで豪華に装飾されたパブリッシングは、本物のパブリッシングではありません。

本物のパブリッシングの実力は、HTMLでレイアウト設計をしっかりと上手にし、CSSでバッチと詳細にデザインし、直接作成したジェイクエリ(JQUERY)で相互作用まで作れるのが本物のパブリッシングの実力です。

今の豪華さにジェイクエリプラグインの使用に頼り、基本学習を忠実にしなければ、Webパブリッシャーとして就職するのは簡単ではありません。たとえ就職して実務で働くようになっても、パブリッシャーとして難しい一日一日になる可能性が高いです。

コード一行一行直接コーディングする まもなく、ハードコーディングできるのが本当のパブリッシングの実力です。

コーディングワークスの講義は細心の注意を払って正確です。

1. パブリッシング！怖すぎないでください。自信を持って始めましょう。始まりは半分です。

2. パブリッシング！軌道に乗るのは簡単だとは言えませんが、必ず補償に戻ります。

3. パブリッシャーの就職には、HTML+CSS+JQUERYハードコーディングの基本が重要です。

• コーディングワークスパブリッシング講義では、受講生を理解できないコードは使用しません。受講生に原理を理解させることができる講義が良い講義だと思い、コーディングワークス講義はそう製作されました。
• Webコーディングを初めて始める人のために、簡単で親切に講義されたコア理論と実践例を通じてパブリッシングの自信を持ってください。

HTML+CSS+JQUERY パブリッシングを始める方に申し上げたい言葉があります。

見た目のウェブサイトをハードコーディングで一人でよく作るパブリッシングの実力を備えるのは簡単なことではありません。正確には難しいです。

知っておくべき理論も多く、理論をもとに実戦制作してみた経験も十分でなければなりません。そしてPhotoshopのUIデザインのスキルもある程度備えなければなりません。そうすれば、初めて見やすいウェブサイトを一人でよく作る実力者になることができます。

ただし、上記で述べた忠実な理論学習と理論を活用した例制作を通じて実力が拡張されていない状態で「ポートフォリオウェブサイト制作に従う」ことはできません。

もちろん勤勉に従えば「男のものをコピーしたクローン(clone)ポートフォリオ」という結果物は出るでしょうが、本当の実力につながりません。

あなたがWebパブリッシャーの雇用のために、またはデザイナーがWebパブリッシング能力を持って競争力を持つためには、必ず個人のポートフォリオウェブサイトが必要です。先ほど申し上げた忠実な理論学習と実戦制作経験を備えずに従うだけで個人ホームページを作っても、ハードコーディングの実力が支えてくれないと就職しても実務ですぐに足りない基本基がティーになります。

個人のポートフォリオウェブサイトを作成する前に、十分な理論学習と理論を活用したいくつかのパブリッシングのサンプル制作経験を積んでください。

📔学習方法ガイド

私が考える「パブリッシングスキルを育てる」方法は...

実戦パブリッシングの例制作の際、最初にどのように作るのか気軽に視聴だけをして、2度目は見ながらつづきながら作り、3度目は見て自分でやって本当に思わないときに映像参照して制作してください。そうしてこそ本当の自分の実力で残ります。

※パブリッシング実戦芸術制作の勉強の際におすすめの学習方法（1回目から4回目の学習と欠品を作る）

• 1回目- ただ何の考えもなく途中で切らずに映像を最後まで見ます。
• 2回目- 映像を見ながら従って停止し、本人コードを書いてブラウザを確認して再度再生し、このようにしてください。
• 3回目- 映像を見ずにソースファイル（画像、テキスト）だけを準備して映像の助けなしに自分で作ってください。 （本当に思わなかったらちょっと見てください。）
• 4回目- 後で作成する個人ポートフォリオホームページワークのために、該当映像のソースファイルと同じ形式。 。

🙋🏻‍♂️講義に関する予想される質問と必読事項

Q. 例制作しながら出てくる中級CSS理論説明映像はありますか？
A. '例制作に基礎理論に出ていない中級理論がたくさん出ていますが、中級理論授業はどこで聞きますか？ 'これらの質問が掲示板に頻繁に来ます。

今のコースは初級パブリッシングの例制作を​​する過程ではありません。初級～中級パブリッシングの例を製作する過程です。だからCSS初中級理論はある程度知っておくべきです。だから必ずしもよく知る必要はありません。 CSS超中級理論は、例を作成しながら継続的に繰り返します。そして、コーディングワークスのYouTubeパブリッシングチャンネルに[中級理論] CSS中級理論というプレイリストに、サンプル制作に必要な必須の中級理論映像が詳しいので、今のコースを聞きながら中級理論を並行すれば良いです。

Q.このコースを受講すれば、実務でパブリッシャーとして働くことができますか？
A. このプロセスにあるパブリッシングの内容をすべて理解し、よく活用できれば可能です。しかし、パブリッシングというのに十分な経験がなければ、実務で働くことができます。今、コースのようなものをもう少し勉強し、全体のウェブサイト制作過程をいくつか勉強すれば良いと思われます。もちろん個人ポートフォリオのホームページ制作もしていただく必要があります。パブリッシングが進入障壁が思ったより高い方です。映像 一度ご覧いただくとその中に内容とノウハウが共に学生に伝わるわけではありませんので、上記の学習方法を通じて私のものにする過程をお願いします。

Q. 実戦例制作しながら理論パートに説明ができない部分がありますか？
A. 入門初級のための基本理論映像を載せたのは、もし不足だと思う理論があれば参考にするという意味で上げた映像です。実演例制作映像で理論パートにない内容が出ていますが、理論パートにない内容が例制作からなぜ出てくるのかと質問文を載せると、私が回答しにくいです。

Q. 勉強して知らないことがあれば質問はどこにありますか？
A. ご質問がございましたら、[質問＆回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がずっと簡単です。

Q. レスポンシブウェブサイト制作講義がありましたが、どれを先に聞くべきですか？
A. レスポンシブウェブサイト全体を制作する過程を聞く前に、今の過程で十分理論と実践例制作に対する実力を高め、レスポンシブウェブサイト全体の制作過程に来ることをお勧めします。レスポンシブウェブサイト全体の制作過程なので、今の過程のように部分部分の詳細な扱いが難しいので、本番パブリッシングの過程で十分に訓練され、ウェブサイト全体の制作過程で来れば理解度がはるかに高いと考えられます。

Q. 講師様授業中にパブリッシャー就職本当の実戦ガイドを先に見ればいいでしょうか？
A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック（PDF）では、パブリッシング基本基とは、好ましいコーディング習慣と原則、キャリアのようにパブリッシングするなどパブリッシャーとして必ず知るべき内容を慎重にまとめました。パブリッシャー就職実践ガイド電子書籍（PDF）をまず見て、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。

📔 アップデートガイド

[アップデート案内、学習方法案内] HTML+CSS+JQUERY ポートフォリオパブリッシング必須理論と実践例制作講座

コーディングワークス、HTML+CSS+JQUERY ポートフォリオパブリッシング 必須理論と実践例制作講座を受講いただきありがとうございます。そして今後受講してくださる多くの方にもよろしくお願いします。

本講座は当分の間継続的にアップデートがある予定です。アップデートがある場合は、「Inflearn New New」でお知らせします。最終更新まで、既存の理論と本番パブリッシングによく従いながら制作してください。

📔セクション4. HTML + CSS本番パブリッシングの作成（Part 2） -アップデート完了（2020.08.18）

• 01. 仮想クラス hover 活用した実戦例制作（基本型ドロップダウンナビ）
• 02.before after 仮想クラスを活用した実戦例制作（ナビゲーションホバーエフェクト - Border）
• 03.before after 仮想クラスを活用した実戦例制作（ナビゲーションホバーエフェクト - content attr）
• 04.before after 仮想クラスを活用した実戦例制作（ナビゲーションホバーエフェクト – Rotate）
• 05.ラジオボタンとチェックボックスをカスタムチェックボックスにスタイリング（背景画像を使用）
• 06.ラジオボタンとチェックボックスをカスタムチェックボックスにスタイリング（フォントアサムアイコンを使用）
• 07.シーケンスチェック 仮想クラス活用した実戦例制作（個人プロフィールカードUIホバーエフェクト）
• 08.フォーム関連仮想クラスを活用した実戦パブリッシング（背景画像 フルスクリーン検索ウィンドウ）
• 09.フォーム関連仮想クラスを活用した本番パブリッシング（ログイン画面）

📔中級レベルJump Upパブリッシング理論とヒント（Tip）予定リスト

実例の作成に必要な理論だけでなく、パブリッシングのスキルアップに必要なコア理論とヒントを常に更新します。スキルアップに必要なコア理論とヒント画像が更新されている場合は、新しいニュースを通じてお知らせします。

スキルアップに必要なコア理論とヒント画像は、セクション7に順次更新されます。新しいニュースを受け取っていない場合でも、セクション7に来て、学習が必要なビデオがあるかどうかを確認してください。ファイティング〜^^

※Jump Up パブリッシング理論とヒント映像で勉強する学習例 完成本は、該当映像の右上に授業資料を押すとzipファイルを受け取ることができます。

セクション7.中級レベルJump Upパブリッシング理論とヒント（Tip）

1. WebパブリッシャーのためのChrome拡張機能の推奨（6つ） （完了、2020.05.31）
2. aタグアンカーで目的の部分をスムーズに探す2つの方法（ジェイクエリプラグイン、CSSプロパティ） （完了、2020.07.25）
3. bodyの中で別のhtmlを呼び出すことによって示すiframeを利用する（完了、2020.07.25）
4. input タグの :checked と拡張選択子 (隣接選択、兄弟選択、属性選択) で作る CSS クリックイベント(完了、2020.07.25)
5. インラインJavaScriptを活用する（divにhrefリンクを掛ける、戻る、進む、更新、ウィンドウを閉じる） （完了、2020.07.26）
6. パブリッシング講師が講義がうまくいかないかを区別する（display属性の理解度） （完了、2020.08.2）
7. 相対フォントサイズem単位とrem単位を理解する（完了、2020.08.2）
8. ウェブサイトの制作時に必ず知っておくべきフォルダファイルのパスを理解する（絶対アドレス対相対アドレス） （予定）
9. ジェネレータに依存せずに直接座標を見つけて直接コーディングするイメージマップ（Image Map）製作（予定）
10. 要素の前後をデザインする仮想クラスの花（before、after）完璧を理解する（予定）

📔本番パブリッシングの例更新完了リスト

1. タブメニューコンテンツパブリッシング with JQUERY (スタイル 01) (完了, 2020.05.30)
2. パブリッシャーとしてぜひ！知っておくべきJavaScript、変数（var）と条件文（if） - 20歳の成人チェック（完了、2020.06.02）
3. JavaScript変数と条件文を使用したスターポイントサイクル実践パブリッシング with jQuery (完了, 2020.06.02)
4. ビジュアルスタジオコード（Visual Studio Code）とEmmetの使い方（完了、2020.06.05）
5. タブメニューコンテンツ - スタイル02（プロトタイプ）with jQuery （完了、2020.06.07）
6. タブメニューコンテンツ - スタイル02（本番制作） with jQuery (完了, 2020.06.07)
7. マウスを上げると背景画像を変更する 公開プロトタイプ with jQuery (完了, 2020.06.07)
8. ショッピングモールアイテムUIホバーエフェクト with jQuery (完了, 2020.06.07)
9. コーディングワークス講義の特徴アコーディオンコンテンツスライド with jQuery (完了, 2020.06.10)

💡 セクション 6. ログイン画面 UI デザイン(完了、2020.06.20)

1. [Part 01] ログイン画面UIデザイン（製作ノート、HTML構造設計する、ファビコンを入れる）
2. [Part 02] ログイン画面UIデザイン（CSSデザイン - サイズ調整と配置）
3. [Part 03] ログイン画面UIデザイン（CSSデザイン - ボタンデザインとチェックボックスとLabel）
4. [Part 04] ログイン画面UIデザイン（CSSデザイン - before afterで区切り線デザイン）

ログインUIデザイン本番Webページの公開ビデオが更新されました。今回更新された講義映像はセクション7に合計4つのパートになっています。ダウンロードできるように完成本もアップロードされました。練習するときは、完成した本をダウンロードし、index.htmlとstyle.cssを削除して、ビデオの最初からゆっくりフォローしてください。

ログインUIデザインパブリッシングは、ジェイクエリの相互作用はない静的なパブリッシングですが、CSSの重要な属性であるボックスモデル、ボーダー、バックグラウンドイメージ、色、チェックボックスやラベルを使用するなど、全般にわたるすべてのCSSプロパティを勉強するには最適な例だ。と思われます。

💡 Pure CSSコンテンツスライダプロトタイプ (完了、2020.06.16)

• JavaScriptやJavaQueryを使用していない純粋なCSSを作成するフルスクリーンタブメニューコンテンツ
• 背景色を用いたプロトタイプ制作後の背景画像とテキストアニメーションを活用した応用実践例

▼Pure CSSコンテンツスライダプロトタイプ01（フルスクリーンタブコンテンツスライダプロトタイプ）

▼Pure CSSコンテンツスライダプロトタイプ02（フルスクリーンタブコンテンツスライダアプリケーション）

💡 ビデオバックグラウンドを活用したランディングページ本番パブリッシング with jQuery (完了, 2020.06.14)

• ビデオを背景として使用してボディにいっぱいに埋め、穏やかなバックグラウンドミュージックを敷設し、音量を調整する
• 起動時にコンテンツに徐々に表示されるCSSキーフレームアニメーションの作成
• GoogleのWebフォントでさまざまなテキストの書式を飾る、CSSでかわいいボタンデザインを作成する
• フルスクリーンナビゲーションを作動させるアニメーションハンバーガーボタンCSSにする
• JQueryでフルスクリーンナビゲーションを浮かべる（toggleClass、fadeToggle）
• 仮想クラス：beforeでビデオフレームにグラデーションオーバーレイをかぶせる
• 完成したプレビュー：https: //youtu.be/tuVTiZtii0s
• 完成本製作ノート：https: //youtu.be/LcIKADuM7TA

▼ タブメニューコンテンツパブリッシング with JQUERY (スタイル01) (完了)

▼パブリッシャーとしてぜひ！知っておくべきJavaScript、変数（var）と条件文（if） - 20歳の大人チェック（完了）

• JavaScript変数（var）と条件文（if）の概念理解クラス

▼JavaScript変数と条件文を使用したスターポイントサイクルの実践パブリッシングwith jQuery (完了)

• JavaScript変数（var）と条件文（if）の概念を活用した本番パブリッシング
• ジェイクエリメソッド : addClass() removeClass() text() html() val() prevAll() nextAll() index()

▼ビジュアルスタジオコード（Visual Studio Code）とEmmetの使い方 (完了)

▼タブメニューコンテンツパブリッシング（スタイル02） with jQuery (完了)

• 検索ボックス placeholder テキストデザインの変更
• 検索ボックスをクリックすると（:focus）
• CSSでタブメニューコンテンツをデザインする（特にボーダーデザイン）
• ジェイクエリタブメニューコンテンツ機能用のスクリプトを作成する - addClass（）、removeClass（）、siblings（）、カスタムプロパティdata-alt、var、attr（）メソッドでプロパティを取得する
• プロトタイプ制作と実戦制作の2つに分かれていますので、プロトタイプ先に学習して実戦映像をご覧ください。

▼マウスアップすると背景画像が変更されるパブリッシングプロトタイプwith jQuer y (完了)

• CSSに背景画像を入れる（backgorundプロパティ）
• 仮想クラス：beforeのcontent：attr（）を活用して埋められるテキストナビゲーションを作成する
• ジェイクエリ mouseenter と mouseleave でカスタム属性の値を attr() と呼び、CSS で背景画像を置き換える

▼ショッピングモールアイテムUIホバーエフェクトwith jQuery (完了)

• CSSを使用して親要素の子孫を配置して詳細に設計する
• マウスオーバーすると商品詳細を見せながらCSS filter属性でイメージブラー処理
• Size 選択と Color 選択するとデザインを変更する (addClass, removeClass)
• [いいね]ボタンを押すと仮想クラス：beforeのcontentコンテンツフォントアサムUnicodeに変更する（toggleClass）

▼ コーディングワークス講義特徴 アコーディオンコンテンツスライド with jQuery (完了)

• flexで水平垂直中央配置
• バーチャルクラス：afterでカトクのロゴを目的の位置に正確に配置する
• タイトルにオーバーするとデザイン変更しながら矢印フォントアサムアイコンデザイン変更しながら回転させる
• タイトルをクリックすると、タイトルのデザインが変更され、該当するコンテンツをスライドで表示する（addClass、removeClass、slideDown、slideUp）
• タイトルをクリックすると、右側に画像タイトルのカスタムプロパティで指定されたdata-imageの値をattr（）で置き換えます。

▼ジェイクエリリアクション型アニメモーダル（Modal）

💡 HTML + CSS本番パブリッシングコースの成果をプレビュー

▼ 01. CSS キーフレームアニメーション 活用した実戦例制作 01（円形サイズ変更ローディングアニメーション）

▼ 02. CSSキーフレームアニメーション 活用した実戦例制作 02（四角座標変更ローディングアニメーション）

▼03. CSSキーフレームアニメーションを活用した本番パブリッシング03（ダブルボーダーレディアスアニメーション）

▼ 04. 仮想クラス hover 活用した実戦パブリッシング 01（オーバーすると詳細説明表示される商品一覧）

▼ 05. 仮想クラス hover 活用した実戦パブリッシング 02（マウスオーバーすると現れるツールチップ作成）

▼ 06. バーチャルクラス hover 活用した実戦パブリッシング 03

▼ 07. 仮想クラス hover 活用した実戦パブリッシング 04（上下に分離されるホバーナビゲーションエフェクト）

▼ 08. 仮想クラス hover 活用した実戦パブリッシング 05（アプリ UI レイヤ 3D ホバーアニメーション）

▼ 09. 仮想クラス before after 活用した実戦パブリッシング 01(before after 基本使用法)

▼ 10. 仮想クラス before after 活用した実戦パブリッシング 02（アニメーションホバーナビゲーションエフェクト）

▼ 11. 仮想クラス before after 活用した実戦パブリッシング 03（SNSアイコンアニメーション）

▼ 12. 仮想クラス before after 活用した実戦パブリッシング 04(content attr を活用したテキストナビゲーション)

▼ 13. 入力フィールド デザインを飾る仮想クラスを活用した実戦パブリッシング（フォントアサム使用した入力フィールド）

▼14〜15。シーケンスチェック 仮想クラス活用した実戦パブリッシング 01（アニメスキルプログラス、delay）

▼ 16. シーケンスチェック 仮想クラス活用した実戦パブリッシング 03（Flexbox活用したギャラリーイメージアコーディオンナビゲーション）

▼ 17. 拡張選択者とともに仮想クラス checked 本番パブリッシング 01（アニメーションハンバーガーボタン作成）

▼ 18. 拡張選択者とともに仮想クラス checked 本番パブリッシング 02（アニメサイドメニュー作成）

▼ 19. 拡張選択者とともに仮想クラス checked 本番パブリッシング 03(タブメニューコンテンツ作成)

▼ 20. 拡張選択者とともに仮想クラス checked 本番パブリッシング 04(タブコンテンツ - Opacity)

▼ 21. 拡張選択者とともに仮想クラス checked 本番パブリッシング 05（タブコンテンツ – Opacity アプリケーション）

▼ 22. 拡張選択者とともに仮想クラス checked 本番パブリッシング 06(タブコンテンツ - Slide)

▼ 23. 拡張選択者とともに仮想クラス checked 本番パブリッシング 04(Testimonial タブスライダ)

▼ アコーディオン(Accordion)with jQuery

▼ モーダル(Modal) with jQuery & :target

👨🏼‍🏫講師紹介

• （現在）フリーランサーフロントエンドパブリッシャー
• ダージョはコンピュータアカデミーWebパブリッシングインストラクター
• 今コンピュータアカデミーWebパブリッシングインストラクター
• フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
• 今コンピュータアカデミーウェブデザイン機能士実技資格証明
• ラクピアICTトレーニングセンターフロントエンドパブリッシングマスターコース講師
• イージー＆エデューフロントエンドパブリッシング、UI/UXデザイン
• HTML + CSS + JQUERYパブリッシングYouTubeチャンネル「コーディングワークス」を運営
• ⚡ コーディングワークスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks

💡カリキュラム

※基本的なパブリッシング理論を知っていれば本番パブリッシングの制作を学習しても良いです。
※本番パブリッシング制作学習する必要がある場合は必須理論を参考にしてください。

セクション 0. [プレビュー] HTML+CSS 実践パブリッシングの例 完成したプレビュー

• [完成版プレビュー] HTML+CSS本番パブリッシング制作
• [完成本製作ノート] HTML+CSS本番パブリッシング制作
• [完成本製作ノート] HTML+CSS 本番パブリッシング制作 with jQuery
• [完成本製作ノート]ビデオバックグラウンドを活用したランディングページ実戦パブリッシング with jQuery

セクション 1.ブラケット(Brackets)とビジュアルスタジオコード(Visual Studio Code)の使い方

• ブラケットの使い方とショートカットの活用
• ブラケット(Brackets)でのエミット(Emmet)の使い方とショートカットの活用)
• ブラケットのリアルタイムプレビュー（フォルダ構造の作成）
• ビジュアルスタジオコード（Visual Studio Code）の使い方と環境設定
• ビジュアルスタジオコード（Visual Studio Code）でのEmmetの使い方

セクション2.セクション01。 HTML+CSS+JQUERY パブリッシングの必須理論

• HTML5コアタグの使い方（段落、テキスト書式）
• HTML5コアタグの使い方（リストの作成）
• HTML5コアタグの使い方（リンク、画像）
• CSSコア理論（CSSとは、CSSリンク、基本文法）
• CSSコア理論（選択者、セレクタ適用優先順位）
• CSS書式関連プロパティ（テキストスタイル）
• CSS書式関連属性（リストスタイル）
• CSS 子孫選択子 vs 子選択子、親要素 vs 子要素
• 詳細設計のためのCSSボックスモデル（border、border-radius）
• 詳細設計のためのCSSボックスモデル（width、height、padding、margin、box-sizing）
• 詳細設計のためのCSSボックスモデル（box-shadow、text-shadow）
• パブリッシングのすべて！ HTMLインライン要素、ブロック要素、インラインブロック要素
• CSSでHTML水平に配置する（float、overflow、clear、inline-block）
• HTML5セマンティックタグでCSSレイアウトを設計する（親要素、子要素、兄弟要素）
• CSSポジションのプロパティを完全に理解する（第1編） – 親要素 vs 子要素
• CSSポジションのプロパティを完全に理解する（2編） – 自動的に水平垂直中央に配置する
• CSSポジションのプロパティを完全に理解する（第3編） – 親要素を配置する
• CSS 必須仮想クラス – マウスオーバー効果 (hover, transition)
• CSS 必須仮想クラス – 順序を作成する仮想クラス (nth-child, nth-of-type)
• CSS必須仮想クラス - 順序を作成する仮想クラス（first-child、last-child）
• JQueryを始める（フォルダ構造、リンク方法）
• jQuery（jQuery）必須コア理論（基本構文の作成、セレクタ）
• JQuery（jQuery）必須コア理論（関数）
• JQuery（jQuery）必須コア理論（メソッド）
• JQuery（jQuery）必須コア理論（効果メソッド – slideDown、slideUp、fadeIn、fadeOut）
• JQuery（jQuery）必須コア理論（クラス制御メソッド – addClass、removeClass、toggleClass）
• ジェイクエリー(jQuery) 必須コア理論(要素探索メソッド – children, siblings)

セクション 3. HTML+CSS+JQUERY 本番パブリッシングの作成

• CSSキーフレームアニメーションを活用した本番パブリッシング01（円形サイズ変更ローディングアニメーション）
• CSSキーフレームアニメーションを活用した本番パブリッシング02（長方形座標変更ロードアニメーション）
• CSSキーフレームアニメーションを活用した本番パブリッシング03（ダブルボーダーレディアスアニメーション）
• 仮想クラスhover活用した実戦パブリッシング01（オーバーすると詳細説明表示される商品一覧）
• 仮想クラス hover 活用した実戦パブリッシング 02（マウスオーバーすると現れるツールチップの作成）
• バーチャルクラス hover 活用した実戦パブリッシング 03
• 仮想クラス hover 活用した実戦パブリッシング 04（上下に分離されるホバーナビゲーションエフェクト）
• 仮想クラス hover 活用した実戦パブリッシング 05（アプリ UI レイヤ 3D ホバーアニメーション）
• 仮想クラス before after 活用した実戦パブリッシング 01 (before after 基本使用法)
• バーチャルクラス before after 活用した実戦パブリッシング 02（アニメーションホバーナビゲーションエフェクト）
• 仮想クラス before after 活用した実戦パブリッシング 03（SNS アイコンアニメーション）
• 仮想クラス before after 活用した実戦パブリッシング 04 (content attr を活用したテキストナビゲーション)
• 入力フィールドデザインを飾る仮想クラスを活用した本番パブリッシング（フォントアサム使用した入力フィールド）
• シーケンスチェック 仮想クラス活用した実戦パブリッシング 01（アニメスキルプログラス）
• シーケンスチェック 仮想クラス活用した実戦パブリッシング02（アニメスキルプログラス、delay）
• シーケンスチェック 仮想クラス活用した実戦パブリッシング 03（Flexbox活用したギャラリーイメージアコーディオンナビゲーション）
• 拡張選択者と一緒に仮想クラス checked 本番パブリッシング 01（アニメハンバーガーボタンを作る）
• 拡張選択者と一緒に仮想クラスchecked本番パブリッシング02（アニメーションサイドメニューを作成）
• 拡張選択者との仮想クラス checked 本番パブリッシング 03 (タブメニューコンテンツの作成)
• 拡張選択者との仮想クラス checked 本番パブリッシング 04 (タブコンテンツ - Opacity)
• 拡張選択者との仮想クラス checked 本番パブリッシング 05 (タブコンテンツ – Opacity アプリケーション)
• 拡張選択者との仮想クラス checked 本番パブリッシング 06 (タブコンテンツ - Slide)
• 拡張選択子と一緒に仮想クラスチェックされた本番パブリッシング07（Testimonialタブスライダー）
• Pure CSSコンテンツスライダプロトタイプ01（フルスクリーンタブコンテンツスライダプロトタイプ）
• Pure CSSコンテンツスライダプロトタイプ02（フルスクリーンタブコンテンツスライダアプリケーション）

セクション 4. HTML+CSS 本番パブリッシング制作 with JQUERY

• HTML+CSS本番パブリッシング制作 with JQUERY - タブメニューコンテンツ（スタイル01）
• パブリッシャーとしてぜひ！知っておくべきJavaScript、変数（var）と条件文（if） - 20歳の大人のチェック
• JavaScript変数と条件文を使用したスターポイントサイクルの実績パブリッシング with JQUERY
• タブメニューコンテンツ - スタイル02（プロトタイプ） with jQuery
• タブメニューコンテンツ - スタイル02（本番制作） with jQuery
• マウスを上げると背景画像を変更する with jQuery
• [Part 01] ショッピングモールアイテムUIホバーエフェクト - ワイヤフレーム設計、重要機能制作
• [Part 02] ショッピングモールアイテムUIホバーエフェクト - 詳細HTML作成と詳細CSSデザイン
• [Part 03] ショッピングモールアイテムUIホバーエフェクト - ジェイクエリー相互作用を作る
• [Part 01]アコーディオンコンテンツスライド - ワイヤフレームデザイン
• [Part 02] アコーディオンコンテンツスライド - 詳細内容 公開
• [Part 03]アコーディオンコンテンツスライド - インタラクションジェイクエリ

セクション 5.ビデオバックグラウンドを活用したランディングページ本番パブリッシング with jQuery

• [Part 01] ビデオバックグラウンドを活用したランディングページ - ウェブフォント、動画を制御する、ロゴ
• [Part 02] ビデオバックグラウンドを活用したランディングページ - アニメコンテンツ制作
• [Part 03] ビデオバックグラウンドを活用したランディングページ - フルスクリーンナビ（トリガー、モーダルデザイン）
• [Part 04] ビデオバックグラウンドを活用したランディングページ - フルスクリーンナビゲーション（モーダルウィンドウジェイクエリー相互作用）
• [Part 05] ビデオバックグラウンドを活用したランディングページ - ビデオオーバーレイをかける

セクション6.本番Webページの公開 - ログイン画面のUIデザイン

• [Part 01] ログイン画面UIデザイン（製作ノート、HTML構造設計する、ファビコンを入れる）
• [Part 02] ログイン画面UIデザイン（CSSデザイン - サイズ調整と配置）
• [Part 03] ログイン画面UIデザイン（CSSデザイン - ボタンデザインとチェックボックスとLabel）
• [Part 04] ログイン画面UIデザイン（CSSデザイン - before afterで区切り線デザイン）

セクション7.中級レベルJump Upパブリッシング理論とヒント（Tip）

• WebパブリッシャーのためのChrome拡張機能の推奨（6つ）
• aタグアンカーを作成し、2つの方法でSmooth Scrollingする（ジェイクエリプラグイン、CSSプロパティ）
• body内で別のhtml読み込むiframeを活用する
• input と checked を活用した拡張選択子（隣接選択子、兄弟選択子、属性選択子）
• インラインJavaScriptを活用する（onclick JavaScriptイベント）
• パブリッシング講師が講義がうまくいかないかを区別する（display属性の理解度）
• 相対フォントサイズem単位とrem単位を理解する
• 親要素の値を継承するinheritを理解する
• CSS calc() 算術式（四則演算）
• CSSで変数var（）を使用する
• 仮想クラスの花（：before：after）の使い方
• ハードコーディングでイメージマップを作成する

セクション8. [ダウンロード]サンプルの作成に使用されたソースファイルと完成した本

• [完成版] HTML + CSS本番パブリッシング
• [完成版] HTML+CSS 本番パブリッシング with jQuery
• [完成版]ビデオバックグラウンドを活用したランディングページ本番パブリッシング with jQuery
• [完成版]本番ウェブページパブリッシング - ログイン画面UIデザイン
• [ダウンロード] ビジュアルスタジオコード（Visual Studio Code）とエミット（Emmet）

インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク