新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 CSSを学んでいこう (02:47) 無料公開中
- CSSの概要
- 使用ブラウザ、エディタの確認
- 画像素材の確認
- ひな形ファイルの作成
-
#02 CSSの文法に慣れよう (01:31) 無料公開中
- CSSの書き方
- 用語の確認
- コメント
-
#03 はじめてのCSS (02:57) 無料公開中
- styleタグ
- style属性
- cssファイルの作成
-
#04 スタイルの継承を理解しよう (02:25) 無料公開中
- スタイルの継承
- Cascading Style Sheets
-
#05 CSSの仕様を調べてみよう (02:15) 無料公開中
- MDN
- 継承の有無
- inherit
-
#06 デベロッパーツールを使ってみよう (02:48)
- デベロッパーツールの操作方法
- パネルの見方
-
#07 テキストにスタイルを設定しよう (02:57)
- color
- font-size
- font-weight
- text-align
- text-decoration
-
#08 font-familyでフォントを指定しよう (02:59)
- フォント決定の仕組み
- 総称フォント
- font-family
-
#09 line-heightで行の高さを調整しよう (02:45)
- line-height
- em
- 単位なしの指定
-
#10 vertical-alignで位置を調整しよう (02:59)
- vertical-align
- baselineの位置について
-
#11 色の表現方法を覚えよう (02:56)
- キーワードによる色の指定
- rgb()
- 16進数による指定
- hsl()
- rgba()、hsla()
- opacity
-
#12 リストをスタイリングしてみよう (02:46)
- list-style-type
- list-style-position
- list-style-image
- 画像ファイルの指定
-
#13 一括指定プロパティを使ってみよう (02:51)
- 一括指定プロパティ
- MDNによる仕様確認
- 初期値について
-
#14 セレクターの基本をおさえよう (02:59)
- 要素セレクター
- idセレクター
- classセレクター
- 全称セレクター
-
#15 ボックスモデルを理解しよう (02:55)
- ボックスモデル
- width
- height
- border
- padding
- margin
- デベロッパーツールでの確認
-
#16 width､heightを設定してみよう (02:18)
- width
- px, %による指定
- height
- overflow
-
#17 borderで境界線をつけてみよう (02:11)
- border-width、border-style、border-color
- border
- border-top、border-bottom
- border-radius
-
#18 paddingで内側の余白をつけよう (01:43)
- padding
- paddingの一括指定
-
#19 marginで外側の余白をつけよう (01:38)
- margin
- auto
-
#20 marginの相殺を理解しよう (01:48)
- marginの相殺
-
#21 displayプロパティを操作してみよう (02:49)
- ボックスモデルの種類
- block
- inline
- inline-block
- none
-
#22 positionで要素の位置を変えよう (02:33)
- position
- static
- relative
- fixed
-
#23 要素を絶対配置してみよう (02:41)
- 要素の絶対配置
- 動作確認
-
#24 z-indexで重なり順を操作しよう (02:31)
- z-index
-
#25 box-sizingを使ってみよう (01:52)
- box-sizing
- box-sizingの使用例
-
#26 要素に影をつけてみよう (02:01)
- box-shadow
- text-shadow
-
#27 背景のスタイリングをしていこう (02:54)
- background-color
- background-image
- background-size
- background-position
- background
- 一括指定時の注意点
-
#28 セレクターを組み合わせてみよう (02:58)
- セレクター > セレクター
- セレクター セレクター
- セレクター, セレクター
-
#29 隣接結合子を使ってみよう (02:09)
- 隣接結合子
-
#30 属性セレクターを使ってみよう (02:42)
- 属性セレクター
- 完全一致
- 前方一致
- 後方一致
- 部分一致
-
#31 疑似要素で整形してみよう (02:56)
- ::before
- ::after
- data属性との併用
-
#32 疑似クラスを使ってみよう (02:53)
- 疑似クラスと疑似要素の違い
- :hover
- cursor
-
#33 nth-childで順番を指定してみよう (02:36)
- :nth-child()
- :first-child
- :last-child
- :not
-
#34 nth-of-typeを使ってみよう (02:38)
- :nth-child()と:nth-of-type()の違い
- :nth-of-type()
- :first-of-type
- :last-of-type
-
#35 詳細度を計算してみよう (02:43)
- 詳細度とは
- 詳細度の計算方法
-
#36 優先されるスタイルを確認しよう (02:08)
- 詳細度の挙動確認
- style属性
- !important
-
#37 floatを使ってみよう (02:58)
- float
- clear
