グリッド(Grid)の核心理論と実用的な活用
最高のレスポンシブレイアウト作成方法、CSSグリッド~!! グリッド(Grid)の核心理論と実践活用例を通して、CSSグリッドを完璧に理解することができます。また、核心理論を活用したさまざまな実践例があるので、実務活用のための十分な練習もできます。グリッドの核心理論は、動画だけでなくPDF教材としてダウンロードできます。中級パブリッシャーになるための必須コースであるCSSグリッドの核心理論と実践活用を習得すれば、就職だけでなく、パブリッシャーとして実務で十分な競争力を得ることができます。
初級者のための講座です。
こんなことが学べます
CSSグリッドのコア理論によるパブリッシング実践能力の向上
CSS グリッド(Grid) レスポンシブ ウェブ パブリッシング制作能力(メディアクエリ)
グリッド (Grid) 反応型 Web サイトの公開スキルとノウハウの向上
パブリッシャー就職のためのGridの核心理論と実践UI制作能力
パブリッシャーレスポンシブレイアウトスキルアップ（Skill Up）のための最速の方法、
CSSグリッドでレスポンシブレイアウトを征服しましょう！
🔊 CSSグリッドとは？
CSS Grid（グリッド）は、水平と垂直、すぐにRow（行）とColumn（列）でレイアウトを製作するシステムで、特にレスポンシブウェブを製作するように最適化されたCSS新技術です。 Flex（フレックス）でレスポンシブウェブを作るレイアウト方式も良いですが、CSSグリッドレイアウト制作方式は中級パブリッシングでジャンプアップするための必須コースです。
🔊なぜCSSグリッドを使用するのですか？
現在、レスポンシブウェブを作成せずに制作されるウェブサイトはあまりありません。だから、どのようにレスポンシブウェブを作成するか、パブリッシャーはいつも悩んでいます。従来のウェブサイト制作方式は、反応型に形を変更する作業に空手が多すぎます。フレックスも良い選択肢ですが、レスポンシブに変更することはできません。
このような悩みを漢方に解決する反応型レイアウト制作方式、CSSグリッド（Grid）です。それで、グリッドを使うべきだと実務パブリッシャーは言っています。
🔊中級レベルに成長するには、今はグリッド（Grid）活用能力です。
中級パブリッシングのスキルを備えたコースは、既存のレイアウトCSSの制作方法を十分に学習し、フレックス（Flex）レイアウトの製作方法を習得し、実戦ウェブサイトを作ります。そして、CSS Grid（グリッド）のすべてのコア属性と活用例を通じて、確実なグリッド使用能力を備えています。
⭐コーディングワークスのCSSグリッド（Grid）講座の特徴は？
CSS Grid（グリッド）は、従来のレイアウト制作方式と全く異なる形で製作されます。だから初めて学ぶ人の立場ではとても見知らぬ文法とシステムのため、インターネットブログやYouTubeを通じてグリッド活用のための核心を習得することは容易ではありません。
そこで、コーディングワークス「グリッド（Grid）コア理論と実戦活用例」講義では、 CSS Grid（グリッド）のすべてのコア属性の理論と活用法を盛り込んだコーディングワークス独自教材（ PDF）を通じて学習し、教材を基準に属性別に制作された映像を通じて、グリッド属性の理解度を確実に把握できます。そのため、Grid（グリッド）が最初は不慣れですが、すぐに慣れると思います。
また、教材と映像を通じて学んだコア理論を実践例制作映像を通じてグリッドレイアウトコーディングポートフォリオも製作されます。
CSSグリッド（Grid）コア理論と実践活用例の制作過程
「約12時間のCSSグリッド反応型パブリッシング講義」
テキストエディタの使い方（5講義、約2.3時間）
CSSグリッド（Grid）コア理論（30講義、約5.2時間）
CSSグリッド（Grid）タイプ別実戦UI例制作（20講義、約4.2時間）
CSSグリッド（Grid）コア理論PDF教材提供
レッスンで制作されたすべてのサンプル完成版をダウンロードする
▼CSSグリッド（Grid）コア理論レスポンシブコア理論PDF教材（66ページ）
▼CSSグリッド（Grid）コア理論を活用した反応型実戦例 製作ノート PDF教材（19ページ）
▼CSSグリッド（Grid）コア理論を活用した反応型実戦例
▼CSSグリッド（Grid）コア理論を活用した反応型実戦例
▼CSSグリッド（Grid）コア理論を活用した反応型実戦例
▼CSSグリッド（Grid）コア理論を活用した反応型実戦例
🙋🏻♂️講義受講のための選手知識
今回の講義は、グリッドをテーマにグリッドコア理論から応用と実践例を製作する過程です。そして最後にグリッドとして配置するレスポンシブウェブサイトの制作過程も一緒にあります。今回の講義は、グリッド反応型というテーマをテーマに製作された講義という特徴がありますが、一般的なパブリッシング講義と同じです。
グリッドコア理論は基礎からじっくり進んでいるので、あまりにも恐れないで始めてください。ただし、HTML+CSS の基本的な理解度は持っていなければなりません。今少し足りない場合は、HTML + CSSを勉強しながらグリッド（Grid）コースを聞くことができます。
私の講義の中には、「HTML + CSS + JQUERYポートフォリオ中級実践パブリッシング講義」があります。この講義にある理論内容と実戦例制作内容が今回のレスポンシブウェブサイト制作必要な内容がほぼすべて入っています。まもなく、HTML+CSS+JQUERY 基本機をしっかり作れる講義だと思います。
今回のレスポンシブウェブサイト制作でいくつかを除いては「HTML+CSS+JQUERY ポートフォリオ中級実戦パブリッシング講義」にある内容を1回目程度学習していただくと従うことがずっと簡単になると思います。
結論は...
入門やちょうど始める方だけでなければついてくるのは大きな問題ないと思われます。
他の講義を通じてHTML+CSSの基礎を身につけて来られたら、十分に追いつくだけでなく、なぜこれをするのかについての理解度を持ち、レスポンシブなウェブサイトの制作過程を終えることになると思います。
🙋🏻♂️効率的な学習のための学習方法
- [ダウンロード] グリッド(Grid) コア理論ガイドブック(PDF)および完成本にあるコーディングワークス GRID ガイドブック(Guide Book)-Part 1(核心理論)ファイルを見ながら、コア理論映像を見れば役に立ちます。提供されるPDF教材に基づいて、コア理論講義が構成されています。
- セクション 6. [ダウンロード] グリッド(Grid) コア理論ガイドブック(PDF)と完成本にあると[Part 2] Grid 属性を使った活用例と実践例始めましょう。学習時に完成したので、index.htmlとstyle.cssファイルを削除して最初から始めてください。
🙋🏻♂️講義に関する予想される質問と必読事項
Q. 例制作しながら出てくる中級CSS理論説明映像はありますか？
A. '例制作に基礎理論に出ていない中級理論がたくさん出ていますが、中級理論授業はどこで聞きますか？ 'これらの質問が掲示板に頻繁に来ます。
今のコースは初級パブリッシングの例制作をする過程ではありません。初級～中級パブリッシングの例を製作する過程です。だからCSS初中級理論はある程度知っておくべきです。だから必ずしもよく知る必要はありません。 CSS超中級理論は、例を作成しながら継続的に繰り返します。そして、コーディングワークスのYouTubeパブリッシングチャンネルに[中級理論] CSS中級理論というプレイリストに、サンプル制作に必要な必須中級理論映像が詳しくありますので、今のコースを聞きながら中級理論を並行しておくと良いでしょう。
Q.このコースを受講すれば、実務でパブリッシャーとして働くことができますか？
A. この過程でパブリッシャー就職のためのパブリッシングスキルを全て扱うわけではありませんが、CSSグリッド(Grid)の核心理論と実戦活用例でレスポンシブウェブを作ることができるということだけで十分な出発だと思います。
Q. 今回のプロセスに HTML+CSS+JQUERY パブリッシング理論を説明する理論パーツは別にありませんか？
A. 今受講する過程はCSSグリッドをテーマにグリッドを勉強し、反応型実践例を製作する過程であり、CSSグリッド理論を除いて入門初級過程に必要な基礎パブリッシング理論パーツは別にありません。コーディングワークスパブリッシングYouTubeチャンネルや基本理論パートと実践例制作学習は、異なるコースを通じてスキルアップすることをお勧めします。
Q. 勉強して知らないことがあれば質問はどこにありますか？
A. ご質問がございましたら、[質問＆回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして 質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がとても簡単です。
Q. 例 完成本、教材PDFファイルはどこで受け取りますか？
A. 受講生に提供されるファイルは最後のセクション 6. [ダウンロード] グリッド(Grid)コア理論ガイドブック(PDF)と完成本の両方からダウンロードできます。
Q. 講師様授業中にパブリッシャー就職本当の実戦ガイドを先に見ればいいでしょうか？
A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック（PDF）では「パブリッシング基本機とは？」 「好みのコーディング習慣と原則、キャリアのようにパブリッシングする」などパブリッシャーとして必ず知っておくべき内容を丁寧にまとめました。パブリッシャー就職実践ガイド電子書籍（PDF）をまず見て、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。
❤コーディングワークスの受講生に来たパブリッシャー合格ニュース
▲国費支援パブリッシング過程 私に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
👨🏼🏫講師紹介
- （現在）フリーランサーフロントエンドパブリッシャー
- ダージョはコンピュータアカデミーWebパブリッシングインストラクター
- 今コンピュータアカデミーWebパブリッシングインストラクター
- フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
- 今コンピュータアカデミーウェブデザイン機能士実技資格証明
- ラクピアICTトレーニングセンターフロントエンドパブリッシングマスターコース講師
- イージー＆エデューフロントエンドパブリッシング、UI/UXデザイン
- HTML + CSS + JQUERYパブリッシングYouTubeチャンネル「コーディングワークス」を運営
- ⚡ コーディングワークスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks
インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク
こんな方に
おすすめです！
学習対象は
誰でしょう？
CSSグリッド(Grid) 新技術を身につけて実務に活用したい方
中級レベルの出版社で、CSS グリッドのスキルが必要な方
出版社への就職のために CSS グリッド (Grid) ポートフォリオが必要な方
CSSグリッド（Grid）レスポンシブ実践例制作を経験したい方
CSS グリッド (Grid) 個人ポートフォリオ ホームページの作成が必要な方
12,271
受講生
714
受講レビュー
2,084
回答
4.9
講座評価
23
講座
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
カリキュラム
全体
69件 ∙ (12時間 24分)
講義資料（こうぎしりょう）: