新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 CSSを学んでいこう (01:40) 無料公開中
- CSSの概要
- 学習の流れ
- 使用ブラウザ、エディタの確認
-
#02 学習の準備を整えよう (02:35) 無料公開中
- 画像素材の確認
- プロジェクトフォルダの設定
- index.htmlの作成
-
#03 はじめてのCSS (02:35) 無料公開中
- styleタグ
- linkタグ
- cssファイルの作成
- style属性
-
#04 CSSの文法に慣れよう (02:21) 無料公開中
- CSSの書き方
- 用語の確認
- コメント
-
#05 スタイルの継承を理解しよう (02:01) 無料公開中
- スタイルの継承
- Cascading Style Sheets
-
#06 CSSの仕様を調べてみよう (02:05)
- MDN
- 継承の有無
- inherit
-
#07 デベロッパーツールを使ってみよう (02:35)
- デベロッパーツールの操作方法
- パネルの見方
-
#08 テキストにスタイルを設定しよう (02:37)
- color
- font-size
- font-weight
- text-align
- text-decoration
-
#09 font-familyでフォントを指定しよう (02:26)
- フォント決定の仕組み
- font-family
- 総称フォントファミリー
-
#10 line-heightで行の高さを調整しよう (02:31)
- line-height
- em
- 単位なしの指定
-
#11 単位無しでline-heightを指定しよう (02:09)
- 単位ありの指定
- 単位なしの指定
-
#12 vertical-alignで位置を調整しよう (02:42)
- vertical-align
- baselineの位置について
-
#13 RGBAを使った色の表現方法を覚えよう (02:35)
- キーワードによる色の指定
- rgba()
- rgb()
- 16進数による指定
-
#14 HSLAを使った色の表現方法を覚えよう (02:23)
- hsla()
- hsl()
- opacity
-
#15 リストをスタイリングしてみよう (02:58)
- list-style-type
- list-style-position
- list-style-image
- 画像ファイルの指定
-
#16 一括指定プロパティを使ってみよう (02:47)
- 一括指定プロパティ
- MDNによる仕様確認
- 初期値について
-
#17 クラスセレクターの基本をおさえよう (01:28)
- クラスセレクター
-
#18 ボックスモデルを理解しよう (02:42)
- ボックスモデル
- width
- height
- border
- padding
- margin
- デベロッパーツールでの確認
-
#19 width､heightを設定してみよう (02:42)
- width
- px, %による指定
- height
- overflow
-
#20 borderで境界線をつけてみよう (02:57)
- border-width、border-style、border-color
- border
- border-top、border-bottom
- border-radius
-
#21 paddingで内側の余白をつけよう (01:47)
- padding-top
- padding-left
- padding
-
#22 marginで外側の余白をつけよう (01:48)
- margin-bottom
- margin
- margin-left
- margin-right
- auto
-
#23 marginの相殺を理解しよう (01:41)
- marginの相殺
-
#24 displayプロパティについて理解しよう (01:59)
- block
- inline
- inline-block
- 挙動の違い
-
#25 displayプロパティを操作してみよう (02:33)
- displayプロパティの使用例
- none
-
#26 positionで要素の位置を変えよう (02:39)
- position
- static
- relative
- fixed
-
#27 要素を絶対配置してみよう (02:49)
- 要素の絶対配置
- 動作確認
-
#28 z-indexで重なり順を操作しよう (02:18)
- z-index
-
#29 box-sizingを使ってみよう (02:00)
- box-sizing
- box-sizingの使用例
-
#30 calcで単位が違う計算をしてみよう (02:50)
- calc
-
#31 要素に影をつけてみよう (02:20)
- box-shadow
- text-shadow
-
#32 背景のスタイリングをしていこう (03:00)
- background-color
- background-image
- background-size
- background-position
- background
- 一括指定時の注意点
-
#33 floatを使ってみよう (02:26)
- float
- clear
リリース情報（note）
詳細情報
- 最終更新日
- 2019年11月28日
- バージョン情報
- Chrome 78.0 / Visual Studio Code 1.38.0
