9/19(Thu)

今日の生放送

CSS実践 レイアウト・アニメーションを極める

CSS実践 floatを極める

第1回:2015年6月20日公開

60min

CSS実践 floatを極める

おためし受講する(5分)

コース概要

CSSの中でも特に重要なレイアウトやアニメーション効果に関する技術を集めました。

1限1テーマ、float、position、animationなどについて極めていきましょう。

■ 第2回の授業で使用するテンプレート
http://behomazn.com/schoo/20150627/

こんな人にオススメ

floatを完全にマスターしたい方

担当の先生

パーソナリティ

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

  • 青島 莉子

    青島 莉子

    スクー放送部

  • 廣松 あすか

    廣松 あすか

    スクー放送部

参加したい受講生 : 1804

カテゴリー

タグ

サンプルファイル

授業で使用するファイル
月額980円で、4,600本以上の授業が見放題

授業リスト

CSS実践 floatを極める

2015年6月20日公開

60min.

CSS実践 positionを極める

2015年6月27日公開

60min.

positionを理解する

CSS実践 レイアウト・アニメーションを極める (全5回)の2回目です。
そもそもfloatではなくpositionを使う理由は?また、position指定しかできない場合はどんな時?position指定してみたけど全く効かない経験がある人はこの授業でpositionを徹底マスターしましょう。

■ 今回の授業で使用するテンプレート
http://behomazn.com/schoo/20150627/

スライド資料

CSS実践 センタリングを極める

2015年7月4日公開

60min.

センタリングを理解する

CSS実践 レイアウト・アニメーションを極める (全5回)の3回目です。
センター配置のための様々なcssプロパティーがあるが使い所がわからない、またはセンター配置が効かなくて困った経験がある人のための授業です。この授業でセンター配置を完全に理解しマスターしてしまいましょう。

  • 自己紹介&アジェンダ
  • 01:59
  • 演習の元となるhtmlの準備
  • 03:27
  • Inlineとかblockの振る舞い
  • 02:24
  • Inlineのセンタリング
  • 01:04
  • disply:Inlineを書いてみよう
  • 05:46
  • disply:blockを書いてみよう
  • 08:13
  • 親宣言していこう
  • 05:44
  • blockの親要素と子要素
  • 07:41
  • Q:display:inline-blockとfloatとの使い分けはどのように?
  • 01:15
  • Q:heightとwidthはpxで指定されていましたが、remで指定しなくてもいいものなんでしょうか?
  • 02:07
  • Q:positionだとウインドウサイズを変えた時に動いちゃいますけど、動かないようにセンタリングはできないのでしょうか?
  • 00:56
  • Q:vertical-alignのお話が出ましたが、imgに対して使うことはありますか?
  • 02:37
  • Q:margin:0 auto; した場合margin-bottomが効かない?ですが、何か方法はありますか?
  • 02:58
  • Q:ブログや企業サイトなど殆どのサイトは全体をセンタリングしていますが、全体をセンタリングをしない方がよいケースもあるのでしょうか?
  • 01:27
  • Q:remでも%でもどちらでもいいのでしょうか。それともremのほうがお薦めでしょうか。
  • 01:16
  • Q:「overflow:hidden を使えない場合がある」の件ですが…
  • 01:11
  • Q:センターにする時に、displayプロパティでした方がいいですか?
  • 01:22
  • Q:親要素にblockを使って、子要素にinline-blockを使用する場合はどんな場面があるでしょうか?
  • 02:15
  • Q:セマンティック = 意味論的 って意味でしょうか?
  • 00:56
  • Q:ulを真ん中に寄せるのはどんな方法がおすすめですか?

スライド資料

CSS実践 hoverを極める

2015年7月11日公開

60min.

スライド資料

CSS実践 animationを極める

2015年7月18日公開

60min.

animationを理解する

CSS実践 レイアウト・アニメーションを極める (全5回)最終回です。
css3の登場で快適に動くanimationプロパティがいくつも登場しました。マウスオーバーの概念の無いスマホサイトでは、アイコンやボタンなどが動いていると注意を引きつける事ができます。モバイルフレンドリーなサイトを魅力的にするanimation手法をこの授業でマスターしましょう。

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ