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 Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native 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 Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing 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
Design Web Design CSS

CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター

70以上のレッスン、7時間以上のレッスンでCSSをマスターするコースです。最新のCSS3に関する内容も充実しています。
Rating: 4.4 out of 54.4 (330 ratings)
2,370 students
Created by NEST online
Last updated 10/2015
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につきます
Curated for the Udemy for Business collection

Requirements

  • HTMLの基礎を知っておく必要があります

Description

CSS / CSS3を70位上のレッスン、7時間かけてしっかり学びます。
CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につきます。

1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


★こんな人におすすめ★

  • HTMLはわかるがCSSがまだできなくて始めたい人
  • 最新のCSSを学び直したい人


★特徴★

  • CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につく
  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
  • 5分程度の動画が70レッスン以上 充実した内容ですが、無理せず学べる



★内容★

(1)CSS入門 第一回

初めてCSSを学習する方向けに、CSSの基本的な記述方法をレクチャーします。 一つのサイトを作成する流れの中で、CSSで出来る事はどんな事なのか?その読み込み方法など、まずはじめに覚えるべき操作についてお話しします。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めます

(2)CSS入門 第二回

簡単でかつはじめに覚えるべき、セレクターの書き方や、コメントアウトの書き方を学びます。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めて行きます。 「CSS入門 第1回」の続きの章になりますので、初めてこの章をご覧になる方はまずこの前の章から始めてください。


(3)テキストのスタイル

テキストの大きさや種類、太さといった、テキストのスタイルを設定するためのCSSについて学んでいきます。 シンプルなサイトのデザインを行いながら学んでいくので、楽しみながら学習していただけます。 初心者向けの章なので、複雑な機能やショートカットキー等は使用せず、気軽に取り組んでいただけます。


(4)ボックスのスタイル

Webサイトのレイアウト等を組む際に、エリアの横幅、縦幅や余白などを調整する方法を学びます。 これらをCSSを使ってコントロールするためには、「ボックスモデル」という概念を理解する必要がありますので、作品作りを通して、1つずつ着実にマスターしていきましょう。


(5)背景・シャドウ・リスト

背景に色・画像を適応させたり、影をつける、またリストのアイコンを画像にする方法を学びます。 これらのCSSをマスターすれば、より一歩進んだWebサイトマークアップが可能になります。 この機会にぜひ、習得してください。


(6)レイアウト

Webサイトのレイアウトを組むためのCSSの記述方法について学びます。 また、ボックスを2つ左右に並べる「2カラムのウェブサイトレイアウト」を組んだり、 全体を真ん中に寄せる「センタリング」させたりといった方法を学びます。 ボックスモデルを理解していないと、習得が難しい章になっていますので、「ボックスモデル」の章をご覧になってからこの章に挑んでください。


(7)セレクタ

CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。 CSSのセレクタには様々な書き方がありますが、中には覚えておくと便利なセレクタがたくさんあります。 この章では、とくによく利用するセレクタをピックアップしてご紹介します。


(8)セレクタ応用

CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。 ここでは、一歩進んだ上級者向けの便利なセレクタの書き方についてご紹介していきます。 上級者・プロは必ず利用するセレクタの記述になりますので、この機会にぜひ覚えてみんなと差をつけよう! 初めてこの章をご覧になる方は、まずはじめに、「セレクタ」の章から初めて頂くとより理解が深まるはずです。



Who this course is for:

  • HTMLはわかるがCSSがまだできなくて始めたい人
  • 最新のCSSを学び直したい人

Course content

8 sections • 71 lectures • 6h 29m total length

  • Preview04:41
  • Preview04:45
  • Preview04:04
  • インラインCSSを書いてみよう
    05:41
  • フォントのサイズと太さを変更してみよう
    04:05
  • 外部CSSファイルの作成と読み込み方法
    07:24
  • importタグを使ってCSSを読み込む方法
    04:22
  • リセットCSSを使う方法
    02:34

  • すべての要素を対象にするセレクタの書き方
    02:28
  • タグ名を指定してCSSをかける方法
    05:59
  • スタイルの継承について
    06:48
  • 複数の同じタグに異なるCSSを適応させる:id名の記述
    06:06
  • 複数の同じタグに異なるCSSを適応させる:class名の記述
    05:25
  • CSSコメントアウトを書く方法
    02:22
  • ナビゲーションにCSSをかけてみよう(1)
    05:30
  • 【続き】ナビゲーションにCSSをかけてみよう(2)
    04:07

  • フォントの種類を指定するfont-familyの書き方
    06:56
  • 特殊なフォント、Google Web Fontを指定しよう
    05:55
  • フォントの大きさを指定するfont-sizeの書き方
    01:39
  • CSSでの大きさを指定する単位について
    04:07
  • font-sizeを使って、頭文字のみ大きくしてみよう
    06:30
  • 文字の太さを変更するfont-weightの書き方
    04:22
  • 下線や打ち消し線をtext-decorationで書こう
    04:49
  • 文章の行間を指定するline-heightの書き方
    05:19
  • フォントの設定を一括で行うCSSの書き方
    03:05
  • [チャレンジ]font系CSSを利用して、お知らせページを作ってみよう
    09:49

  • ブロックタイプレベルとインラインレベルについて
    04:58
  • ボックスモデルを理解する
    03:16
  • 横幅と縦幅の指定するCSSのかけ方
    10:18
  • 外側の余白を調整するmarginプロパティの書き方
    06:45
  • 内側の余白を調整するpaddingプロパティの書き方
    07:26
  • 境界線を付けるborderプロパティの書き方
    08:05
  • borderプロパティを利用した、見出しを作ってみよう
    05:20
  • インライン要素をブロック要素に変えるプロパティの使い方
    04:43
  • ボックスの角を丸くするborder-radiusの書き方
    04:02
  • [チャレンジ]ボックス系CSSを利用して、カフェのメニューページを作ろう
    07:03

  • 背景の色を変更する方法
    05:22
  • 背景に画像を設定する方法
    07:51
  • スクロール固定の背景画像を設定する方法
    04:42
  • テキストに影をつける方法
    05:30
  • ボックスに影をつける方法
    04:45
  • グラデーションの背景を設定する方法
    08:23
  • リストのアイコンスタイルを変更する方法
    05:06
  • リストのアイコンを画像に変更する方法
    03:34
  • 背景画像を利用したリストアイコンの表示方法
    03:56

  • タグの横幅と縦幅の指定方法
    06:19
  • サイト全体を中央寄せ、センタリングする方法
    03:31
  • Webサイトを2カラムレイアウトにする方法
    09:32
  • floatを利用した横並びのナビゲーションを作ってみよう
    08:02
  • 位置を指定して配置するpositionプロパティの書き方
    07:46
  • スクロール追従ナビゲーションを作成する方法
    04:28
  • 指定範囲からはみ出た文字をスクロールさせる方法
    05:48
  • overflowを使って、画像のサイズを変更してみよう
    02:40
  • [チャレンジ]Webサイト2カラムレイアウトを作ってみよう
    05:16

  • セレクタについて
    07:46
  • idセレクタの使い方
    05:03
  • classセレクタの使い方
    04:37
  • idセレクタとclassセレクタを組み合わせる方法
    04:27
  • セレクタを使いこなしてみよう
    08:59
  • オンマウスでリンクの文字色を変える方法
    05:18
  • 特定の親要素の子要素にだけ、スタイルを適応させる方法
    04:47
  • 複数のタグに同じCSSをかける方法
    03:24

  • 擬似クラスfirst-childとlast-child
    04:07
  • 擬似クラスを使った、横並びのナビゲーションを作ってみよう
    06:34
  • 順番を指定してスタイルをかけるnth-childの使い方
    06:13
  • nth-childとnth-of-typeの違いと使い方
    05:57
  • nth-child擬似クラスを使って見やすいテーブルを作ろう
    09:52
  • 最初の文字・行にスタイルを適応させる方法
    05:39
  • 空要素のみにスタイルを適応させる方法
    03:53
  • 直後に隣接している要素にスタイルを適応させる方法
    04:50
  • チェックボックスにチェックを入れた時にスタイルを適応させよう
    04:36

Instructor

NEST online
ウェブデザイン / プログラミング
NEST online
  • 4.3 Instructor Rating
  • 11,900 Reviews
  • 62,399 Students
  • 8 Courses

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。


★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月で未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです


Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座


Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-


など


  • 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.