Webレイアウトをもっと自由に! Flexbox基礎講座
4.9 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
42 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Webレイアウトをもっと自由に! Flexbox基礎講座 to your Wishlist.

Add to Wishlist

Webレイアウトをもっと自由に! Flexbox基礎講座

CSS3より新たに追加された「Flexbox」を使って、これまでよりも自由にWebページのボックスレイアウトを行なおう!
4.9 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
42 students enrolled
Last updated 1/2017
Japanese
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Flexboxの基本(概要・記述方法)を理解することで、これまでの floatプロパティに加えて 自由度の高いWebレイアウトを手軽に行なうことができます。
  • サンプルページのレイアウトを行なうことで、Flexboxを使用したWebレイアウト方法を より具体的に理解することができます。
View Curriculum
Requirements
  • 本講座は、あくまでも Flexboxの基本を学ぶ講座となっています。HTML やCSSの基本については細かな解説などは行なっておりませんので、もし HTMLなどのスキルをお持ちでない方は 別途 各種講座や書籍などで学習されることをオススメいたします。
  • 本講座では、テキストエディタとして「Brackets」を使用しています。受講に際しては「Sublime Text」や「Atom」、「Coda」や「Dreamweaver」などのさまざまなテキストエディタにて受講いただけますが、ビデオレクチャーと同様の操作を行ないたい場合は「Brackets」を使用することをオススメいたします。
  • 講座内で使用をする教材( flexbox_basics.zip )は、最初の講義「講座概要と受講準備」でダウンロードしていただけます。
  • Flexboxにつきましては、Webブラウザーの種類やバージョンによって対応状況が異なっています。Flexbox対応外のWebブラウザーやバージョンについては、ビデオレクチャー通りのレイアウトにならない場合がありますことをご理解ください。各Webブラウザー対応状況:『Can I Use ? | Flexbox』( http://caniuse.com/#feat=flexbox )
Description

これまで Webページのレイアウトを行なう際には、CSSの floatプロパティを使用して行なうことが一般的でした。

ただ floatプロパティを使ったレイアウトは、表現をする上で 少しだけ機能が足りない面や使用すること自体が難解に感じられる面もありました。

そんなWebレイアウトの表現にCSS3から新たに加わったものが「Flexible Box Layout Module」、通称『Flexbox』です。

Flexboxでは、Webページのボックスレイアウトを行なう上で非常に分かりやすいプロパティが用意され、これまで表現をしたかったレイアウトを手軽に行なえるようになりました。

この講座は、Flexboxの考え方や基本的な記述方法・各プロパティの意味などを2時間半強のビデオレクチャーを通じて 学んでいただけるものとなっています。

また、講座の後半ではカフェサイトのメニューページのレイアウトを行ないながら、Flexboxの理解を深めていただけるようになっています。

ぜひ みなさんのスキルの1つにFlexboxを加えていただき、これまでよりも自由にWebレイアウトを行なっていただければと思います。

Who is the target audience?
  • 「Webデザイナー」や「Webコーダー」などのお仕事をなさっている方に、既存の方法より 自由度の高い Webレイアウト方法の1つとして Flexboxのスキルを加えていただければと思います。
  • 「Webデザインを勉強中の方」や「これから実務に従事する方・従事したての方」に、Flexboxを使用した手軽な Webレイアウトで たくさんのWebページを制作してもらい、たくさんの制作経験を積んでいただければと思います。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 17 Lectures Collapse All 17 Lectures 02:37:34
+
Flexbox 基礎パート
10 Lectures 01:32:11
  • あいさつ
  • 講座の概要説明
  • 受講生が知っておくべきことや準備すべきこと
Preview 05:42

  • 素材の確認
素材の確認とFlexboxの基本的な記述(1)
11:01

  • display: flex; について
  • flexコンテナとflexアイテムについて
  • flex-wrapプロパティの使用方法
素材の確認とFlexboxの基本的な記述(2)
08:19

  • justify-content: flex-start; について
  • justify-content: flex-end; について
  • justify-content: center; について
  • justify-content: space-between; について
  • justify-content: space-around; について
justify-contentプロパティについて
08:56

  • align-items: flex-start; について
  • align-items: flex-end; について
  • align-items: center; について
  • align-items: baseline; について
  • align-items: stretch; について
align-itemsプロパティについて
12:42

  • orderプロパティの使用方法
orderプロパティについて
12:37

  • flex-basisプロパティの使用方法
flex-basisプロパティについて
07:45

  • flex-growプロパティの使用方法
flex-growプロパティについて
08:06

  • flex-shrinkプロパティの使用方法
flex-shrinkプロパティについて
07:46

  • flexプロパティの使用方法
flexプロパティについて
09:17
+
Flexbox サンプルレイアウト パート
7 Lectures 01:05:23

  • 「Coffeeメニュー」のFlexアイテムのスタイル設定
  • 「Coffeeメニュー」のFlexboxによるレイアウト設定
カフェサイトのメニューページをレイアウトしよう(2)
11:57

  • 「Teaメニュー」のFlexアイテムのスタイル設定
  • 「Teaメニュー」のFlexboxによるレイアウト設定
カフェサイトのメニューページをレイアウトしよう(3)
10:50

  • 「Foodメニュー」のFlexアイテムのスタイル設定
カフェサイトのメニューページをレイアウトしよう(4)
08:03

  • 「Foodメニュー」のFlexboxによるレイアウト設定
カフェサイトのメニューページをレイアウトしよう(5)
09:25

  • 「Sweetsメニュー」のFlexアイテムのスタイル設定
カフェサイトのメニューページをレイアウトしよう(6)
07:11

  • 「Sweetsメニュー」のFlexboxによるレイアウト設定
  • おわりに
カフェサイトのメニューページをレイアウトしよう(7)
11:12
About the Instructor
CCF アカデミー
4.8 Average rating
28 Reviews
85 Students
5 Courses
ウェブデザイン / IT / ソフトウェア

『 Design of CreativeWork 』
 ー クリエイティブワーク( 仕事・人・スキル・ワークフロー )の最適化 ー

クリエイティブセンター福岡(CCF)は、福岡全体で SOHO/フリーランサーや制作会社が 仕事や教育を通じて大きな有機的に繋がっている状態を構築し、クリエイティブワークの最適化を図ります。
そして、CCFアカデミーでは オンライン/オフラインの教育コンテンツにより、クリエイターやマーケター、プランナーの支援をすることで、個人の教育サポート、ひいては クリエイティブ業界全体のサポートを行います。