SCSS(SASS)+GRID+FLEX 実戦ポートフォリオ パブリッシング

パブリッシャー就職競争力を高める
SCSS（SASS）活用能力向上のため
体系的な学習と実践例

同じ内容ですが、わかりやすく！
実務に必要なものだけ充実！
コーディングワークス講義がこのような違いを生み出します。

SCSS（SASS）基礎から活用まで体系的に学ぶことができます。パブリッシャー就職のためにSCSS（SASS）活用能力が競争力を高めるだけに能力を証明するSCSS（SASS）+GRID+FLEXを活用した実戦ポートフォリオパブリッシング結果も得られます。

キャリアパブリッシャーにとっても優遇事項であるSCSS(SASS)活用能力
やるとわかるとすぐに競争力になります！

セクション1.ビジュアルスタジオコードでLive Sass Compilerを設定して使用する方法

SCSS（SASS）を使用するには、ビジュアルスタジオコードでLive Sass Compilerの設定と使い方を詳しく学びます。また、セッティングで注意すべき部分を詳しく案内し、今後続くコア理論、コア理論活用例、実戦ポートフォリオパブリッシング学習に基礎になるように準備されています。

セクション 2. SCSS コア理論 (Essential Theory)

SCSS（SASS）の重要な文法を体系的に詳細に学びます。文法を単に理論だけ授業するのではなく、理論が適用されたHTMLとSCSSを直接​​練習しながらCSSにどのようにコンパイルされるかを確認しながら、SCSSの理論的知識を強くすることになります。

セクション 3. SCSS コア理論の活用例 (Examples of using)

コア理論で取り上げた理論的な内容を実際の例を通してどこにどのように適用されるか 適用事例を実習しながら理論を適用する際に注意すべき点とヒント（TIP）を紹介します。さらに、SCSSのコア理論だけでなく、CSSで知っておくべき属性も学習します。

セクション 4. SCSS+GRID+FLEX 本番ポートフォリオパブリッシング

SCSSのコア理論とコア理論の活用 授業で習得された知識と実力を本物の実戦パブリッシング結果物を作業しながら理論をよりしっかりとし、実戦作業で応用力を育てることになります。特に、SCSS+GRID+FLEX実戦ポートフォリオパブリッシング作業物は、パブリッシャー就職のため個人ポートフォリオホームページに「SCSS(SASS)パブリッシングポートフォリオ」という結果物として見せていただければ就職競争力が一層上がると考えられます。

セクション 5. 完成本と受講生学習資料のダウンロード

コア理論、コア理論の活用、実戦ポートフォリオパブリッシュ映像で制作するすべての完成本ファイルをダウンロードできます。授業映像を始める前に、圧縮ファイルをダウンロードして、そのフォルダを親フォルダにつかみ、映像に従います。そして、受講生に参考になる資料があれば必要に応じて更新することになります。

• [完成本] SCSS コア理論(Essential Theory)
• [完成版] SCSS コア理論活用例(Examples of using)
• [完成版] SCSS+GRID+FLEX 本番ポートフォリオパブリッシング
• [参考資料]パブリッシングのための特殊記号英語表現（PDF）
• [参考資料]パブリッシングのための特殊記号英語表現（PDF）

上で見るWebパブリッシャー採用公告の例は、規模のある会社で先日有名求人サイトに掲示した採用公告を移したものです。資格部分は、就職のためにWebパブリッシャーとして基本的に備えなければならない不可欠な部分です。ところが優遇事項に見ると、SCSS活用した開発経験保有優待..という言葉があります。文字通りSCSS活用した開発経験があれば競争力があるという話です。

キャリア職募集だと新入志願者が支援できないわけではありません。サポートしたと言うXライ会社はありません。判断は支援した会社で行うことです。 「え～こんにちは良い新入ですね」と考えることもできます。もちろん、SCSS優待事項を記載していない会社も志願者の個人ポートフォリオホームページにスキルパートに「SCSS(SASS)可能」と書かれているのも競争力になることがあります。ところで「SCSS(SASS)可能」だけでなく、本物のSCSS(SASS)学習して実力があり、その実力を証明するSCSS(SASS)パブリッシング結果を皆さんが見せることができれば就職と離職のためにかなり良い競争力になると確信しています。 。

_{▲仮想クラスとして活用した生きたアニメハート}

_{▲GRIDでピグマ(Figma)ロゴを作る}

_{▲アコーディオンドロップダウンナビ（Only SCSS、No JavaScript）}

_{▲アコーディオンドロップダウンコンテンツ（with SCSS+JQUERY）}

_{▲光るCSSチェックボックスボタン(Variable, Color Function)}

_{▲ログインフォームデザイン（属性選択者、Googleフォントアイコン）}

_{▲ GRIDレスポンシブポートフォリオセクションレイアウト(Blog Post Style) - フルスクリーンモーダル}

_{▲ GRIDレスポンシブポートフォリオセクションレイアウト(Blog Post Style) - レスポンシブレイアウト}

_{▲GRIDレスポンシブポートフォリオセクションレイアウト(Project Info Style) - フルスクリーンモーダル/モバイルモックアップ}

_{▲ GRIDレスポンシブポートフォリオセクションレイアウト(Project Info Style) - レスポンシブレイアウト}

_{▲iPhoneモバイルモックアップ（Mobile Mockup）SCSSにする}

_{▲モバイルモックアップ（Mobile Mockup）を活用してモバイルWebの成果物を見せる（Multi View）}

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

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

また、JayQueryのJavaScriptの先行能力は必要ありません。 SCSS（SASS）理論と活用に関する内容が主なものであるため、負担はありません。

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

ビジュアルスタジオコード（Visual Studio Code）で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。テキストエディタでは、Visual Studio Codeを使用しない場合は、Live Sass Compilerの使用と環境設定がビジュアルスタジオコードベースで説明されているので、なるべく使用することをお勧めします。

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

※コーディングワークスYouTubeチャンネルにビジュアルスタジオコード（Visual Studio Code）の使い方やエクステンション映像が詳しく用意されているので関連映像をぜひ！ご覧ください。

• ビジュアルスタジオコード（Visual Studio Code）の使い方と環境設定
• ビジュアルスタジオコード（Visual Studio Code）でのEmmetの使い方
• ビジュアルスタジオコードでCSSを変更するときに上がるフルリロードを防ぐ
• ビジュアルスタジオコード（Visual Studio Code）必須Extensionのインストールと使い方

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

Q）理論例完成本、実践例完成本、参考資料はどこからダウンロードできますか？

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

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

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

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

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

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

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

Q) 例制作しながら出てくる中級CSS理論説明映像はありますか？

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

Q）勉強して知らないことがあれば質問はどこにありますか？

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

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

学びながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードの両方をアップロードする必要があります。そして、コードをアップロードするときは、ビジュアルスタジオコードキャプチャエクステンション、CodeSnapを使用すると便利です。ビジュアルスタジオコードキャプチャエクステンション、CodeSnapの使い方については、以下のコーディングワークスブログにある内容をご覧ください。

■コードキャプチャエクステンションCodeSnapの使い方： https: //www.inflearn.com/blogs/1672

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

▲国費支援パブリッシング過程 私に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. [紹介ビデオ] SCSS(SASS)+ GRID+FLEX ポートフォリオ 実践パブリッシング

• [レクチャー紹介ビデオ] SCSSとFlex、Gridによる本番ポートフォリオの公開
• [実践例制作ノート] SCSS(SASS)+GRID+FLEX 実戦ポートフォリオパブリッシング

セクション1.ビジュアルスタジオコードでLive Sass Compilerを設定して使用する方法

• SCSS（SASS）を使用する理由とSASSとSCSSの違い
• コンパイル（Compile）とCSSプリプロセッサ（Pre-processor）とは？
• ビジュアルスタジオコードでLive Sass Compilerを設定して使用する（1）
• ビジュアルスタジオコードでLive Sass Compilerを設定して使用する（2）
• SCSS メモ & ヒント (Tip) – コンパイルされた CSS コードに空白行を取り除く
• Live Sass Compiler設定でmapファイルとVendor Prefixesを生成しない

セクション 2. SCSS コア理論 (Essential Theory)

• SCSSコア理論(01) - セレクタのネスト(Nesting)
• SCSSコア理論(02) - 親セレクタ参照(&)と注釈処理
• SCSSコア理論（03） - 親セレクタリファレンス（＆）アプリケーション
• SCSSコア理論（04） – 代表的なCSSセレクタSCSSで作成
• SCSSコア理論（05） - 親セレクタリファレンス（＆）仮想クラス
• SCSSコア理論（06） - 親セレクタ参照（＆）属性選択子
• SCSSコア理論（07） - 親セレクタの入れ子になる@at-root
• SCSSコア理論（08） – プレフィックスを使用してCSS属性を自動生成する
• SCSSコア理論（09） – 仮想クラス：isでセレクタの重複を減らす
• SCSSコア理論(10-1) - 変数(Variables) 01
• SCSSコア理論(10-2) - 変数(Variables) 02
• SCSSコア理論（10-3） - 変数（Variables）有効範囲とCSS変数宣言
• SCSSコア理論（11-1） - 外部ファイルを取得する@import
• SCSSコア理論（11-2） - @importに分割されたファイルを読み込む
• SCSSコア理論(12) - 演算子(Operations), 出力ウィンドウを取り除く
• SCSSコア理論（13-1） - グループを宣言する@mixin、グループを使う@include
• SCSSコア理論（13-2） - @mixinと@includeを適用する
• SCSSコア理論（13-3） - @mixinと@includeを活用したボタンデザイン
• SCSSコア理論（13-4） - @mixinのパラメータ（引数）を@includeとして使用する
• SCSSコア理論（14） - セレクタ属性を取得する@extend
• SCSSコア理論（15） - @extendで使用するプレースホルダーセレクタ％
• SCSSコア理論(16) - 多変数宣言、組み込み関数(map-get)

セクション 3. SCSS コア理論の活用例 (Examples of using)

• 主要なCSSセレクタ、主要な仮想クラスを活用する
• @importでreset.cssとnormalize.cssを接続する
• @mixinを入れ子にしてテキストをフォーマットする
• @mixin配列（Array）にパラメータを使用し、@includeで引数を返す
• よく使うエフェクトを@mixinと@includeで再利用
• 特定のセレクタCSSプロパティを取得する@extendを使用してCSSデザインを再利用する
• プレースホールド（％）セレクタでCSSセレクタを接続選択子に整理する
• @mixinでパラメータを利用してさまざまなBorder Radiusを作成する
• 親要素を参照して一貫性のあるhtmlレイアウト構造を作成する

セクション 4. SCSS+GRID+FLEX 本番ポートフォリオパブリッシング

• 仮想クラスを活用した生きているアニメーションハート
• GRIDでフィグマのロゴを作成する
• アコーディオンドロップダウンナビ（Only SCSS、No JavaScript）01
• アコーディオンドロップダウンナビゲーション（Only SCSS、No JavaScript）02
• アコーディオンドロップダウンコンテンツ（with SCSS+JQUERY）
• 輝くCSSチェックボックスGoogleアイコンボタン（Variable、Color Function）01
• 輝くCSSチェックボックスGoogleアイコンボタン（Variable、Color Function）02
• ログインフォームデザイン（プロパティ選択者、Googleフォントアイコン）01
• ログインフォームデザイン（プロパティ選択者、Googleフォントアイコン）02
• GRIDレスポンシブポートフォリオセクションレイアウト（Blog Post Style）01
• GRIDレスポンシブポートフォリオセクションレイアウト（Blog Post Style）02
• GRIDレスポンシブポートフォリオセクションレイアウト（Blog Post Style）03
• GRIDレスポンシブポートフォリオセクションレイアウト（Blog Post Style）04
• [ミッション＃01] MixinsとVariables個別ファイルを作成してインポートする（Blog Post Style）
• GRIDレスポンシブポートフォリオセクションレイアウト（Project Info Style）01
• GRIDレスポンシブポートフォリオセクションレイアウト（Project Info Style）02
• GRIDレスポンシブポートフォリオセクションレイアウト（Project Info Style）03
• GRIDレスポンシブポートフォリオセクションレイアウト（Project Info Style）04
• GRIDレスポンシブポートフォリオセクションレイアウト（Project Info Style）05
• [ミッション #02] Mixins, Map-get, Reset 個別ファイルを作成してインポートする (Project Info Style)
• GRIDレスポンシブポートフォリオセクションレイアウト(Project Info Style) – Full Screen
• iPhoneモバイルモックアップ（Mobile Mockup）SCSSにする01
• iPhoneモバイルモックアップ（Mobile Mockup）SCSSにする 02
• iPhoneモバイルモックアップ（Mobile Mockup）SCSSにする 03
• モバイルモックアップ（Mobile Mockup）を活用してモバイルWeb成果物を表示する（Multi View）

セクション 5. 完成本と受講生学習資料のダウンロード

• [完成本] SCSS コア理論(Essential Theory)
• [完成版] SCSS コア理論活用例(Examples of using)
• [完成版] SCSS+GRID+FLEX 本番ポートフォリオパブリッシング
• [参考資料]パブリッシングのための特殊記号英語表現（PDF）
• [参考資料] エミット(Emmet) 主要チート整理(PDF)