ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト

学習状況の管理、レッスンのソースコード閲覧には 無料ユーザー登録 が必要です。

CSS3の基礎 (全19回)

多彩な表現力でWebサイトの見た目を制御することができるCSS3について学びます。

全19回レッスンの詳細と、完了状況は以下のとおりです。

  タイトル 学習状況
CSS3の特徴を説明したあとに、必要となる知識やツールについて解説していきます。
 未完了
 
各ブラウザでのCSS3の対応状況を説明し、ベンダープレフィックスについて解説していきます。
 未完了
 
枠線に角丸をつけていく方法について学びます。
 未完了
 
border-radiusを使って実現できるテクニックについて解説していきます。
 未完了
 
CSS3で使える色の指定方法、要素の透明化について解説してきます。
 未完了
 
ボックス要素に影をつけていく方法を解説していきます。
 未完了
 
テキストに影をつけていく方法について学びます。
 未完了
 
線形のグラデーションをつけていく方法について学びます。
 未完了
 
円形のグラデーションをつけていく方法について解説していきます。
 未完了
 
要素を拡大・縮小していく方法について解説していきます。
 未完了
 
要素を移動、回転、傾斜させる方法について解説していきます。
 未完了
 
要素が変化するときのアニメーションを設定してみます。
 未完了
 
キーフレームを使ってもう少し複雑なアニメーションを実現してみます。
 未完了
 
キーフレームを使ったアニメーションの動作確認をしていきます。
 未完了
 
要素の属性でマッチングをかけていくセレクタについて確認していきます。
 未完了
 
子要素のうち、n番目にくる要素にスタイルをあてる方法について解説していきます。
 未完了
 
ある要素のうち、n番目に来る要素を指定する方法について学びます。
 未完了
 
フォームなどで使える、要素の状態で指定ができるセレクタについて学びます。
 未完了
 
CSS3を使う際に便利に使えるジェネレータをいくつか紹介していきます。
 未完了
 
タイトル 内容
#01 CSS3とは何か？
  • 主な特徴
  • 必要な知識
  • 必要なツール
  • レッスンの範囲について
#02 ベンダープレフィックスとは何か？
  • CSS3の対応状況
  • ベンダープレフィックスの説明
  • ベンダープレフィックスの種類
  • caniuse.comの使い方
#03 角丸をつけてみよう
  • border-radius
#04 角丸を使ったテクニック
  • 円形の作り方
  • 画像の切り抜き方
#05 色の指定と透明化
  • rgba
  • opacity
#06 ボックス要素に影をつけてみよう
  • box-shadow
#07 テキストに影をつけてみよう
  • text-shadow
#08 線形グラデーションをつけてみよう
  • linear-gradient
#09 円形グラデーションをつけてみよう
  • radial-gradient
#10 要素を変形させてみよう (1)
  • transform:scale
  • transform-origin
#11 要素を変形させてみよう (2)
  • transform:translate
  • transform:rotate
  • transform:skew
#12 簡単なアニメーションをつけてみよう
  • transition
#13 キーフレームでアニメーション (1)
  • animation
#14 キーフレームでアニメーション (2)
  • animation
  • 動作確認
#15 属性セレクタを使ってみよう
  • a[href="foo"]
  • a[href^="foo"]
  • a[href$="foo"]
  • a[href*="foo"]
#16 n番目に来る要素を指定する
  • nth-child
  • first-child
  • last-child
  • only-child
#17 ある要素のうち、n番目に来る要素
  • nth-of-type
  • first-of-type
  • last-of-type
  • only-of-type
#18 要素の状態で指定するセレクタ
  • :disabled
  • :enabled
  • :checked
#19 CSS3のジェネレータを見てみよう
  • http://www.css3maker.com/
  • http://border-radius.com/
  • http://css3button.net/
  • http://www.colorzilla.com/gradient-editor/
#02 ベンダープレフィックスとは何か？
百式管理人
(194日前)
動画中で紹介されているcaiuse.comへは以下からどうぞ。
http://caniuse.com/
#03 角丸をつけてみよう
百式管理人
(194日前)
プログラミングとは直接関係ないですが、「角丸」は「かくまる」ではなくて「かどまる」と読みますので間違えないようにしましょう...。
#05 色の指定と透明化
百式管理人
(194日前)
rgbaはそれぞれ「(r)ed、(g)reen、(b)lue、(a)lpha」の略です。最後のalphaは透明度を表します。
#07 テキストに影をつけてみよう
百式管理人
(194日前)
text-shadowは奥が深くて、うまく使えばネオンやエンボスといった効果を実現することができます。以下のサイトを参考にいろいろ試してみてください。
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
http://kachibito.net/web-design/css3-text-shadow-sample.html
http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/
#16 n番目に来る要素を指定する
百式管理人
(191日前)
nth-child(n)と似たもので、nth-last-child(n)というものがあります。これは先頭からでなく、最後から数えてn番目の要素を選択するときに使います。
百式管理人
(144日前)
直接プログラミングに関係ありませんが、even（偶数）とodd（奇数）がごっちゃになってしまう方は以下のように覚えておくとよいでしょう。
even = 4文字 = ぐうすう（4文字）
odd = 3文字 = きすう（3文字）
ちょっとしたコツですが、これなら間違えないですね。
#17 ある要素のうち、n番目に来る要素
百式管理人
(191日前)
nth-of-type(n)と似たもので、nth-last-of-type(n)というものがあります。これは先頭からでなく、最後から数えてn番目の要素を選択するときに使います。