中級以上の出版向け CSS3 のすべて

[中上級パブリッシングのためのCSS3のすべて]講義で
不十分なパブリッシング理論を確実に備えることができます。
中上級パブリッシングの実力を備えるための必須コース！

曖昧な理論実力を中上級実力で確実に！
しっかりした理論のスキルは、パブリッシング結果の違いを生み出します。

CSSセレクタ、CSSフロートとポジション、 display属性、ボックスモデルとテーブルスタイル、CSS仮想クラス、活用度の高いCSS3属性を活用した実戦スキルとヒントなど、中上級パブリッシングのためのCSS3のすべてが講義にあります。

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

ビジュアル スタジオ コード 必須の使い方とエクステンションの使い方を詳しく学びます。また、テキストエディタの使用に不可欠なエミットの使い方も詳細に学習します。

セクション2. CSSセレクタのすべて

基本必須セレクタ、セレクタをタグとともに使用、クラスネスト、隣接兄弟セレクタ、属性セレクタ、メディアクエリでセレクタの一致、セレクタ優先順位などCSSの始まりであり、CSS初級と中級を分ける基準となるセレクタのすべてについて学習します。

セクション3. CSSフロートとポジションすべて

Flex と Grid の使用能力とは別に、フロートとポジションのプロパティはすべてのパブリッシング操作で基本となります。 CSS フロートとポジション すべてでパブリッシングの基礎となるフロートとポジション属性の完全な理解度を持つことができます。

セクション 4. display プロパティのすべて

CSS理論はすべて重要ですが、ひとつだけ選ぶと断言してもdisplay属性の理解度です。レイアウト設計などの巨視的なパブリッシング操作から、ボタンの作成、細かい要素の配置など、すべてのパブリッシング操作に影響を与えるディスプレイプロパティのすべてを学習します。

セクション5.ボックスモデル（Box-Model）とテーブル（Table）スタイルのすべて

要素（Element）のサイズ、余白、間隔など、個々の要素のボックスモデル（Box-Model）についてすべてを学習します。また、きれいなテーブルデザインのためのテーブルスタイルを学びます。

セクション6. CSS仮想クラス（Pseudo Class）のすべて

中上級のパブリッシングのスキルに進むために不可欠な理論は、 CSS仮想クラスの理解と活用能力です。パブリッシング実務で使用するCSS仮想クラス（Pseudo Class）のすべてを学びます。

セクション7. 活用度の高いCSS3属性を活用した実戦スキル(Skill)とヒント(Tip)

理論に限定されない数多くのパブリッシングスキルとノウハウがあります。理論をよく知っているのと、これをこういう時に活用する能力は別個です。しっかりした理論をもとに、実務で必ず必要なパブリッシングスキルとノウハウを学びます。

Q) コーディングワークス講義中 [HTML+CSS+JS ポートフォリオ本番パブリッシング] シーズン1、2とどう違うのですか？

[HTML+CSS+JS ポートフォリオ実践パブリッシング] シーズン1、シーズン2講義は実戦パブリッシングの例制作を​​中心に構成された講義です。もちろん、理論の説明もありますが、例制作を中心に進める授業なので、理論の説明の部分は多くありません。しかし、[中上級パブリッシングのためのCSS3のすべて]講義は本番パブリッシングをうまくするためのCSS理論を集中的に学習します。だから本番パブリッシングの例制作は比重が少ない。完全に中上級パブリッシング理論をお知らせする中上級CSS理論講義です。

Q) 頑強後に期待できるパブリッシングの実力はどれだけ向上しますか？

明らかな答えですが、ケースバイケースです。しかし、[中上級パブリッシングのためのCSS3のすべて] 授業内容は実務で働く中上級パブリッシャーが知っていて、現実的に実務で適用しているスキルをほぼすべて学ぶことになります。 HTML入力する時間を短縮し、より多くの理論の内容を授業するコースです。もちろん講義には多くの内容の理論内容がありますが、これらを繰り返して応用して自分のものに作り出すのは受講生の分け前と考えられます。

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

まず、HTML + CSSの基本的な理解が必要です。初級段階の受講生は可能ですが、入門段階の受講生には少し冷やすことができます。入門段階の受講生は、コーディングワークスのYouTubeチャンネルにあるHTML+CSSの基礎をある程度学習し、講義で来れば講義をうまく消化できると思います。

Q）画像にHTML、CSSをコーディングする全体のプロセスが含まれていますか？

今回の講座は学習する理論事項が多いです。だから、タイピング時間を短縮し、学習量を増やすためにHTMLコードをタイピングする時間がビデオには別にありません。ビデオの開始時にHTML構造が表示され、対応するHTMLを入力して準備すると、CSSコーディングは1つ1つ入力しながら説明されます。そのため、ビジュアルビジュアルスタジオコード（Visual Studio Code）の使い方とエミット（Emmet）の使い方を十分に習得して学習することをお勧めします。

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

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

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

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

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

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

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

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

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

学習中に次のセクションに進むと、前のセクションの内容をもう一度参照して繰り返します。そのため、学習順序はセクションの順序に合わせて学習することをお勧めします。

ただし、セクション7. 活用度の高いCSS3属性を活用した実戦スキル(Skill)とチップ(Tip)は、必要な講義を受講生が順番に関係なくご覧いただくことができます。

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

質問がある場合は、[質問＆回答]掲示板に文を残すとすぐではなくても確認されたら回答します。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。ですから、ご質問の際は気になる内容と一緒に作成中のHTML、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.講義紹介

• [講義紹介]中上級パブリッシングのためのCSS3のすべて

セクション1.ビジュアルスタジオコード（Visual Studio Code）の使い方

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

セクション2. CSSセレクタのすべて

• デフォルトの必須セレクタ、セレクタをタグと一緒に使用し、クラスをネストして使用する
• セレクタの適用優先​​順位が重要な理由（レスポンシブWebメディアクエリ構文）
• 隣接兄弟セレクタ（input、checked仮想クラス）
• 属性セレクタ（attribute selectors）01（デフォルト形式と注意点）
• 属性セレクタ（attribute selectors）02（文字列チェックを活用する）

セクション3. CSSフロートとポジションすべて

• フロート属性（水平配置、float属性継承）
• フロート属性（親要素の高さ値を求め、calc関数で四則演算）
• ポジション属性 (static, relative, absolute, fixed, sticky)
• ポジション属性（親要素子要素関係を結ぶ）
• ポジション属性（absolute、fixed、stickyの違い）
• ポジション属性親要素の内側と外側に位置する）
• ポジション属性（z-indexとポジション属性の優先順位）

セクション 4. display プロパティのすべて

• displayプロパティ（inline、inline-block、blockの特徴）
• displayプロパティ（displayプロパティを活用してHTML構造を簡単に作成）
• display属性（display属性の理解がない場合に生じる非Web標準コーディング）
• displayプロパティ（要素を見えないようにする3つの方法と違い）
• displayプロパティ（displayプロパティを完全に理解するための必須追加）
• display属性（list-item、table、FLEXとGRID、SCSS（SASS）活用能力の重要性）

セクション5.ボックスモデル（Box-Model）とテーブル（Table）スタイルのすべて

• ボックスモデル（Box Model）プロパティ（width、height、auto、inherit）
• ボックスモデル(Box Model) プロパティ(box-sizing)
• ボックスモデル（Box Model）プロパティ（margin、padding、マージンオーバーラップ、ネガティブマージン）
• ボックスモデル (Box Model) プロパティ (border, border-radius)
• テーブルスタイルのプロパティ（テーブルデザインのすべてのプロパティ）

セクション6. CSS仮想クラス（Pseudo Class）のすべて

• hover仮想クラス（aタグ状態仮想クラス、ボタンデザインのすべて）
• hover仮想クラス（hoverで作るボタンデザイン、ドロップダウンナビゲーション＆コンテンツ）
• 順序をチェックする仮想クラス（nth-child、first-child、last-child）
• 順序をチェックする仮想クラス（nth-child、nth-of-type、その他の順序をチェックする仮想クラス）
• 実践例（hover仮想クラス、順序チェック仮想クラス、position、display属性）
• before after 仮想クラス（基本活用、リスト Bullet と Badge、アイコンフォント Unicode）
• before after 仮想クラス（基本活用、リスト Bullet と Badge、アイコンフォント Unicode）
• before after 仮想クラス（図形とボタンの作成、ポジションの活用）
• before after 仮想クラス（図形とボタンの作成、ポジションの活用）
• before after 仮想クラス (背景画像の上にオーバーレイを使用)
• before after 仮想クラス (カスタム属性と attr 関数 - Notice Badge)
• before after 仮想クラス (カスタム属性と attr 関数 - Swap Hover Button)
• before after 仮想クラス (自動 Numbering する counter 関数)
• 実践例（before afterを活用したアニメーションライフレビューヘッダーUIデザイン）
• フォーム要素に書き込む仮想クラス（フォーム要素の基本的な理解）
• フォーム要素に書き込む仮想クラス（必須フォーム仮想クラス、ログインフォームCSSデザイン）01
• フォーム要素に書き込む仮想クラス（必須フォーム仮想クラス、ログインフォームCSSデザイン）02
• フォーム要素に書き込む仮想クラス（必須フォーム仮想クラス、ログインフォームCSSデザイン）03
• フォーム要素の入力にフォントアイコンを使用する（iタグ、before Unicode）
• フォーム要素に書き込む仮想クラス（検証、読み取り専用仮想クラス）
• 知っておくと非常に使いやすい仮想クラス（特定セレクタを除くnot）
• 知っておくと非常に使いやすい仮想クラス（選択者の重複を減らすis）

セクション7. 活用度の高いCSS3属性を活用した実戦スキル(Skill)とヒント(Tip)

• CSSの中央揃えのすべて（position、flex、grid、vertical-align、transform、place-items）
• imgタグのすべて（一時画像を入れる2つの方法、画像マージンを取り除く）
• CSS背景画像の活用のすべて、画像+グラデーションの同時使用
• 変数を使用して繰り返しコードを減らしてリサイクルする
• さまざまな視覚効果を与えるfilter属性とフィルタ属性値自動生成器
• 列（縦）に分割するcolumn-count属性（理論、レスポンシブレイアウト）
• 列（縦）に分割するcolumn-count属性（実例 - レスポンシブWebレイアウト）
• マウスイベントを無効にする pointer-events (実例 - Card UI Hover Effect)
• 最初の文字を飾る仮想クラス：first-letter
• あふれたテキストを減らすために作成するtext-overflow、white-spaceプロパティ
• テキスト書き込み方向の垂直方向の設定（writing-mode、transform-origin）
• 要素の割合を設定するaspect-ratio

セクション8.必須CSSコア理論と活用（コーディングワークスYouTubeリンク）とダウンロード

• ぜひ！学ぶべきコーディングワークスYouTube講義のビデオリストの紹介
• [ダウンロード] パブリッシング完成本（プロフィールカード、生後期、ログインフォーム、ログインフォーム：is仮想クラス）
• [ダウンロード] パブリッシング完成本（活用度の高いCSS3属性を活用した実戦スキルとヒント）
• [ダウンロード] CSS3のすべて！理論映像説明テキスト（PDF）

コーディングワークス

■[現在]フリーランサーフロントエンドパブリッシャー
■[現在] HTML+CSS+JQUERY パブリッシングYouTubeチャンネル「コーディングワークス」運営
■グリーンコンピュータアカデミーウェブパブリッシング講師
■ダージョウンコンピュータアカデミーWebパブリッシングインストラクター
■もうコンピュータアカデミーWebパブリッシング講師
■フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■UI/UX Webデザインポートフォリオ講義
■ウェブデザイン機能士実技資格講座講義
■イージー＆エデューフロントエンドUI/UXデザイン＆パブリッシング

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