最高のフロントエンド CSS フレームワーク、UIkit

ミニマリズム、クリーンでスタイリッシュなUIデザイン

パブリッシャーの雇用のための個人的なポートフォリオの成果
最もスタイリッシュに見せて就職競争力を高める
最高のCSSフレームワーク、UIkit
パブリッシャーにとって必須のCSS Frameworks活用能力のため
体系的な学習と実践例

なぜ？ CSSフレームワークを書くべきですか？

• CSSフレームワークを使用して、Formフォーム、Grid、Component、Buttonなどに事​​前定義されたClassとIDを使用して、パブリッシングと開発プロセスを強化できます。
• CSSフレームワークは、すべてのブラウザとブラウザのバージョンでシームレスにレンダリングされるクロスブラウジングに最適な選択です。
• CSSフレームワークにより、生産性を向上させ、パブリッシングと開発ワークフローを最適化できます。
• CSSフレームワークのグリッドシステムにより、きれいなレスポンシブレイアウトをすばやく簡単に作成できます。

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

セクション2. UIkitフレームワークコンポーネントを活用した本番パブリッシング

UIkitが提供するさまざまなコンポーネントを紹介し、個々のコンポーネントを使用するためのHTML構造とCSSクラスについて詳しく学びます。使用法に基づいて本番パブリッシングの例を作成します。 Accordion、Slideshow、Dropdown、lightbox、Off-canvas、Modal、Swicher、Tabなど、最も中心となるUIkitコンポーネントを扱います。

セクション3. UIkitフレームワークコンポーネントを活用したレスポンシブWebレイアウト

UIkitが提供するレスポンシブレイアウト関連コンポーネントを、個々のコンポーネントを使用するためのHTML構造とCSSクラスについて詳しく学習します。 Column、Width、Grid、Slider、Filterなどのレスポンシブレイアウトコンポーネントを活用して、レスポンシブレイアウトの実用的なパブリッシングの例を作成します。

セクション 4. UIkit コンフォータントで作る個人ポートフォリオホームページ

パブリッシャーの就職には個人ポートフォリオホームページの制作は必須です。単に「ある」では就職できません。個人のポートフォリオのホームページには、豊富で豊富なパブリッシング結果が含まれている必要があります。そして、そのパブリッシング結果を人事担当者にスタイリッシュに見せることが重要です。個人のポートフォリオホームページでパブリッシング結果をスタイリッシュに表示するために、Slider、Modal、Lightbox、Grid、Widthなどのコンポーネントを組み合わせて、Mobile Web Section、Website Publishing Section、Practical Coding Sectionをどのように構成し、結果物をどのように見せるかについての詳細な説明と例を通して学習します。

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

受講生の参考資料を含む、セクション2、セクション3、セクション4で作成されたすべての完成したファイルをダウンロードできます。

パブリッシャー就職のために...

出版物の成果を多様にすることが重要です。
そして、パブリッシングの成果を個人のポートフォリオホームページにどれほどスタイリッシュに見せているのかは、パブリッシャー就職にとって非常に重要です。
パブリッシャー就職個人ポートフォリオのホームページを制作し、その中にパブリッシング結果を最もスタイリッシュに見せることができるCSSフレームワークがまさにUIkitです。
モバイルWebパブリッシングワーク、Webサイトパブリッシングワーク、本番パブリッシングワークをUIkitのコンポーネントであるLightbox、Full Screen Modal、Slider、Slideshow、Filterを組み合わせて、新しいタブを開かずに人事担当者が快適で一目瞭然に見えるように製作するすることができます。

コーディングワークスのCSSフレームワーク、UIkit講座を通じて、パブリッシング結果を最もスタイリッシュに見せる方法を学ぶことをお勧めします。

コーディングワークスがUIkitを推奨するのはなぜですか？

• ミニマリズム、クリーンでスタイリッシュなUIデザイン
• パブリッシャーにぜひ！必要なさまざまなJavaScriptコンポーネントのサポート
• 使いやすい直感的な構造のCSSフレームワーク
• JavaScriptのコーディングなしでコンポーネントオプションを調整するCSSコーディング方式
• ジェイクエリを使用しない純粋なJavaScript（Vanila JavaScript）ベースのコンポーネント
• 最高のクロスブラウジングCSSフレームワーク
• CSSフレームワークランキングトップ5に入る 認知度と安定性

UIkit公式ウェブサイト：https: //getuikit.com/docs/introduction

Best CSS Frameworks for Web Publisher 関連
コーディングワークス Inflearn ブログ記事を見る: https://www.inflearn.com/blogs/1071

UIkit公式ウェブサイトコンポーネントのプレビュー： https ://getuikit.com/docs/accordion

▲UIkitフレームワークコンポーネント - Accordion

▲UIkitフレームワークコンポーネント - Alert

▲UIkitフレームワークコンポーネント - Countdown

▲UIkitフレームワークコンポーネント - Drop & Tooltip

▲UIkitフレームワークコンポーネント - Heading

▲UIkitフレームワークコンポーネント（レスポンシブ） - Label & Link

▲UIkitフレームワークコンポーネント - Leader

▲UIkitフレームワークコンポーネント（レスポンシブ） - Lightbox

▲UIkitフレームワークコンポーネント - Centered Modal

▲UIkitフレームワークコンポーネント - Full Screen Modal

▲UIkitフレームワークコンポーネント - Off-canvas

▲UIkitフレームワークコンポーネント - Scroll & Totop

▲UIkitフレームワークコンポーネント - Scrollspy (Scroll Reveal Animation)

▲UIkitフレームワークコンポーネント（反応型） - Slideshow

▲UIkitフレームワークコンポーネント - Switcher & Tab

▲UIkitフレームワークコンポーネント - Toggle

▲UIkitフレームワークコンポーネント（反応型） - Column

▲UIkitフレームワークコンポーネント（反応型） - Width & Grid

▲UIkitフレームワークコンポーネント（反応型） - Width & Grid

▲UIkitフレームワークコンポーネント（反応型） - 反応型 Width & Grid

▲UIkitフレームワークコンポーネント（レスポンシブ） - Slider

▲UIkitフレームワークコンポーネント（レスポンシブ） - Content Slider

▲UIkitフレームワークコンポーネント（反応型） - Filter

▲個人ホームページポートフォリオを表示する #01(Mobile Web Publishing Section)

▲個人ホームページポートフォリオを表示する #02(Website Publishing Section)

▲個人ホームページポートフォリオを表示する #03(Practical Publishing Section)

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

まず、HTML + CSSのある程度の理解と活用経験が必要です。この講義は、基本的なパブリッシング能力を持つ方を対象に作られた講義です。参考にしてください！

また、 UIkitには独自のすべてのスクリプトが含まれているため、非常に特別な場合を除いて学習し、実践的な例を作成するためにJavaQorやJavaScriptのコーディングは必要ありません。

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

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

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

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

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

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) 例の学習順序は最初から順に学習するのですか？

例 学習順序を個別の講義は、学習者が望む順序にしても大きな群れはありません。ただし、セクションごとに学習する場合は、順番に学習することをお勧めします。 

たとえば、セクション3を学習し、セクション2を学習しないでください。 [セクション2]→[セクション3]→[セクション4]の順番で学習してください。

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

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

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

▲国費支援パブリッシング過程 私に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. [紹介ビデオ] Best CSS Framework、UIkitフレームワーク

• [レクチャー紹介ビデオ]最高のフロントエンドCSSフレームワーク、UIKit
• [レクチャー紹介ビデオ] CSSフレームワーク（Frameworks）を比較する - Bootstrap vs UIkit

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

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

セクション2. UIkitフレームワークコンポーネント（Components）を活用した本番パブリッシング

• UIkitフレームワークのインストール方法と主要コンポーネント（Components）の紹介
• UIkitコンポーネント（使用法） – Accordion
• UIkitコンポーネント（本番パブリッシング） - Accordion
• UIkitコンポーネント（使用法と実践パブリッシング） - Alert
• UIkitコンポーネント（使用法と実践パブリッシング） - Countdown
• UIkitコンポーネント（使用法と実践パブリッシング） - Cover
• UIkitコンポーネント(使用法) - Drop & Tooltip
• UIkitコンポーネント（本番パブリッシング） - Drop & Tooltip
• UIkitコンポーネント（使用法と実践パブリッシング） - heading（さまざまなスタイルでタイトルを定義する）
• UIkitコンポーネント（使用法、検証） - Label & Link
• UIkitコンポーネント（本番パブリッシング） - Label & Link
• UIkitコンポーネント（使用法と実践パブリッシング） - Leader
• UIkitコンポーネント（使用法） – Lightbox
• UIkitコンポーネント（本番パブリッシング） – Lightbox（フォトギャラリー）
• UIkitコンポーネント（本番パブリッシング） – Lightbox（ポートフォリオHTMLの結果を表示）
• UIkitコンポーネント（使用法） – Modal
• UIkitコンポーネント（本番パブリッシング） – Modal（ニュースレターを購読するためのモーダルウィンドウ）
• UIkitコンポーネント（本番パブリッシング） – Modal（iframeポートフォリオフルスクリーンモーダル）
• UIkitコンポーネント（使用法と実践パブリッシング） - Off-canvas
• UIkitコンポーネント（使用法と実践パブリッシング） – Scroll & Totop
• UIkitコンポーネント（使用法と実践パブリッシング） - Scrollspy
• UIkitコンポーネント（使用法と実践パブリッシング） – Slideshow（基本使用法、Viewport）
• UIkitコンポーネント (使用法と実践パブリッシング) –Slideshow(Content Overlay, Transition)
• UIkitコンポーネント(使用法と実践パブリッシング) - Switcher & Tab(タブメニューコンテンツ)
• UIkitコンポーネント(使用法と実践パブリッシング) - Switcher & Tab(タブメニューコンテンツアプリケーション)
• UIkitコンポーネント（使用法と実践パブリッシング） - Toggle
• UIkitコンポーネント（使用法と実践パブリッシング） - Video

セクション3. UIkitフレームワークコンポーネントを活用したレスポンシブWebレイアウト

• UIkitコンポーネント（使用法） - レスポンシブWebレイアウト（Column）
• UIkitコンポーネント（本番パブリッシング） - レスポンシブWebレイアウト（Width基本使用法）
• UIkitコンポーネント（実用的なパブリッシング） - レスポンシブWebレイアウト（Widthレスポンシブレイアウト）
• UIkitコンポーネント (実用パブリッシング) - レスポンシブ Web レイアウト (Grid)
• UIkitコンポーネント（使用法と実践パブリッシング） – Slider（レスポンシブ）
• UIkitコンポーネント（使用法と実践パブリッシング） – Filter（コーディングワークスロードマップフィルタ）

セクション 4. UIkit コンフォータントで作る個人ポートフォリオホームページ

• 個人のホームページのポートフォリオを表示する #01(Mobile Web Publishing Section)
• 個人ホームページのポートフォリオを表示する #02(Website Publishing Section)
• 個人ホームページのポートフォリオを表示する #03(Practical Publishing Section)

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

• [完了]セクション2. UIkitフレームワークコンポーネントを活用した本番パブリッシング
• [完了]セクション3. UIkitフレームワークコンポーネントを活用したレスポンシブWebレイアウト
• [完成本]セクション4. UIkitコンフォータントで作る個人ポートフォリオホームページ
• ウェブサイト全体の公開のための機能定義書（PDF）