コース

CSS

色・大きさ・配置——ページの見た目を整えます。

0 / 22 完了
はじめる →

はじめの一歩全7レッスン

  1. 01CSSって何?
  2. 02CSSはどこに書くの?<link>style.css
  3. 03セレクタってどう書くの?
  4. 04文字や背景に色をつけようcolorbackground-color
  5. 05フォントを選ぼうfont-family
  6. 06文字の大きさをかえようfont-size
  7. 07余白でゆとりをつくるmarginpadding

見た目をもっと自由に全7レッスン

  1. 08クラスで“狙って”飾るclass.class
  2. 09文字を太く・下線でかざるfont-weighttext-decoration
  3. 10文字を中央や右にそろえるtext-align
  4. 11枠線で囲ってみるborder
  5. 12角をまるくして、やわらかくborder-radius
  6. 13影をつけて浮かせるbox-shadow
  7. 14背景に画像をしこうbackground-imagebackground-sizebackground-repeat

大きさとボックス全3レッスン

  1. 15幅と高さを決めるwidthheight
  2. 16ブロックとインラインdisplayblockinline
  3. 17幅がずれる謎を解くbox-sizingborder-box

並べる・配置する全5レッスン

  1. 18Flexboxで横に並べるdisplay: flexgap
  2. 19Gridで格子に並べるdisplay: gridgrid-template-columns
  3. 20positionで重ねる・固定するpositionfixedsticky
  4. 21relativeとabsoluteで重ねるposition: relativeposition: absolute
  5. 22スマホでも見やすく:メディアクエリ@mediamax-width