Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Web Development

パブリッシングの核心理論PDF教材およびサンプルファイル(HTML+CSS+FLEX+JQUERY)

CodingWorks が長年の講義のノウハウを結集して制作した、HTML+CSS+FLEX+JQUERY パブリッシングの核心理論書教材。不要な内容を一切省き、必要な核心内容のみをまとめた最高のパブリッシング理論教材。パブリッシング入門のための核心理論書 PDF 教材とサンプルファイルのダウンロードコンテンツです。

  • codingworks
3시간 만에 완강할 수 있는 강의 ⏰
HTML/CSS
jQuery
Flex

学習した受講者のレビュー

こんなことが学べます

  • ウェブ パブリッシングの就職のために、パブリッシングの核心理論を学習する

  • HTML+CSS+JQUERY パブリッシングの核心理論

  • HTML の必須の核心理論

  • CSS の必須の核心理論

  • CSS 仮想クラスの核心理論

  • CSS Flex の基本理論

  • JQUERY 相互作用必須メソッド関数

✔️入門者にぜひ!必要な内容とヒントからなる理論教材と実習例制
✔️ 5年間の講義ノウハウが溶けたHTML+CSS+FLEX+JQUERYパブリッシング教材
✔️フロントエンドパブリッシング実務経験とオフライン講義ノウハウが集約されたPDF教材
✔️重い本を持っていないパブリッシングPDF教材が携帯電話の中に撮影〜!

💡 映像コンテンツではなくダウンロードコンテンツです。

  • コーディングワークスが長年のオフライン講義ノウハウを集大成したパブリッシング教材
  • コーディングワークス自己制作 HTML+CSS+FLEX+JQUERY パブリッシングコア理論教材
  • 不要な内容なしにぴったり!必要な核心内容だけをまとめた最高のパブリッシング理論教材
  • パブリッシングコア理論書 PDF教材とサンプルファイルダウンロードコンテンツ
  • 印刷して本で見ても遜色のない高画質PDF教材

💡パブリッシングコア理論PDF教材と理論例コンテンツの構成

1)核心と講義のノウハウが集約されたパブリッシングPDF教材(全187ページ)

  • HTMLコア理論(ブラケットの使い方、コア理論) - 45ページ
  • CSSコア理論(核心理論、仮想クラス) - 94ページ
  • FLEXコア理論(親属性、子属性、実践例) - 31ページ
  • JQUERYコア理論(核理論、相互作用メソッド関数) - 17ページ

2)HTML + CSS + FLEX + JQUERYパブリッシングコア理論htmlサンプルファイル(247個)

  • HTML理論例(html 20ファイル)
  • CSS必須コア理論例(html 72ファイル)
  • CSS仮想クラス理論例(html 37ファイル)
  • CSS Flex(Flex)理論例(html 27ファイル)
  • JQUERY理論例(html 65ファイル)
  • 理論学習用練習画像

💡パブリッシング勉強したいのですが、市中に出てきた教材は?

  • 一度厚すぎて分量が多い...
  • 何が重要なのか、それほど重要ではないのかわからない。
  • すぐに必要な核心だけを知りたいのですが、分量が多すぎて厳しさが出ません...
  • あまりにも本格的に目が覚めるように文がたくさん書かれている。
  • 言葉も難しく、文も多すぎます...
  • オフライン講義のように核心だけ撮ってくれる講義教材があってほしい。

効果的な学習のためにぜひ!コーディングワークスパブリッシングYouTubeを参照してください。


コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

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

▼コーディングワークス受講生がパブリッシャー就職後にお送りいただいたメール(2021.10.13)

先生こんにちは:)

先生 Inflearn 講義聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか?😊😊

相違ではなく、
先生にアドバイスを得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります!

でも!
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました!
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー!仕事だけができる会社に入るようになりました。

キャリア職のパブリッシャーを求める会社でしたが、新入社員に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました

これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました!

実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました!

学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます

切に欲しかったし、
先生が言ったように信じていたら、本当に良い結果が出ました。

本当にありがとうございました!

コロナに注意してください。
また良い講義で会いたいです:)

▼コーディングワークス受講生がパブリッシャー就職後にお送りいただいたメール(2021.11.26)

コーディングワークス先生、Inflearn講義の受講者です〜

先生こんにちは〜Inflearn受講生OOOです〜先生のメールアドレスは他の受講生の答え見てわかりました..😊😊
ありがとうご挨拶お願いします

これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一面面接に合格して出勤することにしました。 本当にありがとうございました。

実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が、本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ~ 😊😊

その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。

これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング~!

📖コーディングワークスパブリッシング理論PDF教材プレビュー

🌟 HTML教材の授業内容

  1. ウェブ制作に関する参考用語の整理
  2. Bracketsのインストールと使い方
  3. ダミーテキスト(Dummy Text)ハングル
  4. HTML 基本文書構造の作成
  5. テキスト書式を飾る(主な書式/その他の書式)
  6. リストを作成するタグ
  7. 画像の取り扱い (figure, img, figcaption)
  8. ハイパーリンク(Hyperlink)とアンカー(Anchor)の作成
  9. 直接コーディングするイメージマップを扱う
  10. 一時画像の使い方(placehold.it)
  11. YouTube動画のダウンロード
  12. HTML5とマルチメディア(オーディオ、ビデオを再生する、YouTubeのビデオを再生する)
  13. テーブルを作る(1~3)
  14. フォーム関連タグ(1~2)
  15. HTML5セマンティックタグで作成するレイアウト(1〜2)

🌟 CSS教材授業内容

CSSテキスト書式スタイルを飾る
• 必読事項 / CSS 基本文法 / CSS リンク方式 / CSS セレクタ / CSS 適用優先順位
•CSSテキスト関連スタイル/ Google Webフォントを活用する/ CSSリストスタイル/フォントアサムの使い方

CSSの背景色、背景画像を飾る
• CSS 背景色と画像を制御する / CSS 背景グラデーションの作成
•レイアウトスタイル(インライン要素対ブロック要素)
• レイアウトスタイル(表示プロパティ:inline、block、inline-block)
•ボックスモデル(Box Model)/ CSSテーブルスタイル

CSSポジションレイアウトの作成
•CSSポジション(要素の水平方向の整列:float、clear)
•CSSポジション(position属性/子要素を親要素の外に配置する)
• CSS ポジション(要素の表示と隠し:z-index、 visibility、opacity、display)

CSSバリアント&アニメーション
• transform: translate
transform: scale
transform: rotate, transform: origin
transform: skew
•CSSアニメーション(Animation)プロパティ
キーフレーム(Keyframes)の作成

CSS仮想クラス
•マウスオーバー仮想クラス:hover
•順序で最初に出現する要素を選択する:first-child、最後の要素を選択する:last-child
•順序をチェックする仮想クラス:nth-​​child、順序とタグの種類をチェックする仮想クラス:nth-​​of-type
•フォーム要素入力をクリックしたとき:focus、フォーム要素入力に入れるテキスト::placeholder

CSSアドバンストセレクタの活用
•属性選択子、隣接セレクタ、兄弟セレクタ
•フォーム要素checkboxとradioをクリックしたときの仮想クラス:checked
•仮想クラス:before:after

🌟 CSS Flex(Flexible Box)

親要素に書き込む属性

- display: flex
- justify-content
- align-items
- flex-direction
- フレックスラップ
- align-content

子要素に書き込む属性

- flex
- order
- align-self
- 子要素使用するマージン(margin)属性

Flex の適用例

- フレックスレイアウト(1) - 垂直中央 水平中央の入れ子にして使う
- フレックスレイアウト(2) - 親子でネストされたdivを水平に配置する
- フレックスレイアウト(3) – 上部ナビゲーションの作成
- フレックスレイアウト(4) – セマンティックタグレスポンシブレイアウト

🌟ジェイクエリー教材授業内容

  1. JQUERYとは?
  2. ジェイクエリー基本構文の作成
  3. JQueryの場所にJSファイルをリンクする
  4. ジェイクエリのセレクタ、関数、メソッドの種類
  5. ジェイクエリーの重要な理論 - 関数
  6. ジェイクエリー必須コア理論 – 必須メソッド
  7. ジェイクエリー 必須コア理論 – メソッド (表示/隠す)
  8. ジェイクエリー必須コア理論 - メソッド(フェード効果)
  9. ジェイクエリー 必須コア理論 – メソッド (クラス制御)
  10. ジェイクエリー 必須コア理論 – マウスイベント一覧
  11. ジェイクエリー必須コア理論 - プロパティ操作メソッドのリスト
  12. ジェイクォーリー必須コア理論 - 場所ナビゲーションセレクタリスト
  13. ジェイクエリー 必須コア理論 – プロパティナビゲーションセレクタリスト


🙋🏻‍♂️PDF教材に関する必読事項

Q. PDF教材でジェイクエリーパートが内容が多くありませんでしたか?

A) ジェイクエリは特性上内容があまりにも膨大であるため、PDF教材にすべての内容を入れるには無理があり、基本的な使い方と必須関数、イベント、メソッドの使い方についての内容があります。また、パブリッシング入門者初心者には何よりCSSとFLEXが重要であるため、PDF教材の90%に該当する170ページが割り当てられています。

Q. コーディングワークスパブリッシングの核心理論 PDF教材は市中教材と違う点は何ですか?

A. すぐに知らなくてもよい内容、重要度が落ちる内容は除いてぜひ!必要な核心だけを収めました。コーディングワークス教材は、長年にわたりオフライン学園で使用された教材をさらに強化して作ったPDF教材です。特に市販教材にないコーディングワークス講義のヒント(Tip)が多く含まれています。

Q.ダウンロードコンテンツ容量はいくらですか?

A)ダウンロードされるコンテンツの総容量は42メガです。 PDF理論教材は見やすく5つに分けてアップロードされました。個別に受け取ります。そして、実習例ファイルは圧縮プッシュすればフォルダに整理されています。

Q. 出力してみることもできますがPDF教材は高画質ですか?

A)PDFファイルは300dpi高画質で製作されているため、出力してもきれいなプリントができます。

Q. ダウンロードしたコンテンツの使用用途はどうなりますか?

A)ダウンロードしたすべてのコンテンツは、コーディングワークスの独自のファイルです。コーディングワークスPDF教材は、受講申請された本人の個人学習用途以外に、他のいかなる目的にも使用または他人に配布してはなりません。また、PDFファイルにコーディングワークを表示する部分を編集して講義用資料として使用することもできません。

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

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

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

👨🏼‍🏫講師紹介

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

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 初めてウェブコーディングを始める方

  • HTML+CSS+JQUERY パブリッシング講義資料が必要な方

  • Web 出版に関する理解を深めたいWeb プランナー

  • フロントエンド パブリッシングの理解を深めたい開発者の方

  • ウェブサイトのメンテナンス修正補完を独自にしたい方

前提知識、
必要でしょうか?

  • 基本的なコンピュータ利用能力とインターネットブラウザの使用能力

  • コーディングのための基本的な英語タイピング能力

こんにちは
です。

12,540

受講生

737

受講レビュー

2,105

回答

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

カリキュラム

全体

9件 ∙ (12分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

51件

4.7

51件の受講レビュー

  • vkrtj76565042님의 프로필 이미지
    vkrtj76565042

    受講レビュー 1

    平均評価 5.0

    5

    67% 受講後に作成

    I decided to take the course because the table of contents seemed to organize the key points well, and I was able to focus more because the content pointed out important points rather than simply skimming the surface.

    • codingworks
      知識共有者

      Thank you for your course review~!!!

  • cme2029083403님의 프로필 이미지
    cme2029083403

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    Other textbooks were difficult because they only covered the basics and did not contain anything that could be applied in practice, but this book was good because it only contained things that could be applied!

    • codingworks
      知識共有者

      Thank you for the specific and realistic course review~^^

  • oklinekgh님의 프로필 이미지
    oklinekgh

    受講レビュー 13

    平均評価 5.0

    5

    100% 受講後に作成

    It's a good textbook with lots of examples. I think it will be helpful for my work. Thank you.

    • codingworks
      知識共有者

      You work in publishing~ I'm glad it was helpful. Thank you for the course review, Geunhyeong Kim.

  • james님의 프로필 이미지
    james

    受講レビュー 16

    平均評価 4.9

    3

    100% 受講後に作成

    It was just okay. The people selling it will say it is their know-how, and it is valuable to those who need it, but it feels a bit expensive. If you are in a hurry, it might be worth considering.

    • codingworks
      知識共有者

      Thank you for your review, jamesjuwon. Please understand if there are any shortcomings.

  • skylove62557603님의 프로필 이미지
    skylove62557603

    受講レビュー 10

    平均評価 5.0

    5

    89% 受講後に作成

    The textbook is very detailed, so it seems good for beginners!

    • codingworks
      知識共有者

      Thank you for the course review! ^^

¥2,169

codingworksの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!