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

ついに待っていた（？）コーディングワークスパブリッシング講義、
HTML+CSS+JS 本番ポートフォリオシーズン2がオープンしました。

シーズン2は、シーズン1の本番パブリッシングの例と重ならない、まったく新しい本番の例を中心に作成されました。就職のためのパブリッシングポートフォリオの成果を作ってみるだけに、パブリッシングの実力を中級以上にSkill-Upしたい方にふさわしい講義です。

Q. HTML+CSS+JS 実戦ポートフォリオシーズン1を聞かずにすぐにシーズン2を受講してもいいですか？

シーズン1を必ず聞く必要はありません。ただし、シーズン1ではパブリッシング基礎の説明を詳しく説明しているのに対し、シーズン2ではそのような部分は最小化する代わりに、より深い内容を扱っています。シーズン1の例をまず見てから、自分で十分に製作可能なレベルであれば、すぐにシーズン2に来ることもできます。しかし、シーズン1を通じて説明する内容と、そして制作される例はシーズン2と重複しないため、シーズン1の完成後にシーズン2を受講することをお勧めします。

HTML+CSS+JQUERY ポートフォリオ本番パブリッシング(シーズン1)
さまざまな実践例で学ぶパブリッシングの基本

Q. HTML+CSS+JS 本番ポートフォリオシーズン2で作成された完成したHTMLを提供しますか？

はい。受講生の参考資料ダウンロードセクションでは、ビデオで作成されたすべての実践例の完成した本を含む圧縮ファイルを入手できます。 （HTML、CSS、JS、画像、参照サイト、ソーステキスト、ワイヤフレームPDFなど）

※講義映像開始前にダウンロードされた圧縮ファイルをプッシュし、index.html、style.cssファイルを削除して開始してください。ソースフォルダとimagesフォルダを除いて、HTMLの基本構造から作成してください。もし完成版を参照する必要がある場合は、いつでも圧縮ファイルを解凍してみてください。

Q. 受講前に先行するウェブコーディング能力はどのくらいですか？

まず、HTML + CSSの基本的な理解が必要です。たとえば、float、position 属性の理解が不足している方はついてきてちょっとめちゃくちゃです。シーズン1ではこのような部分も講義で繰り返し説明しますが、シーズン2は基本的なパブリッシング能力を備えた方々を念頭に置いて製作された講義です。参考にしてください！

さらに、JavaQuary JavaScriptの先行能力はあまり必要ありません。ただし、ジェイクエリの不可欠なコア理論の理解が必要です。 （クラス制御、要素ナビゲーションなど）講義全体でジェイクエリーベースで相互作用を作っており、JavaScriptは例を経験する面で使用するため、JavaScript能力への負担はありません。

Q.レッスンでどのテキストエディタを使用しますか？

ビジュアルスタジオコード（Visual Studio Code）で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。テキストエディタはビジュアルスタジオコード（Visual Studio Code）を使わなくても、受講生本人が楽によく使っているテキストエディタがあればそれを使っても構いません。

_{ビジュアルスタジオコードのダウンロード(クリック)}

※下記ビジュアルスタジオコード（Visual Studio Code）関連映像をぜひ！ご覧になり、サンプル制作を開始することをお勧めします。ビジュアルスタジオコードエクステンションのインストールPDFファイルのエクステンションはできるだけインストールしてください。

Q. サンプル制作に使用された画像は著作権のある画像ですか？

サンプル制作に使用された画像は、著作権のない画像を使用しました。ピクサーベイ、プレフィックで検索し、例に必要なイメージとして使用しました。受講生の方は講義映像例制作1回目には添付の画像とさせていただきますが、個人ポートフォリオのホームページに掲載される場合、ピクサーベイ、プレピックで画像を是非変更してアップロードしてください。

• ピクサーベイ（Pixabay） （クリック）
• プレピック（FreePik） （クリック）

Q. 例の学習順序は、最初から順に学習するのですか？

サンプル学習では、順序を守る必要はありません。必要なセクションで必要な例を学ぶことができます。 セクションの順序が難易度が低いから高いに上がるわけではありません。例の種類が異なるだけです。ただし、ウェブサイトプロトタイプ（Web Site Prototype）の制作過程と実戦反応型ウェブサイトは学習量が多いので、始めれば続いて最後まで学習することをお勧めします。

シーズン2 [必須理論] 映像とシーズン1 [必須理論] 映像を先に学習し、実戦例制作に必ず進む必要はありません。本番の例を制作したが、例の制作から出てきた内容が必須理論映像にあれば、学習次元でもう一度見れば良いです。実践例の製作に使用される理論をすべて必須理論に入れることはできませんので、実戦例と必須理論を並行してみてください。

[TMI] パブリッシングを勉強して実践例を製作する際に知っておくべき理論がとても多いです。心のようになった理論的な部分をすべて整理して映像を作りたいのですが、現実的に難しい部分があります。

Q. 実践例 完成本と理論例 完成本はどこからダウンロードできますか？

完成本をどこからダウンロードするかと質問掲示板にお問い合わせの方が時々あります。レッスンビデオで作成されたすべての完成した本ファイル（html、css、js、画像ファイルなど）は、下の最後のセクションにすべての完成した本をダウンロードできます。

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

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

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

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

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

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

[01] CSSボタン＆ナビゲーション

_{3タイプ上部ナビゲーション}

_{ドロップダウンナビ（CSS方式、3タイプ）}

_{ドロップダウンナビ（jQuery方式、3タイプ）}

[02] CSSキーフレームアニメーション

_{サークルロードアニメーション}

_{アシアナ航空ローディングアニメーション}

_{フォントアイコンテキストシャドウFilter Animation}

_{フォントアイコンテキストシャドウFilter Animation - アプリケーション}

[03] CSSホバーエフェクト

_{アウトラインテキスト}

_{クリップパス(Clip-path) イメージオーバーレイ}

_{ツールチップ(Tooltip)の作成 - 基本型}

_{ツールチップ(Tooltip)の作成 - アプリケーション}

[04] CSSセクションUIデザイン

_{フォントアサムUI}

_{フォントアサムグラデーションサービス価格表}

_{Flex Grid カード UI (World Best Cities)}

_{スマートアイテムショッピングモール}

_{個人プロフィールカード（ダークモード）}

_{きれいなテーブルデザイン}

_{カスタムチェックボックスログインフォーム}

[05] CSSウェブサイトのプロトタイプ
(Web Site Prototype)

_{Website Prototype - ネイバーレスポンシブ会員登録フォーム}

_{フルスクリーンナビゲーションレスポンシブポートフォリオ
with jQuery}

<sub>フルスクリーンナビゲーションレスポンシブポートフォリオ with jQuery
- アニメーションバリエーション</sub>

_{English Academy ヘッダードロップダウンナビゲーション}

_{ポートフォリオCSS Gridレイアウト（レスポンシブ） - PC ver。}

_{ポートフォリオCSS Gridレイアウト（レスポンシブ） - Tablet ver。}

_{ポートフォリオCSS Gridレイアウト（レスポンシブ） - Mobile ver。}

[06] JavaScript（JavaScript）＆
JQuery（jQuery）

ジェイコーリーレスポンシブアニメーションモーダル

_{ジェイクエリーフロントバックトランジション画面切り替え}

_{サウンドの再生を制御する}

_{検証チェックアニメーションログインフォーム}

_{ジェイクエリーフロントバックトランジション画面切り替え（プロトタイプ＃01）}

_{ジェイクエリーフロントバックトランジション画面切り替え（プロトタイプ＃02）}

_{検索ボックスを拡張する}

_{Netflix FAQ with jQuery}

[07]実戦反応型ウェブサイト-
ネットフリックス公式サイト

_{ネットフリックス公式サイトPC ver。}

_{ネットフリックス公式サイト Mobile ver.}

[08]実戦反応型ウェブサイト-
Chromeブラウザのダウンロード

_{Chromeブラウザダウンロード公式サイトPC ver。}

_{Chromeブラウザダウンロード公式サイトMobile ver。}

Q) ブラケットテキストエディタは使用できませんか？

以前のバージョンからAdobeから落ちてエクステンションをインストールすることはできず、問題が多く、ブラケットを使用できなくなりました。しかし、ブラケットテキストエディタの新しいバージョンが登場し、すべてが正常に動作するブラケットになりました。

ビジュアルスタジオコーディネートを使用すると、ブラケットも再利用できます。

既存のバージョンはアンインストールして、公式サイトから新しいバージョン（Version 2）をダウンロードしてインストールしてください。

ブラケット（Brackets）公式サイト：https: //brackets.io/

Q）レッスンでどのテキストエディタを使用しますか？

ビジュアルスタジオコード（Visual Studio Code）で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべての講義映像はビジュアルスタジオコード基準で説明しています。

_{ビジュアルスタジオコード（Visual Studio Code）ダウンロード（クリック）}

下の映像はHTML+CSS+JSポートフォリオ実戦パブリッシング(シーズン1)講座無料映像です。
シーズン1を受講しなくても聞きながら学習できます。下の講義映像はシーズン2で必要な内容もたくさんあるからぜひ！ご覧になることをお勧めします。

• ^{パブリッシングのすべて！ HTMLインライン要素、ブロック要素、インラインブロック要素}
• ^{CSSでHTML水平に配置する（float、overflow、clear、inline-block）}
• ^{JQueryを始める（フォルダ構造、リンク方法）}
• ^{jQuery（jQuery）必須コア理論（基本構文の作成、セレクタ）}
• ^{JQuery（jQuery）必須コア理論（関数）}
• ^{JQuery（jQuery）必須コア理論（メソッド）}
• ^{JQuery（jQuery）必須コア理論（効果メソッド – slideDown、slideUp、fadeIn、fadeOut）}
• ^{jQuery（jQuery）必須コア理論（クラス制御メソッド – addClass、removeClass、toggleClass）}
• ^{ジェイクエリー(jQuery) 必須コア理論(要素探索メソッド – children, siblings)}
• ^{CSSキーフレームアニメーションを活用した実戦例制作01（円形サイズ変更ローディングアニメーション）}
• ^{CSSキーフレームアニメーションを活用した実戦例制作02（長方形座標変更ロードアニメーション）}
• ^{CSSキーフレームアニメーションを活用した本番パブリッシング03（ダブルボーダーレディアスアニメーション）}
• ^{仮想クラスホバーを正しく理解するための基本的なドロップダウンナビゲーション}
• ^{仮想クラス before after 仮想クラスを活用した本番パブリッシング 01 (before after 基本使用法)}
• ^{パブリッシャーとしてぜひ！知っておくべきJavaScript、変数（var）と条件文（if） - 20歳の大人のチェック}
• ^{WebパブリッシャーのためのChrome Extensionの推奨（第1弾）}
• ^{WebパブリッシャーのためのChrome Extensionの推奨（第2弾）}
• ^{aタグアンカーを作成し、2つの方法でSmooth Scrollingする（ジェイクエリプラグイン、CSSプロパティ）}
• ^{パブリッシング講師が講義がうまくいかないかを区別する（display属性の理解度）}
• ^{相対フォントサイズem単位とrem単位を理解する}
• ^{親要素の値を継承するinheritを理解する}
• ^{CSS calc() 算術式（四則演算）}
• ^{CSSで変数var（）を使用する}
• ^{仮想クラスの花（：before：after）の使い方}
• ^{ハードコーディングでイメージマップを作成する}

❤コーディングワークスの受講生に来たパブリッシャー合格ニュース

▲国費支援パブリッシング過程 私に4ヶ月半程度学んだ学生ですが、就職したとカトクが来ました。

▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)

❤コーディングワークスの受講生がパブリッシャー就職後に送ってくれたメール

先生こんにちは:)

先生 Inflearn 講義を聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか？😊😊

相違ではなく、
先生にアドバイス得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります！

でも！
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました！
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー！仕事だけができる会社に入るようになりました。

キャリア職のパブリッシャーを求める会社でしたが、新人の私に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました

これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました！

実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました！

学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます

切に欲しかったし、
先生がおっしゃっていた通り信じていたら、本当に良い結果が出ました。

本当にありがとうございました！

コロナに注意してください。
また良い講義で会いたいです:)

先生こんにちは〜Inflearn受講生OOOです〜メールアドレスは他の受講生の回答見てわかりました..😊😊

ありがとうご挨拶お願いします

これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一面面接に合格して出勤することにしました。 本当にありがとうございました。

実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が、本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ～ 😊😊

その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。

これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング～！

🙋🏻‍♂️質問する前に必ず！読んでください〜！

学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合は、HTML、CSS、JSのコードをすべてアップロードしてください。

質問文にコードなしでグローだけ問題を説明すれば、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。

▲該当の講義コミュニティのよくある質問の見方をまず確認してください〜

⚡効果的な学習のためにぜひ！コーディングワークスパブリッシングYouTubeを参照してください。

コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks

カリキュラム

セクション0.シーズン2 - 講義紹介と完成版のプレビュー＆制作ノート

• [紹介ビデオ]完成版のプレビューと制作ノート

セクション 1. ビジュアルスタジオコード (Visual Studio Code) の使い方と必須エクステンション

• ビジュアルスタジオコード（Visual Studio Code）の使い方と環境設定
• ビジュアルスタジオコード（Visual Studio Code）でのEmmetの使い方
• ビジュアルスタジオコードでCSSを変更するときに上に戻るフルリロードを防ぐ
• ビジュアルスタジオコード必須設定、ホットキーの変更、必須拡張機能のインストール（PDF）

セクション 2. [必須理論] パブリッシング実践例制作のための理論とヒント（Tip）

• Flexプロパティで自由に子要素を並べ替える
• ビデオバックグラウンドセクション（Flexレイアウト）
• アンカーを作成してスムーズにスクロールして検索する（プラグイン、CSSプロパティ）
• レスポンシブWeb作成のためのメディアクエリ（Media Query）
• フォントアイコンの使い方（FontAwesome 4.7）
• フォントアイコンの使い方（XEICON）
• Webフォントの使い方（Google Webフォント、雪だるまハングルWebフォント）
• サーバーにアップロードする前に必要な画像容量を最適化する（Image Optimize）
• body内で別のhtml読み込むiframeを活用する
• filterプロパティで画像の色を自由に変更する
• object-fitとobject-positionでimgを背景として使用する
• タブメニューを作成するためのinput属性選択子、隣接選択子、兄弟選択者
• インラインJavaScriptを活用する（onclick JavaScriptイベント）

セクション3.シーズン2 - CSSボタン＆ナビゲーション

• CSSボタン＆ナビゲーション - 3タイプトップナビゲーション
• CSSボタン＆ナビゲーション - ドロップダウンナビゲーション（CSS + JQUERY）

セクション4.シーズン2 - CSSキーフレームアニメーション

• CSSアニメーション - フォントアイコンテキストシャドウfilter Animation
• CSSアニメーション - アシアナ航空ロード
• CSSアニメーション - サークルロード（1）
• CSSアニメーション - サークルロード（2）

セクション5.シーズン2 - CSSホバーエフェクト

• CSSホバーエフェクト - アウトラインテキスト
• CSSホバーエフェクト - ツールチップ（Tooltip）の作成（デフォルト）
• CSSホバーエフェクト - ツールチップ（Tooltip）の作成（アプリケーション）
• CSSホバーエフェクト - クリップパス（Clip-path）イメージオーバーレイ

セクション6.シーズン2 - CSSセクションUIデザイン

• CSSセクションUIデザイン - フォントアサムUI
• CSSセクションUIデザイン - きれいなテーブルデザイン
• CSSセクションUIデザイン - フォントアサムグラデーションサービス価格表
• CSSセクションUIデザイン - スマートアイテムショッピングモール
• CSSセクションUIデザイン - Flex GridカードUI（World Best Cities）
• CSSセクションUIデザイン - 個人プロフィールカード（ダークモード）
• CSSセクションUIデザイン - カスタムチェックボックスログインフォーム

セクション7. シーズン2 - ウェブサイトプロトタイプ（Web Site Prototype）制作

• WebSite Prototype - ネイバーレスポンシブ会員登録フォーム
• WebSite Prototype - フルスクリーンナビゲーションレスポンシブポートフォリオ with jQuery
• WebSite Prototype - English Academyヘッダードロップダウンナビゲーション
• WebSite Prototype - ポートフォリオ CSS Grid レイアウト (レスポンシブ)

セクション8. JavaScript＆JayQuery（JavaScript、jQuery）の実践例

• ジェイクエリーとJavaScriptの違い、バニラJavaScriptとは何ですか？
• ジェイコーリーレスポンシブアニメーションモーダル
• JavaScript & jQuery - ジェイクエリーフロントバックトランジション画面切り替え
• JavaScript＆jQuery - フッターファミリーサイトセレクトカスタムスタイル
• JavaScript＆jQuery - 検索ボックスを拡大する
• JavaScript & jQuery - Netflix-FAQ with jQuery
• JavaScript & jQuery - 検証チェックアニメーションログインフォーム
• JavaScript & jQuery - サウンドの再生を制御する

セクション9.シーズン2 - 実戦レスポンシブウェブサイト - ネットフリックス公式サイト

• リアルレスポンシブウェブサイト - ネットフリックス公式サイト（1） - 製作ノートと必須事項
• リアルレスポンシブウェブサイト - Netflix公式サイト（2） - 基本構造を作る
• リアルレスポンシブウェブサイト - Netflix 公式サイト(3) - Header & Welcome
• リアルレスポンシブウェブサイト - ネットフリックス公式サイト（4） - 同じ形式の4つのセクション
• リアルレスポンシブウェブサイト - Netflix公式サイト(5) - FAQ Section
• リアルレスポンシブウェブサイト - Netflix 公式サイト(6) - Footer
• リアルレスポンシブウェブサイト - Netflix 公式サイト(7) - Login Modal
• リアルレスポンシブウェブサイト - Netflix公式サイト(8) - モバイル変換作業

セクション 10. シーズン2 - リアルレスポンシブウェブサイト - Chromeブラウザダウンロード

• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード（0） - 製作ノートと必須事項
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(1) - 基本構造-Header
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(2) - Welcome Section
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(3) - Feature Section
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(4) - CallAction & Footer
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(5) - Footer Copyright
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(6) - ジェイクエリ相互作用
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(7) - モバイルレイアウト変換(1)
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(8) - モバイルレイアウト変換(2)
• リアルレスポンシブウェブサイト - Chromeブラウザダウンロード(9) - モバイルレイアウト変換(3)

セクション11.完成した本と参考資料のダウンロード

• [完成版ダウンロード]シーズン2 - [01]CSSボタン＆ナビゲーション
• [完成版ダウンロード]シーズン2 - [02]CSSキーフレームアニメーション
• [完成版ダウンロード]シーズン2 - [03] CSSホバーエフェクト
• [完成版ダウンロード]シーズン2 - [04]CSSセクションUIデザイン
• [完成版ダウンロード]シーズン2 - [05]ウェブサイトプロトタイプ（Web Site Prototype
• [完成版ダウンロード]シーズン2 - [06]JavaScript＆JayQuery（JavaScript、jQuery）
• [完成版ダウンロード]シーズン2 - [07]本番レスポンシブウェブサイト - Netflix公式サイト
• [完成版ダウンロード]シーズン2 - [08]本物のレスポンシブウェブサイト - Chromeブラウザダウンロード