× 無料のユーザー登録をすると学習状況を管理することができるようになります

CSS入門 (全22回)

ホームページの見た目を制御することができるCSSについて基本的な使い方を学んでいきます。

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

タイトル 内容
#01 CSSとはなにか?
  • 概要
  • 必要となる知識
  • 必要となるツール
  • レッスンがカバーする範囲
  • 仕様の確認方法
  • index.htmlの作成
#02 はじめてのCSS
  • styleタグ内での記述
  • style属性での記述
  • 外部ファイルでの記述
#03 セレクタとプロパティを理解しよう
  • セレクタ
  • プロパティ
  • *
  • 要素セレクタ
  • idセレクタ
  • classセレクタ
#04 もっとセレクタを使ってみよう
  • a, b
  • a b
  • a > b
  • a + b
  • ab
#05 属性セレクタを使ってみよう
  • 属性セレクタ
#06 擬似クラスを使ってみよう
  • :first-child
  • :link
  • :visited
  • :hover
  • :active
  • :focus
#07 擬似要素を使ってみよう
  • :first-line
  • :first-letter
  • :before
  • :after
#08 セレクタの詳細度を理解しよう
  • 詳細度
#09 プロパティの値を指定しよう
  • px
  • em
  • %
  • RGB/色名
#10 ボックスモデルを理解しよう
  • width
  • height
  • border
  • padding
  • margin
#11 borderで境界線のスタイルを変えよう
  • border-color
  • border-width
  • border-style
  • border
#12 paddingで余白を制御しよう
  • padding
#13 marginとmarginの相殺を理解しよう
  • margin
  • marginの相殺
#14 文字に関するプロパティを使ってみよう
  • color
  • font-size
  • font-family
  • font-weight
  • text-align
  • text-decoration
#15 list-styleでリストのスタイルを変えよう
  • list-style-type
  • list-style-image
  • list-style-position
  • list-style
#16 cursorでカーソルの形状を変えよう
  • cursor
#17 backgroundで背景スタイルを変えよう
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment
  • background
#18 displayで要素の配置方法を変えよう
  • display
  • ブロックボックスとブロックレベル要素
  • インラインボックスとインラインレベル要素
#19 positionで位置を調整してみよう
  • position
#20 z-index、overflowを理解しよう
  • z-index
  • overflow
#21 line-height、vertical-alignを理解しよう
  • line-height
  • vertical-align
#22 float、clearを使ってみよう
  • float
  • clear
#01 CSSとはなにか?
89日前
CSSを理解するにはHTMLの理解が必須となります。以下のレッスンを参考にしてみてください。

・HTML入門 (全24回)
http://dotinstall.com/lessons/basic_html_v3