コース
CSS
色・大きさ・配置——ページの見た目を整えます。
はじめよう
CSSって何？
はじめの一歩全7レッスン
見た目をもっと自由に全8レッスン
- 08クラスで“狙って”飾る
class="note".note - 09文字を太く・下線でかざる
font-weighttext-decorationcolor: inherit - 10文字を中央や右にそろえる
text-align - 11枠線で囲ってみる
borderborder-bottomborder-left - 12角をまるくして、やわらかく
border-radius - 13影をつけて浮かせる
box-shadow - 14背景に画像をしこう
background-imagebackground-sizebackground-repeatbackground-position - 15CSS変数で色をまとめて管理
:root--main-colorvar()
大きさとボックス全3レッスン
並べる・配置する全6レッスン
- 19Flexboxで横に並べる
display: flexgapjustify-contentalign-items - 20Gridで格子に並べる
display: gridgrid-template-columns1frgap - 21positionで重ねる・固定する
position: fixedposition: sticky - 22relativeとabsoluteで重ねる
position: relativeposition: absolutez-index - 23スマホでも見やすく：メディアクエリ
@mediamax-width - 24ダークモードに対応しよう
prefers-color-scheme@media