-
#01 はじめてのCSSを書いてみよう (02:53)
- 完成版の確認
- styleタグ
- セレクタ、プロパティ
- CSSファイルの作成、読み込み
-
#02 デベロッパーツールを使ってみよう (02:36)
- デベロッパーツールの起動
- Elmentsパネル
- HTML/CSSの確認
- Styles/Computedタブ
-
#03 色の表現方法を学んでいこう (02:44)
- 色キーワード
- rgb()
- 16進数による表現
- コメントの書き方
-
#04 フォントを設定していこう (01:29)
- color
- font-family
-
#05 CSSのボックスモデルを確認しよう (01:42)
- background-color
- ボックスモデル
-
#06 marginで外側の余白を設定しよう (01:57)
- marginの設定
-
#07 divタグを使ってみよう (02:36)
- div
- class
- 中央揃えのやり方
-
#08 Flexboxを使ってみよう (02:51)
- 余白の設定
- Flexbox
-
#09 アイコン画像のスタイリングをしよう (02:34)
- 半角空白区切りのセレクタ
- border-radius
- border-width
- border-style
- border-color
-
#10 見出しのスタイルを整えよう (01:53)
- 要素の検証
- 見出しのスタイリング
-
#11 リストのスタイリングをしていこう (02:55)
- リストのスタイリング
- Flexbox
-
#12 align-itemsを使ってみよう (01:47)
- align-items
-
#13 セレクタの適用範囲を限定しよう (02:47)
- sectionのスタイリング
- >区切りのセレクタ
-
#14 line-heightで行間を調整しよう (02:17)
- 余白の調整
- line-height
-
#15 プロフィールサイトを完成させよう (01:19)
- footerのスタイリング
- プロフィールサイトの完成
ギャラリー
このレッスンについて
- 最終更新日
- 2019年8月22日
- バージョン情報
- Google Chrome 65.0 / Visual Studio Code 1.36.1
- 関連キーワード (5)
補足情報 事前に学習すべきレッスンについて
このレッスンは「はじめてのHTML」の続きから進められています。事前に以下のレッスンを受講するようにしましょう。
・はじめてのHTML (全14回)
https://dotinstall.com/lessons/basic_html_v5