NEW 【AI時代に学ぶ】HTMLモダンコーディング講座
4/23(木)21時リリース
【AI時代に学ぶ】
HTMLモダンコーディング講座
【収録：19時間12分 / 99レッスン】
4/23 (木) 21時 リリース決定!!
価格は後日告知いたします。
＼ 先にアカウントだけ登録しておく／
- AIにクオリティの高いコードを書かせる、的確な指示を出すにはHTMLの理解が不可欠
- AIが書いたコードをチェックしたりデバック指示するにもHTMLの理解が不可欠
- AIが書いたコードミスを、自分で修正するシーンも当然ある
- 過去のHTMLデータを修正する仕事もまだまだある
- 自分で新規でHTMLコーディングするシーンもまだまだある
- クライアントからのHTMLに関する質問に、堂々と答える事ができる
- WEBデザインする場合、HTMLに配慮したデザインを作る事ができる
- 何よりWEB制作プロとして、HTMLが分かっていないと恥ずかしい場面が沢山ある
- ライバルが少なるなる今こそ「HTMLを理解する貴重な人材」になれる！
「HTMLはAIが書く時代」という風潮からHTMLを学ぶ人が減り、ライバルが少なくなる今こそ「HTMLを理解する貴重な人材」になれる、絶好のタイミングです！
現場で求められるのは、HTMLの新規制作はもちろん「既存サイトの修正や、AIが書いたコードミスの調整、そしてなによりAIへ的確な指示を出したり、クライアントからの質問対応など、プロとして働くのであれば、HTMLの理解が不可欠なシーンは今後も消えません。
そんなHTMLの学習を、当講座では、超初心者〜中級者の方に向けて、HTMLの基礎から始まり、Figmaデータからのコーディング方法や、大人気エディタの使い方・chromeの開発モードの活用・jQueryメニューの作り方、そして新しいメディアクエリやCSSの変数やネスト記法を使った最新のモダンコーディング手法など、その他必要な基礎をしっかり学んだ上で、パソコン版・スマホ版をワンソースで組むレスポンシブコーディングの一連の流れを、動画を見ながら、一緒に手を動かして作っていくので、WEB制作を仕事にする方には「マストアイテム」な講座となっています。
この講座で学べる事
VScodeの使い方とカスタマイズ
HTMLを書くための無料の大人気エディタ「VSCode」の便利な使い方からEmmetを使った時短記述や使いやすくカスタマイズする方法まで初心者の環境づくりから学びます。
HTMLの基礎
初心者が迷わないように、まずはHTMLコーディングの全体の流れから学び、そこからじっくりHTMLタグの特性や、各タグの役割などHTMLの基礎を身につけて行きます。
CSSの基礎
CSSの書き方から始まり、これだけ知っておけば問題ないというセレクタやプロパティをしっかり学び、CSSの優先度の計算方法や実践での使い方を手を動かして学びます。
Googleフォントの導入
フォントの見た目を統一できる無料のGoogleのWEBフォントの使い方や注意点を学んでクオリティの高いデザインに仕上げます。
Figmaデータから情報の取得方法
大人気デザインアプリ「Figma」のデータから、HTMLコーディングを進めるための情報の取得方法や、実践で使うための単位の計算方法まで学びます。
CSS変数の使い方
CSS変数を使った効率的な値の代入方法を学んで、実装も修正も時間をかけずに行う手順を身に着けます。
CSSのネスト記法
新たに実装可能になった、CSSのネスト記法を使う事で、CSSが圧倒的に見やすくわかりやすくなるだけでなく、CSSの修正や管理のスピードも効率化できます。
remとcalcと変数でのフォントサイズの指定
色々なフォントサイズ指定がある中で、ユーザーに優しく実装者にも使いやすい、実践で使える「remとcalcと変数」を使ったフォントサイズ指定方法を学びます。
Chrome検証ツール活用方法
Chromeの検証ツールはWEB制作が圧倒的に効率化でき、ブラウザ上でデザインを見ながら実験や修正のテストができる便利なツールであり、その実践的な活用方法を学びます。
実践コーディング
HTMLやCSSの基礎を身に着けたら、いよいよ実践コーディング！パソコン版スマホ版の両方を効率的に作成し、実務での注意点・CSSの管理方法など、現場で使える知識を手を動かして学びます。
スマホへのレスポンシブコーディング
新しく見やすく書けるようになったメディアクエリの新記法を使って、ワンソースでスマホ表示への切り替えるレスポンシブコーディングの流れと効率的な実装方法を学びます。
アニメーションを使った開閉メニュー
自分でjQueryを記述して、簡単に実装できる「開閉メニュー」を作成し、かわいいアニメーションを使って動かす方法まで、自力で作成していきます。
カリキュラム
この講座のカリキュラム内容のご紹介。【プレビュー可】ボタンが表示されている動画は、クリックする事で無料で動画を観る事ができます！
- 4-1 CSSの基本：リード ▶ プレビュー可
- 4-2 CSSの基本と記述場所と優先順位 ▶ プレビュー可
- 4-3 CSSセレクタ_HTMLタグ / ユニバーサル（*）
- 4-4 CSSセレクタ_class / id
- 4-5 CSSセレクタ_複数 / 複合
- 4-6 CSSセレクタ_子孫 / 直下（>）
- 4-7 CSSセレクタ_隣接（+） / 兄弟（~）
- 4-8 CSSセレクタ_:first-child / :first-of-type
- 4-9 CSSセレクタ_:last-child / :last-of-type
- 4-10 CSSセレクタ_:nth-child(n) / :nth-of-type(n)
- 4-11 CSSセレクタ_::before / ::after
- 4-12 CSSセレクタ_:not() / :has()
- 4-13 CSSセレクタ_属性セレクタ
- 4-14 CSSの優先順位・詳細度の計算方法
- 5-1 CSSプロパティとは ▶ プレビュー可
- 5-2 CSSプロパティ_リセットCSS ▶ プレビュー可
- 5-3 Chrome検証ツール
- 5-4 CSSプロパティ_width-height-boxsizing
- 5-5 CSSプロパティ_min-max
- 5-6 CSSプロパティ_padding
- 5-7 CSSプロパティ_margin
- 5-8 CSSプロパティ_border
- 5-9 CSSプロパティ_font-family
- 5-10 CSSプロパティ_font-size
- 5-11 CSSプロパティ_font-weight
- 5-12 CSSプロパティ_color
- 5-13 CSSプロパティ_text-decoration
- 5-14 CSSプロパティ_line-height
- 5-15 CSSプロパティ_letter-spacing
- 5-16 CSSプロパティ_text-align
- 5-17 CSSプロパティ_vertical-align
- 5-18 CSSプロパティ_object-fit
- 5-19 CSSプロパティ_object-position
- 5-20 CSSプロパティ_back-ground
- 5-21 CSSプロパティ_display
- 5-22 CSSプロパティ_flexbox
- 5-23 CSSプロパティ_grid-layout
- 5-24 CSSプロパティ_visibility-opacity
- 5-25 CSSプロパティ_position
- 5-26 CSSプロパティ_z-index
- 5-27 CSSプロパティ_cursor
- 5-28 CSSプロパティ_overflow
- 5-29 CSSプロパティ_box-shadow
- 5-30 CSSプロパティ_clip-path
- 5-31 CSSプロパティ_transform
- 5-32 CSSプロパティ_transition
- 5-33 CSSプロパティ_calc
- 6-1 実践編_パソコン版コーディング：リード ▶ プレビュー可
- 6-2 htmlファイルの準備 ▶ プレビュー可
- 6-3 GoogleWEBフォントの導入
- 6-4 Figmaデータから値を取得する流れ
- 6-5 Figmaから画像の書き出し
- 6-6 CSS変数の使い方
- 6-7 remとcalcと変数を使ったフォントサイズの指定
- 6-8 CSSのネストによる記述方法
- 6-9 HeaderエリアHTMLコーディング
- 6-10 HeaderエリアのCSS設定
- 6-11 MVエリアHTMLコーディング
- 6-12 MVエリアのCSS設定
- 6-13 人気コースエリアHTMLコーディング
- 6-14 人気コースエリアのCSS設定
- 6-15 スクールの特徴エリアHTMLコーディング
- 6-16 スクールの特徴エリアのCSS設定
- 6-17 FooterエリアHTMLコーディング
- 6-18 FooterエリアのCSS設定
- 7-1 レスポンシブコーディングの流れとメディアクエリの使い方
- 7-2 レスポンシブ-Headerエリア
- 7-3 レスポンシブ-MVエリア
- 7-4 レスポンシブ-人気コースエリア
- 7-5 レスポンシブ-スクールの特徴エリア
- 7-6 レスポンシブ-Footerエリア
- 7-7 レスポンシブ_開閉メニュー
- 7-8 レスポンシブ_開閉メニュー JQuery実装
- 7-9 レスポンシブ_開閉メニュー アニメーション実装
【AI時代に学ぶ】
HTMLモダンコーディング講座
【収録：19時間12分 / 99レッスン】
4/23 (木) 21時 リリース決定!!
価格は後日告知いたします。
＼ 先にアカウントだけ登録しておく／
おかげさまで、累計受講生「18201人」超！ 受講生からのレビュー
※ 掲載時点での5段階の★評価 ( ) はレビュー数
受講生からの「5段階の★評価とレビュー」を頂いており、いくつか抜粋しております。現時点での評価は、5点満点の星評価で平均★4.7〜★4.8と高い評価を頂き、プラットフォーム内での最高評価（カテゴリ内のトップ評価）を頂いた人気の講座。
また現在、当講座を含めて全部で４つの講座を公開しており、すべての講座の合計受講者は、他の販売サイトも合わせて、現時点で有り難い事に18201人を超えて、たくさんの方に受講頂いております！
受講生の X（Twitter）のリアルな感想
動画視聴し始めていますが、なるほど！と心の中で何度も叫んでいます。まだ30分も視聴していないのにすでに大満足です。終わるころにはどうなっているやら🤣
— ナオ@Webデザイン勉強中 (@design_nao0828) February 21, 2024
ずっと気になってて、先程4つの講座購入しました！勉強させていただきます✍🏻
— ミイナ @ Webデザイナー (@miina_design) April 16, 2024
いやホントにとんでもなく勉強になります！
— くろ｜DTP&WEBデザイン (@kuro_design1025) April 19, 2024
動画を見るだけでも8.5時間かかるのに、手を動かしながらだと
3日がかりでした。でも絶対やるべきです！それだけの価値があります！💪
👩💻今日の振り返り
— めう@Webデザイン (@mnyonyazou) March 14, 2024
☑︎udemy講座視聴
以前バナー講座がとても勉強になったので@stand_4u_ さんの別の講座も視聴し始めました🫢
まだ少ししか見れてないけどすでに勉強になる✍️
後半はさらに濃そうなので明日のお楽しみ😌
Figmaを使ってWEBデザインする今の最適解！🥹これは独学では無理、、素直に買って感動しました📷✨ https://t.co/FkYlMJtDmp
— あき｜デザイナー (@47gakeppuchi) May 8, 2024
#デイトラ #webデザイン
— サチカワ｜Webデザイン (@kawa_sachi76051) February 19, 2024
2/19📚
☑︎ハガキ修正
☑︎WD
☑︎Udemyバナー講座
☑︎上級ECサイト@stand_4u_ さんのバナー講座がすごいボリュームで感動🥹プロの作り方を実際に見れるのは新しい発見だらけでとても勉強になります✨
🕑5.5h
こちらすごくよかったです👏
— めう@Webデザイン (@meewdesign) August 30, 2024
しっかり理解したくて動画を見ながら一緒にデザインカンプを作っていきました！@stand_4u_ 先生の講座3本目ですが今回も本当に勉強になる内容でした🤓コーダーさんに渡しても恥ずかしくないデザインカンプ、学んだことを実践してしっかり自分のものにしていきたいです！ https://t.co/xZ3iqcKxYa
オートレイアウトや制約の機能を改めて確認しながら、お手本と同じように手を動かしてサイトを作ってみました👀きちんと一つ一つ設定しながらデザインを進めればレスポンシブ化がめちゃくちゃ簡単！@stand_4u_ 先生の動画今回もわかりやすく、テンポよくさくさく進めることができました！ https://t.co/726DIjyuUv
— えりな｜Webデザイナー👩🏻🎨 (@erinadesign_) August 17, 2024
動画講座の視聴方法
初めてご購入の方は、アカウント登録が必要です。メールとパスワードだけの約30秒でできる簡単登録です。
動画の閲覧はLekcha（レクチャ）という専用サイトでログインするだけで視聴する事ができるので、動画のデータを持ち歩く必要が無く、自宅のパソコンや外出先のスマホやタブレットなど、いつでもどこでも、手軽に視聴して学習する事ができます。
また、視聴期限も無いので期間を気にせず学習する事ができます。
＼ 先にアカウントだけ登録しておく／
動画講座の購入
次のリンク先で動画を購入する事ができ、決済後すぐに学習をスタートする事ができます。
【AI時代に学ぶ】
HTMLモダンコーディング講座
【収録：19時間12分 / 99レッスン】
4/23 (木) 21時 リリース決定!!
価格は後日告知いたします。
＼ 先にアカウントだけ登録しておく／
- 初めてご購入の方は、Lekchaの無料アカウント登録が必要です（メールとパスワードだけ約30秒の簡単登録）。
- HTML初心者〜中級者向けの講座ですが、パソコンの操作が問題なくできる方が対象です。
- 当講座はMacの画面で収録していますので、Windowsユーザーの方は「command → ctrl、option → alt」に置き換えて操作して頂く事で学んでいただけます。
その他の動画講座
4/23 公開Figmaで【AI時代に学ぶ】モダンコーディング講座
収録：19時間12分
