レスポンシブ ウェブサイト ポートフォリオ (Architecture Agency)

HTML+CSS+JQUERYレスポンシブウェブサイトポートフォリオ制作プロセス

「合計24時間以上のレスポンシブウェブサイトパブリッシング講義」

「パブリッシャー就職のための個人ポートフォリオホームページ制作コース」

「中級パブリッシングスキルアップのためのジャンプアップ理論映像」

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

📔コーディングワークスレスポンシブウェブサイトの制作の特徴

01）フルUI / UX - 3Dセクション切り替えアニメーション

製作されるレスポンシブウェブサイトの全体的なUXは、マウスホイールを上げ下げしながらセクションを移動する方法です。セクションを移動しながら3Dアニメーション効果を表示するので、創造的なUI / UXを表示するのに十分です。また、用意されているいくつかのオプションを変更すると、回転するアニメーションからサイズが変わる合計9つのさまざまなセクション切り替えアニメーションに変更できます。

どのセクション切り替えアニメーションを使用したくない場合は、オプションでセクション切り替えアニメーションをオフにするオプションもあります。

このセクションの切り替えアニメーションオプションの変更はとても簡単で簡単に設定されているため、JavaScriptの知識がまったくなくても十分に変更できます。

※PCレイアウトの全セクション切替UI/UXはジェイクエリプラグインで製作されます。
※PCレイアウトセクション切り替えアニメーションプラグインをダウンロードして使用するだけでなく、ユーザー設定（カスタマイズ）する過程も講義で十分学習できます。
※製作されるレスポンシブ全体のウェブサイトはクロスブラウジングも完璧にサポートするため、Chrome、Firefox、Edge、Internet Explorer（IE）で問題なく見られます。

02) クローンサイト、コピーサイトではなくコーディングワークスが直接製作したウェブサイト

今回制作されるレスポンシブウェブサイトは、コーディングワークスが直接企画からUI/UXデザインそしてパブリッシングまで、あらゆる作業を受講生のために最初から最後まで創造的に製作されたレスポンシブウェブサイトです。

一般的にクローンサイト制作講義やコピーサイト制作講義の場合、十分な理論と経験学習が可能です。しかし、コピーサイトだから、製作された結果物を修正して自分のポートフォリオウェブサイトとして使うには無理があります。しかし、今回のレスポンシブウェブサイトは、コーディングワークスが企画、デザイン、パブリッシングまで全ての過程を自ら作った結果であるため、十分な学習後のテキストや画像修正、そしてある程度のレイアウト変更で受講生の皆様の個人ポートフォリオホームページとしてご利用いただけます。

03) 講義セクション別15個の段階別完成本とPSDファイル提供

段階別完成本とは、ウェブサイト全体の制作過程で、Inflearn授業内容のセクション別に制作映像の結果物が段階別にzipファイルで用意されています。最終完成本のみを提供する場合、受講生の皆さんが困難を経験する可能性があると考え、段階別完成本を作業の途中ですべて保存して準備しました。

段階的に完成した本がなく、最終本だけがあれば発生する可能性のある問題を例に挙げると...

ジェイクエリプラグインを修正してUI / UXに基づいて起動する必要がありますが、この部分で問題が発生した場合は、起動も正しくできません。このような場合は、最初の手順を完了したzipファイルを解凍して次のセクションに従ってください。できない部分は2回目でもう一度勉強すれば良いと思います。しかし、最終版だけを提供すれば開始できない場合が生じると思われ、段階的に完成本を提供します。

もちろん、最初から最後まで、あなたが純粋に作ったファイルで最終的な成果物を作るのが最善ですが、今回のレスポンシブウェブサイト制作の目的は、成果物を作り出すよりも結果物を作り出す過程、そしてその過程でパブリッシングの多くを学ぶことです。目的ははるかに大きいです。その過程の中で、全レスポンシブなウェブサイトを作っていくパブリッシング過程、ノウハウ、実戦理論を学ぶことです。

※Photoshopで製作されたUIデザインPSDファイルが資料室にあります。後で個人ホームページ制作の際に受講生の皆様の個人用途に合わせて修正してご使用ください。

※Photoshop UIはPhotoshop CC 2019バージョンで製作され、製作に使われたフォントも含まれています。

04) レスポンシブフレームワークを使わない100%ハードコーディングモバイル制作

今回のレスポンシブウェブサイトの製作は、100%ハードコーディングして製作する方法で製作されました。

ブートストラップなどのレスポンシブCSSフレームワークを使用すると、レスポンシブウェブサイトの作成がはるかに簡単になります。しかし、ハードコーディングしてレスポンシブWebを作成する経験と実力がある状態でレスポンシブCSSフレームワークを使用することは大丈夫ですが、ランダムレスポンシブCSSフレームワークにのみ依存しながらレスポンシブWebを作成することはお勧めできません。

もちろん、最初から一つ一つハードコーディングしてレスポンシブウェブを作るのは難しいです。手もすごくたくさん行きます。しかし、このような過程の中でパブリッシングの実力が急成長すると思います。

今回の反応型ウェブサイト制作講義では、水平配置とポジショニングはパブリッシングの基本となるfloat、position、transformを使用しました。 Flexで配置すると簡単ですが、基本が重要であるため、今回の操作ではflexプロパティを使用していませんでした。

05) 合計20時間以上の製作講義

総製作講義時間が20時間を超えます。制作講義時間が長いです。私が考えても長いです。
作るのに私も大変でした。 😢😢
説明虫と同じ説明が何度も入っています。同じ話を何度もするのも大変でした。

このようにしなければならないと考えて長くする私も大変でしたが、やはり講義を見る受講生も大変だと思います。
でも、ゆっくりゆとりと考えながら理解しながら作るのが大事だと思いました。

先ほど申し上げましたが、目的は早い時間に結果物を作るのではなく、作っていく過程で経験とパブリッシングノウハウ、実戦スキルを上げることで考えるために作ってみると授業映像が多く長くなりました。

06) 製作講義に使用されたテキストエディタ

今回のレスポンシブウェブサイト制作講義に使用されたテキストエディタはブラケットです。もちろん、ビジュアルスタジオコードなどの受講生がおなじみのテキストエディタを使用してください。ただし、リアルタイムプレビュー機能を持たないテキストエディタはフォローしてください。

※Live Preview機能のあるBracketsまたはVisual Studio Codeをお勧めします。

🙋🏻‍♂️ 画面切り替えジェイクエリプラグインの設定は難しくありませんか？

どうやら慣れていない方には、画面切り替えジェイクエリプラグインの設定が少し複雑な方です。
画面切替ジェイクエリプラグインセッティングは映像見ながら十分に行うことができますが必ずしも学生自らする必要はありません。

その画面切り替えジェイクエリプラグインの設定がうまくできず、パブリッシングの実力があっていないと決めるのはまったくありません。負担しないでください〜^^

プラグインの設定が複雑で難しい方のためにステップバイステップの完成版が用意されています。
ステップバイステップの完了は、プラグイン設定が完了したすべてのフォルダとファイルであるため、ダウンロードして解凍し、次のセクションに従ってください。

画面切り替えジェイクエリプラグインの設定が完了したファイルは、[セクション01.段階別完成本]または[セクション02.段階別完成本]を受け取ればよく、モバイル全体のレイアウトとナビゲーションパブリッシング完成本を受け取り始めるには[セクション03.段階別完成本]を。

セクション 18. 資料のダウンロード（段階別完成本、ビジュアルコードの使い方、Photoshop UIデザイン）

• [セクション01.ステップバイステップ完了]レイアウト全体を制御するプラグインの使い方とカスタマイズ
• [セクション02.段階別完成本] 全体レイアウト ワイヤフレームパブリッシング(PC ver.)
• [セクション03.段階別完成本]モバイル全体のレイアウトとナビゲーションパブリッシング(Mobile ver.)

🙋🏻‍♂️ 講義受講のための選手知識

今回のレスポンシブウェブサイト制作の難易度は入門または初級は難しいです。受講レベルは中級に似ているか近くになければよく従うことができます。少なくとも初級ではないと思われる方ならフォローしてくるのに大きな難しさではないと思います。

受講のための選手の知識としては、HTML+CSSに関する基本的な内容を知っていれば良いです。だからといってHTML+CSSを上手にする状態である必要はありません。 20時間を超える講義で余裕を持って十分説明しています。もし映像をご覧ください 受講生のコーディングが遅くてHTML+CSS作成が遅い場合は、映像を停止してHTML+CSS作成をして、次のステップに従ってください。

映像を止めてコーディングし、他の人より時間が少し必要なだけです。むしろ、落ち着いて自分でコーディングする時間があるという点でより良いです。あまり心配しないで一緒に勉強してほしいです^^

私の講義の中には、「HTML + CSS + JQUERYポートフォリオ中級実践パブリッシング講義」があります。この講義にある理論内容と実戦例制作内容が今回のレスポンシブウェブサイト制作必要な内容がほぼすべて入っています。まもなく、 HTML+CSS+JQUERY 基本機をしっかり作れる講義だと思います。

今回のレスポンシブウェブサイト制作からいくつかを除いて 「 HTML+CSS+JQUERY ポートフォリオ中級実戦パブリッシング講義」にある内容を1回目程度学習していただくと、フォローアップがはるかに簡単になると思います。

結論は...

入門や初級でなければついてくるのは問題ありませんが、ちょっと凄い感じになりますよ。
他の講義を通じてHTML+CSSの基礎を身につけて来られたら、十分に追いつくだけでなく、なぜこれをするのかについての理解度を持ち、レスポンシブなウェブサイトの制作過程を終えることになると思います。

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

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

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

Q.このコースを受講すれば、実務でパブリッシャーとして働くことができますか？

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

Q. ウェブサイト制作しながら出てくる理論を説明する理論パーツが別にありませんでしたか？
A. 今受講するコースは入門初級コースではなく、中級レベルのレスポンシブウェブサイト全体制作パブリッシング講義です。基本理論パートと実戦例制作学習は、異なるコースを通じてスキルアップすることをお勧めします。

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

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

💡PCレイアウトセクション切り替えプレビュー（Preview）

▼セクション切り替え＃01：3D回転

▼セクション切り替え＃02：サイズ拡大縮小

▼セクション切り替え＃03：前のセクションから次のセクションを引く

▼セクション切り替え＃04：サイズ変更＆透明度交差

▼セクション切り替え＃05：一般的なアニメーションセクション切り替え

▼セクション切り替え＃06：フレームスタイルでサイズ変更後に移動

💡 Mobile レイアウトUI/UXプレビュー(Preview)

▼モバイルUI/UX＃01：フルモバイル画面

▼モバイルUI/UX＃02：モバイルナビゲーション

• ジェイクエリ相互作用（addClass、toggleClass、removeClass）
• マウスホイールを検出してヘッダーデザイン、上にボタンデザインを変更するJavaScript
• モバイルナビゲーショントリガーアニメーション
• ジェイクエリーでGNBを見て隠す
• Aタグアンカーでセクションidを探す
• ジェイクエリプラグインまたは純粋なCSSプロパティでスムーズなスクロール

▼モバイルUI/UX＃03：モバイルホームセクション（CSSキーフレームアニメーション）

▼モバイルUI/UX＃04：モバイルプロジェクトセクション（CSSタブメニューコンテンツ、Slick.jsスライダー）

▼モバイルUI / UX＃05：モバイルプランセクション（Slick.jsコンテンツスライダ responsive option）

💡PCレイアウトセクション別のUI / UXプレビュー（Preview）

▼ PC レイアウトセクション別 UI/UX #01 : Home セクション

• 4種類の連続した純粋なCSSキーフレームアニメーション
• オーバーレイ＆背景画像アニメーション、Text Revealアニメーション
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #02 : About セクション

• filter属性を適用したホバー効果
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #03 : Project セクション

• 隣接兄弟選択、input属性選択、:checkedを活用したCSSタブコンテンツスライダ
• JQueryプラグインを活用したSlick.js自動再生画像スライダ
• ジェイコーリーアイフレームモーダル（Iframe Modal）を活用したプロジェクトサブページ

▼ PC レイアウトセクション別 UI/UX #04 : Plan セクション

• JQueryプラグインを活用したSlick.jsコンテンツスライダ
• レスポンシブ対応オプションなどSlick.js重要オプションの使い方
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #05 : Awards セクション

• ポジション属性を活用したコンテンツの並べ替えとaタグ外部サイトの接続
• 各種マウスホバーエフェクト
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #06 : Location セクション

• フォントアサムを活用したアイコンデザイン
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #07 : Contact セクション

• フォーム要素を扱う、：hoverと：focusを活用した入力フィールドデザイン
• フォントアサムを活用したアイコンデザイン
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

💡 PC & Mobile サブページレイアウトUI/UXプレビュー(Preview)

▼PC＆Mobileサブページレイアウト＃01：Hiringサブページ

• アイフレームモーダル（Iframe Modal）でオープンするサブページ
• フォントアサムを活用したSNSアイコンホバーエフェクト
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC & Mobile サブページレイアウト #02 : Project Detail サブページ

• アイフレームモーダル（Iframe Modal）でオープンするサブページ
• 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

💡 中級レベルジャンプアップパブリッシング理論とヒント（Tip）リスト

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

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

※レスポンシブウェブを製作講義を学習される方は、製作講義を終える前に聞く必要はありません。ただし、2番、3番、4番はレスポンシブウェブを制作講義に必要な核心理論なので、まず聞いてレスポンシブウェブサイト制作講義を始めることをお勧めします。

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

セクション17.中級レベル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）完璧を理解する（予定）
11. [ダウンロードPSD]レスポンシブウェブ制作フォトショップUIデザイン（メインページ、サブページ、使用フォント）

▲パブリッシャー就職のためのコーディングワークスパブリッシング講義ロードマップ

👨🏼‍🏫講師紹介

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

📔教育課程（カリキュラム）

セクション0.レスポンシブウェブサイトの作成講義の紹介とテキストエディタの使い方

1. レスポンシブウェブサイトポートフォリオ制作講義紹介
2. ブラケットの使い方とショートカットの活用
3. ブラケットでのEmmetの基本的な使い方とショートカットの活用
4. ブラケットのリアルタイムプレビュー、実技試験フォルダ構造の作成
5. ビジュアルスタジオコード（Visual Studio Code）の使い方と環境設定
6. ビジュアルスタジオコード（Visual Studio Code）でのEmmetの使い方

セクション 1. レイアウト全体を制御するプラグインの使い方とカスタマイズ

1. UI UX全体を制御するプラグインの使用方法と必須事項
2. UI UX全体を制御するプラグインのダウンロードとフォルダファイルの設定
3. UI UX全体を制御するプラグインプロトタイプを作成する
4. ウェブサイト全体のindexファイル構造を設定し、必要なファイルをリンクする

セクション2.フルレイアウトワイヤフレームパブリッシング（PC ver。）

1. フルレイアウトワイヤフレームパブリッシング（PC） - 基本フォーマット
2. フルレイアウトワイヤフレームパブリッシング（PC） - フルレイアウト、ヘッダ領域

セクション 3. モバイル全体のレイアウトとナビゲーションパブリッシング (Mobile ver.)

1. モバイルナビゲーションパブリッシング - Media Query
2. モバイルナビゲーションパブリッシングパブリッシング - 基本構造とリンクの作成
3. モバイルナビゲーションパブリッシング - モバイルトリガー、GNBの表示を隠す
4. モバイルナビゲーションパブリッシング - aアンカーを作成し、スムーズにセクションを探す
5. モバイルナビゲーションパブリッシング - スクロールするとヘッダーを変更するJavaScript
6. モバイルナビゲーションパブリッシング - 右下のヒリングボタンの作成

セクション 4. セクション詳細パブリッシング(Awards Section)

1. PCレイアウトセクション詳細パブリッシング - セクション別パブリッシング作業手順
2. PCレイアウトセクション詳細パブリッシング（Awards Section） - #01
3. PCレイアウトセクション詳細パブリッシング（Awards Section） - #02

セクション 5. セクション詳細パブリッシング(About Section)

1. PCレイアウトセクション詳細パブリッシング(About Section) - #01
2. PCレイアウトセクション詳細パブリッシング(About Section) - #02

セクション 6. セクション詳細パブリッシング (Location Section)

1. PCレイアウトセクション詳細パブリッシング（Location Section） - #01
2. PCレイアウトセクション詳細パブリッシング（Location Section） - #02

セクション 7. セクション詳細パブリッシング(Contact Section)

1. PCレイアウトセクション詳細パブリッシング（Contact Section） - #01
2. PCレイアウトセクション詳細パブリッシング（Contact Section） - #02
3. PCレイアウトセクション詳細パブリッシング（Contact Section） - #03

セクション 8. セクション詳細パブリッシング(Plan Section)

1. PCレイアウトセクション詳細パブリッシング（Plan Section） - #01
2. PCレイアウトセクション詳細パブリッシング（Plan Section） - #02（Slick.jsダウンロード）
3. PCレイアウトセクション詳細パブリッシング（Plan Section） - #03（Slick.jsの使い方）
4. PCレイアウトセクション詳細パブリッシング（Plan Section） - #04（Slick.jsスタイルの変更）

セクション 9. セクション詳細パブリッシング(Project Section)

1. PCレイアウトセクション詳細パブリッシング(Project Section) - #01(プロトタイプ製作)
2. PCレイアウトセクション詳細パブリッシング(Project Section) - #02(プロトタイプ製作)
3. PCレイアウトセクション詳細パブリッシング（Project Section） - #03（タブコンテンツパブリッシング）
4. PCレイアウトセクション詳細パブリッシング（Project Section） - #04（タブコンテンツパブリッシング）
5. PCレイアウトセクション詳細パブリッシング（Project Section） - #05（タブコンテンツパブリッシング）
6. PCレイアウトセクション詳細パブリッシング（Project Section） - #06（Slick.jsイメージスライダ）

セクション 10. セクション詳細パブリッシング(Home Section)

1. PCレイアウトセクション詳細パブリッシング（Home Section） - #01（HTML + CSS構造）
2. PCレイアウトセクション詳細パブリッシング(Home Section) - #02(アニメ1)
3. PCレイアウトセクション詳細パブリッシング(Home Section) - #03(アニメ2)
4. PCレイアウトセクション詳細パブリッシング(Home Section) - #04(アニメ3)

セクション 11. サブページパブリッシング(Hiring Info)

1. PCレイアウトサブページパブリッシング(Hiring Info) - #01
2. PCレイアウトサブページパブリッシング(Hiring Info) - #02
3. PCレイアウトサブページパブリッシング(Hiring Info) - #03
4. PCレイアウトサブページパブリッシング(Hiring Info) - #04
5. PCレイアウトサブページパブリッシング(Hiring Info) - #05
6. PCレイアウトサブページパブリッシング(Hiring Info) - #06(SNSアイコンアニメーションエフェクト)

セクション 12. サブページパブリッシング(Project Detail)

1. PCレイアウトサブページパブリッシング(Project Detail) - #01
2. PCレイアウトサブページパブリッシング(Project Detail) - #02

セクション 13. サブページをリンクする (Modal Iframe Jquery Plugin)

1. サブページをリンクする（Modal Iframe Jquery Plugin）＃01（モーダルが必要な理由）
2. サブページをリンクする（Modal Iframe Jquery Plugin）＃02（モーダルアイフレームプラグイン）
3. サブページをリンクする（Modal Iframe Jquery Plugin）＃03（プラグインCSSデザインの変更）

セクション14.メインページすべてのセクションモバイルに変換する（indexファイル）

1. メインページレイアウトモバイル変換（必須コア理論）
2. メインページレイアウトモバイル変換（重要設定）
3. メインページレイアウトモバイル変換＃01（Home Section）
4. メインページのレイアウト モバイル変換 #02(About Section)
5. メインページのレイアウト モバイル変換 #03(Plan Section)
6. メインページレイアウトモバイル変換＃04（Awards Section）
7. メインページレイアウトモバイル変換＃05（Location Section）
8. メインページのレイアウト モバイル変換 #06(Contact Section)
9. メインページレイアウトモバイル変換＃07（Project Section）

セクション15.サブページモバイルに変換する（hring、project）

1. サブページモバイルに変換する #01 (hring subpage)
2. サブページモバイルに変換する#02 (project subpage)

セクション16.終了

1. コーディングワークス受講生の皆さん〜苦労しました！

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

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

セクション 18. 資料のダウンロード（段階別完成本、ビジュアルコードの使い方、Photoshop UIデザイン）

1. [セクション01.ステップバイステップ完了]レイアウト全体を制御するプラグインの使い方とカスタマイズ
2. [セクション02.段階別完成本] 全体レイアウト ワイヤフレームパブリッシング(PC ver.)
3. [セクション03.段階別完成本]モバイル全体のレイアウトとナビゲーションパブリッシング(Mobile ver.)
4. [セクション04.段階別完成本]セクション詳細パブリッシング(Awards Section)
5. [セクション05.段階別完成本]セクション詳細パブリッシング(About Section)
6. [セクション06.段階別完成本]セクション詳細パブリッシング(Location Section)
7. [セクション07.段階別完成本]セクション詳細パブリッシング(Contact Section)
8. [セクション08.段階別完成本]セクション詳細パブリッシング(Plan Section)
9. [セクション09.段階別完成本]セクション詳細パブリッシング(Project Section)
10. [セクション10.段階別完成本]セクション詳細パブリッシング(Home Section)
11. [セクション11.段階別完成本] サブページパブリッシング(Hiring Info)
12. [セクション12.段階別完成本]サブページパブリッシング(Project Detail)
13. [セクション 13. 段階別完成本] サブページリンクする (Modal Iframe Jquery Plugin)
14. [セクション14.段階別完成本] メインページ すべてのセクション モバイルに変換する(indexファイル)
15. [セクション15.段階別完成本] サブページモバイルに変換する(hring, project)
16. [ダウンロードPDF]ビジュアルスタジオコード（Visual Studio Code）とエミット（Emmet）
17. [ダウンロードPSD]レスポンシブウェブ制作フォトショップUIデザイン（メインページ、サブページ、使用フォント）

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