Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Front End Web Development

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。
Bestseller
Rating: 4.4 out of 54.4 (6,475 ratings)
30,376 students
Created by たにぐち まこと(ともすた)
Last updated 1/2021
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • HTML/CSSを用いたWebページの構築
  • JavaScriptを利用したプログラミング
Curated for the Udemy for Business collection

Course content

8 sections • 70 lectures • 8h 46m total length

  • Preview05:37
  • Preview07:31
  • Preview03:39

  • サンプルファイルのダウンロード
    00:13
  • Preview10:43
  • Visual Studio CodeでのHTML編集
    03:56
  • テキストフィールドを作ろう
    08:29
  • ボタンを作ろう
    03:49
  • headタグの中に記述する決まり文句
    06:44
  • CSSで見た目を調整しよう
    05:18
  • CSSの内部参照でページ内の共通パーツのスタイルを調整しよう
    03:54
  • CSSの外部参照で複数ページに共通のスタイルを記述しよう
    04:53
  • sanitize.cssでブラウザーのデフォルトCSSをリセットしよう
    03:43
  • divタグと class属性で要素を区分けしよう
    07:53
  • marginプロパティの autoを使ってエリアを中央に揃えよう
    05:45
  • box-shadowプロパティで浮いたボタンを作ろう
    07:43
  • 適切な HTMLタグを利用しよう
    03:34
  • spanタグで「必須」ラベルを作ろう
    07:05

  • Preview05:03
  • HTML:セクショニングコンテンツ(header, section)
    04:23
  • CSS:タイトルの CSSを整える
    07:17
  • CSSのセレクターの種類
    02:20
  • 画像を配置しよう - img
    05:16
  • CSS:floatを使った回り込み
    07:10
  • CSS:clearで回り込みを解除する
    11:31
  • HTML: リンクを張る aタグ
    04:27
  • HTML:「実体参照」でコピーライト表記を追加する
    03:05
  • CSS:Webフォントを使う
    05:38
  • CSS:レスポンシブWebデザイン(RWD)のレイアウトを作る(メディアクエリー・リキッドデザイン・ブレイクポイント)
    05:42
  • CSS:CSSアニメーションを使う(Transition)
    05:09

  • Preview04:47
  • Bootstrapを CDN(Content Delivery Network)で利用しよう
    05:09
  • Bootstrapの Containerを使って画面をレイアウトしよう
    06:20
  • スタイルシートを調整しよう
    05:04
  • Bootstrapのグリッドシステムで画面をレイアウトしよう
    12:15
  • Bootstrapのフォームコントロールを使おう
    07:41
  • プレイスホルダー(placeholder)の使い方
    03:00
  • ドロップダウンリストを追加しよう
    07:04
  • チェックボックスを追加しよう
    08:38
  • ラジオボタンを追加しよう
    08:41
  • テキストエリアを追加しよう
    06:24
  • バッヂを使って、必須項目を示そう
    04:28

  • Preview10:28
  • JavaScript:オブジェクト・メソッド・パラメーター
    11:52
  • JavaScript:文字列・数字と四則演算、文字列連結
    09:45
  • JavaScript:変数の扱い
    12:51
  • JavaScript:オブジェクトとインスタンス
    06:05
  • JavaScript:Dateオブジェクトを使ってプログラムを仕上げよう
    03:51

  • Preview10:48
  • JavaScript:getElementByIdとプロパティで要素を書き換えよう
    11:30
  • JavaScript:if構文で条件に沿ったプログラムを作ろう
    09:28
  • JavaScript:function(関数)定義をしよう
    12:33
  • JavaScript:イベントドリブンなプログラムを作成しよう
    07:14
  • JavaScript:setIntervalで定期的に実行されるプログラムを作ろう
    10:39
  • JavaScript:変数のスコープを理解しよう
    10:43
  • JavaScript:秒数から、分と時を計算しよう
    06:58
  • JavaScript:thisを使って、STOPボタンを実装しよう
    13:23

  • Preview13:35
  • HTML/CSS:ページを形作っていこう2 - position: relative, absolute
    05:33
  • JavaScript:JSONデータを配列で操ろう
    11:25
  • JavaScript:createElementと appendChildで HTML要素を作ろう
    12:12
  • JavaScript:for構文で繰り返し処理をしよう
    10:09
  • 【補足】利用した画像ファイルは次のレクチャーでも利用してください
    00:18
  • JavaScript:Ajax通信を行なおう
    09:53
  • JavaScript:Ajax通信で受信したデータを処理しよう - 論理演算子
    13:30
  • JavaScript:画面を仕上げよう
    06:25

  • Preview13:41
  • jQuery:Ajax通信を行なってプログラムを仕上げよう
    13:21
  • Preview08:49
  • Vue.js:Vue.jsで画面を作り上げよう
    12:20

Requirements

  • PCの操作Webブラウザーの操作
  • Webブラウザーの操作

Description

HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。

これら、フロントエンド(表示される画面に関わる要素)を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。

スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。

本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。

なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん(マイナビ出版刊)』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。

Who this course is for:

  • Web制作を学びたい方
  • アプリ制作等でHTMLと CSSおよび、JavaScriptの知識が必要な方

Instructor

たにぐち まこと(ともすた)
HTML/CSS/JavaScript/PHP
たにぐち まこと(ともすた)
  • 4.5 Instructor Rating
  • 11,948 Reviews
  • 47,213 Students
  • 8 Courses

ともすた合同会社代表、株式会社エイチツーオー・スペース代表取締役

小学生からプログラミングに親しみ、Web制作会社 H2O spaceを起業。主に Web業界のクリエイター向けに、各種の講演や執筆を通じ、学習コンテンツを展開。

『マンガでマスター プログラミング教室(ポプラ社刊・監修)』や、『よくわかるPHPの教科書(マイナビ出版刊)』など執筆多数。

近年は、講座動画配信プラットフォーム Udemyを通じた映像講義配信なども手がける。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.