inflearn logo
知識共有
inflearn logo

ちゃんと学ぶ HTML CSS - by Yalco(ヤルコ)

プログラミング初心者でもついていける、親切で分かりやすい講座! 現役エンジニアをHTML & CSSの博士へと導く決定版講座!

難易度 入門

受講期間 無制限

HTML/CSS
HTML/CSS
HTML/CSS
HTML/CSS

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

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

4.9

5.0

Hansh

100% 受講後に作成

CourseraでJohns Hopkins html / css / jsの講義を聞き、一日を越えてきました。 1. 最初に講義を評価する時、内容の総時間を見るが、時間が短い講義は深く掘り下げられないことがあるので、この講義は12時間で、html/cssだけカバーするのにかなり長い時間だと信じていた。講演者も素早く講義を進めて、事実上1時間30時間を圧縮させたと見られる。 2. 2つ目は講演者の内容伝達力だが、この講義は内容をとても効率的ですっきりとした方法で伝えると感じた。簡単に理解するために多くの努力をしたようです。 3. 3番目はここでしか聞こえないコーディング環境の設定方法と、様々なヒント、そして一人でどのようにさらに進んで勉強できるのかを教えてくれた。 Coursera、Udemyで有名であり、都合のない講義だけを聞いたが、肝臓に失速している講義を見てよかった。

5.0

하정원

31% 受講後に作成

詳しく教えてくれて一つ一つ見てくれてよかったです。すべての勉強がそうだが、自分だけの方法を探して勉強するので、はるかに集中が良かったんです。私のような場合には、ソースコードを先に自分で解釈してみて講義を聞いたのですが、この場合に私が解釈したのが正しいか、または分からない文法はどんなことを意味するのかを考え、講義に取り組んでみるともっと頭の中に残りました!

5.0

HDK

83% 受講後に作成

Youtubeの購読者としてGit講義を頑張り、html/css講義も引き続き購入しました。ヤルコ様の講義の強みは、きちんとしたカリキュラムと伝達力が良く、内容が耳にすっぽり詰まっているという点です。講義を聞くのですが、まるで話を聞くかのように私も知らなくなって聞くことになります。このように講義に従うと、ある瞬間の内容を理解し、習得した自分を見ることができるようになります。お金が全く惜しくない講義だと思われます。悩んでいるなら購入することを強くお勧めします。

受講後に得られること

  • HTMLとCSSの基礎から応用まで

  • EmmetでHTMLを簡単にコーディングする

  • Web標準を遵守したパブリッシング

  • ポジション、各種レイアウト、セレクターなど、難しいCSSの概念

  • 継承とリセッティング、ベンダープレフィックス、フォーカスビジブルなど複雑な概念

  • 変数、ウェブフォント、フィルター、アニメーションなどの高度な機能の活用法

  • レスポンシブでモバイル環境に対応する

  • アクセシビリティ - 多様なユーザーに配慮したウェブサイト作り

  • セマンティックタグとBEMを活用した適切なサイト構成

  • ファイナルプロジェクトを通じた実践的知識

https://youtu.be/TrC2x4N0XqY

上記のYouTube動画(本講義の公開パート)に高評価とコメントを残した後、
yalco@yalco.krへスクリーンショットをお送りいただければ、
講義を半額で受講できる割引クーポンをお送りいたします。chúng tôi sẽ gửi cho bạn mã giảm giá để có thể đăng ký khóa học với giá nửa tiền.


こんなことを学びます! 📚

  • HTMLとCSSを超初心者向けの基礎から現役開発者のための高度な活用法と実践的なコツ、理解しにくかった理論まで分かりやすく学びます。
  • 単に視覚的にページを実装することを超えて、より多くの人々を配慮し、他の開発者とも協業しやすい「優しい」ウェブサイトを作る方法を学びます。

「徹底的に掘り下げる」講義を作った理由 ⛏️ 

コーディングを初めて始める方が、最初のコーディング体験からスタートできるシリーズを作りたいと思いました。
その第一歩として、コンピュータサイエンスの知識がなくても比較的学びやすいHTML & CSSを最初のテーマに選びました。

一方で、参入障壁が低いHTML & CSSですが、これらを深く勉強して「正しく」活用している開発者はそう多くありません。そのため、難しい概念や細かな属性まで踏み込み、現役の開発者やパブリッシャーにとっても大きな助けとなるような講座にしたいと考えました。

本当に素晴らしく有益な講義を作ろうという目標で、長い間調査し準備した末に、この講義を制作することになりました。


どんな方がこの講義を
受けると良いでしょうか?
👨‍💻 

プログラミングが初めての方

パブリッシングをしたいWebデザイナー

HTML/CSSをより使いこなしたい開発者

  • 🍼 コーディングを学び始める人
  • 🎨 パブリッシングを自らこなしたいウェブデザイナー
  • 🎓 HTML、CSSをもっと上手く使いこなしたい開発者
  • ⛏️ HTMLとCSSの深い理論まで学んでみたい開発者
  • 💖 標準に準拠し、アクセシビリティの高いウェブ開発をしたい開発者

 


本としても
発売されました! 📙

image

講義の内容を手元でも確認できるように、ぎっしりと詰め込みました。
(ℹ️ この本は、JavaScriptについては基礎的な部分のみを軽く扱っています。)

🛒 本を購入する


ヤルコ講義だけの
特別な点 ✨

速くて簡単な
動画講義 🚀

無駄のないスピーディーな進行で、皆さんの大切な時間を節約します。(受講者によっては話が速く感じられる場合がありますので、あらかじめご了承ください。必ず無料パートの講義を聴いてから受講してください!)

説明が詳しすぎる講師の
ディテールにこだわった講義 🎙️

各タグや属性の機能だけでなく、それらの多様な活用方法やウェブ標準に沿った使い方、理論的な原理まで詳細に説明し、最大限多くのことを学んでいただけるよう準備しました。

ウェブページを通じた
便利な実習 🖥️

各講義ごとに動画の主要なポイントと、コピー&ペースト可能な実習用コマンドとコードがウェブページに整理されているため、これらに沿って応用しながらスムーズに実習を進めることができます。

基礎内容  
無料公開 😎

学生の方々も負担なく勉強できるよう、最初の5時間分をプレビューを通じて無料で公開します。


ヤルコ(Yalco)とは誰ですか? 😀

YouTubeチャンネル浅いコーディング辞書を運営するYouTuberであり、IT書籍を執筆する作家です。フルスタックエンジニアとして働いてきた経験を活かし、難しいプログラミングの概念を初心者が理解しやすいよう、比喩や簡単な例、時にはアニメーションを使って解説するコンテンツを制作しています。

🎬   YouTube ヤルパクなコーディング辞典チャンネル (クリック!)
📕  ヤルコの本を見に行く (クリック!)


講義のために特別制作した 
⭐️  プレイグラウンド  ⭐️ 

  • 講義用ウェブページには、CSSの学習と復習をスムーズに行えるよう作成されたプレイグラウンドが、テーマごとに以下のように用意されています。

  • 各プロパティの値を調整しながら、それらがウェブ上の要素にどのように反映されるかを直接確認できます。

  • どのような形式の値を使用できるかを確認しながら、該当するCSSプロパティを活用する多様な例を学んでいくことができます。

この講義を受けると
何が変わるでしょうか? 💪

  • 入門者や非専門家の方は、コーディングに対する恐怖心がなくなります。
  • どんなウェブサイトでもパブリッシングできる自信がつきます。
  • ぼんやりとしか知らなかった概念や、よく分からずに使っていた機能を明確に理解できるようになります。
  • ウェブサイトを「正しく」、「誠実に」、「思いやりを持って」作る方法を学ぶことになります。

どのような内容を
学ぶことになりますか? 📚

セクション 1: HTMLの基礎 HTMLタグとそれぞれの適切な活用法

  • テキストコンテンツ、リスト、画像、表、リンク、入力など、各種ウェブ構成要素
  • Web標準と推奨事項に沿ったコーディング
  • Emmetを利用した高速コーディング

セクション 2:CSSの基礎

  • CSSの多様な適用方法と基本セレクター
  • テキスト要素、リスト、色、背景など、各種要素のスタイリング
  • インライン/ブロック、ボックスモデル、ポジションなどCSSの核心概念
  • フレックスレイアウトを活用したウェブページの構造

セクション 3: HTML詳細

  • ヘッダー内のメタ情報、ビューポート、オープングラフなどのページ設定
  • セマンティックタグとBEMを通じてページを体系的に構成する
  • 多様なユーザーに配慮したアクセシビリティの確保
  • SVG、映像など、その他のメディア活用法

セクション4: CSS 応用

  • インポートと変数、リセッティング、ベンダープレフィックスなどの実務概念
  • フローティングおよびグリッドを活用したレイアウト
  • トランジション、アニメーション、フィルター、およびその他多様なCSS機能
  • レスポンシブでウェブサイトを作る
  • ウェブフォント、アイコン、フレームワークなど外部要素の活用法

✅ セクション 5:ファイナルプロジェクト

  • 上記のようなウェブページを、JavaScriptを使用せずHTMLとCSSのみでレスポンシブに対応させる実習を行います。

よくある質問を
ご確認ください 💬

Q. プログラミングは初めてですが、受講できますか?

A. HTMLとCSSは、初心者が始めるのに最も適したトピックです。コーディングが初めての方でもついていけるよう、最初の環境設定からコーディングツールの使い方まで詳しく説明し、実習もできるだけ簡単な用語を使用して進めます。

Q. すでにウェブ開発をある程度していますが、どれくらい役に立ちますか?

A. ウェブ開発者が一般的に十分理解して使っていると思われがちな基本的なHTMLタグやCSSプロパティも、深く勉強してみると、これまで知らなかったことが多かったと気づかされることがよくあります。これまでなんとなく理解して活用してきた要素や機能をより適切に使いこなせるようになり、外観だけでなく内部や構造的にも美しいサイトを作るための有用な知識を学ぶことができるでしょう。

Q. 講義のスピードが速くて難しくないでしょうか?

A. 動画の進行は速いですが、各講義ごとに講義ページがリンクされているので、動画の内容を快適に復習し、実習できるようにしてあります。ページの随所にある例題やプレイグラウンドを活用して、皆さんの時間効率を最大限に高めた学習を進めることができるはずです!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • コーディングを初めて学ぶ人

  • パブリッシングを自らこなしたいウェブデザイナー

  • HTML、CSSをもっと上手く使いこなしたい開発者

  • HTMLとCSSの深い理論まで学んでみたい開発者

  • 標準に準拠し、アクセシビリティの高いウェブ開発をしたい開発者

こんにちは
yalcoです。

34,165

受講生

1,961

受講レビュー

96

回答

4.9

講座評価

17

講座

YouTubeチャンネル 浅いコーディング辞書を運営するYouTuberであり、IT書籍を執筆する作家です。フルスタックエンジニアとして働いてきた経験を活かし、難しいプログラミングの概念を初心者でも理解しやすいよう、比喩や簡単な例、時にはアニメーションを用いて解説するコンテンツを制作しています。

🎬 YouTube 浅いコーディング辞書 チャンネル (クリック!)
📕 ヤルコの本を見に行く (クリック!)

もっと見る

カリキュラム

全体

54件 ∙ (11時間 16分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

151件

4.9

151件の受講レビュー

  • fourier님의 프로필 이미지
    fourier

    受講レビュー 11

    平均評価 5.0

    5

    100% 受講後に作成

    結論から申し上げてとても素敵な講義です。

    • closhu님의 프로필 이미지
      closhu

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      CourseraでJohns Hopkins html / css / jsの講義を聞き、一日を越えてきました。 1. 最初に講義を評価する時、内容の総時間を見るが、時間が短い講義は深く掘り下げられないことがあるので、この講義は12時間で、html/cssだけカバーするのにかなり長い時間だと信じていた。講演者も素早く講義を進めて、事実上1時間30時間を圧縮させたと見られる。 2. 2つ目は講演者の内容伝達力だが、この講義は内容をとても効率的ですっきりとした方法で伝えると感じた。簡単に理解するために多くの努力をしたようです。 3. 3番目はここでしか聞こえないコーディング環境の設定方法と、様々なヒント、そして一人でどのようにさらに進んで勉強できるのかを教えてくれた。 Coursera、Udemyで有名であり、都合のない講義だけを聞いたが、肝臓に失速している講義を見てよかった。

      • yalco
        知識共有者

        一生懸命準備したほど大きなやりがいを感じさせていただきありがとうございます。 足りない頭を持った人として、どうやって講義すれば、他人がよく理解するか多くの悩みをしながら作りましたが、それだけの助けになってくれたのは本当に嬉しいです。 これからもより良い講義でお返しします。 受講していただきありがとうございます!

    • hajeongwon775011님의 프로필 이미지
      hajeongwon775011

      受講レビュー 1

      平均評価 5.0

      5

      31% 受講後に作成

      詳しく教えてくれて一つ一つ見てくれてよかったです。すべての勉強がそうだが、自分だけの方法を探して勉強するので、はるかに集中が良かったんです。私のような場合には、ソースコードを先に自分で解釈してみて講義を聞いたのですが、この場合に私が解釈したのが正しいか、または分からない文法はどんなことを意味するのかを考え、講義に取り組んでみるともっと頭の中に残りました!

      • animajangyj8337님의 프로필 이미지
        animajangyj8337

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        とても良い講義です。 非専攻者、生初心者で勉強を始めたのですが、他の人は面白くて簡単だというHTML&CSSパーツなのに私はやはり生初心者なのでかなり難しかったです。 11時間少し以上の講義ですが、ほぼ7週間以上で頑張りましたね。 実は途中で難しくて別の講義に乗り換えたが、またこの講義に移ってきました。 初めての講義なので、もしかしたらレベルが私には合わないと思っていましたが、ただ私がよく理解できない頭を持ったものだと思い、他の講義に比べて圧縮的ですが、多くのことを盛り込んで説明をうまくやると考えて頑張りましたね。 10分~20分くらいに分かれた講義だと思っても、私のように生初心者は頭でだけ理解して渡れば後でファイナルプロジェクトの時にメンブン来ます。まだファイナルプロジェクトちゃんとクローンも全部理解していませんが、もっと時間を投資して復習しなければならないという気がしますね。 結論を申し上げると、全体的に講義の質と内容は最高でなかったかと思います。実はスカンピョンよく残るのに~ こんなゴクオリティの講義は他の方々も見るのがいいと思って残します。 そして個別にお問い合わせをいただいた時もよくお答えいただきありがとうございます。もう一度復習に行きます。

        • yalco
          知識共有者

          ありがとうございます! 爽やかで深く作った講義なので、非専攻者ではなかったとしても、難しくて強いのが正常です。最後まで聞いてくれて本当に感謝して講義者として嬉しいです。後で復習したり、本番で使用する際に難しい部分がある場合は、いつでも質問してください!またありがとうございました〜!

      • rlarhkr811588님의 프로필 이미지
        rlarhkr811588

        受講レビュー 6

        平均評価 5.0

        5

        83% 受講後に作成

        Youtubeの購読者としてGit講義を頑張り、html/css講義も引き続き購入しました。ヤルコ様の講義の強みは、きちんとしたカリキュラムと伝達力が良く、内容が耳にすっぽり詰まっているという点です。講義を聞くのですが、まるで話を聞くかのように私も知らなくなって聞くことになります。このように講義に従うと、ある瞬間の内容を理解し、習得した自分を見ることができるようになります。お金が全く惜しくない講義だと思われます。悩んでいるなら購入することを強くお勧めします。

        yalcoの他の講座

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

        似ている講座

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

        ¥5,598