仕上げて持ち帰る

01 / 03

1行をカードにする

中身はもう動いているので、最後は見た目だけ。li を白いカードにすると、ぐっとアプリらしくなるよ。

list-style: none; で行頭の点を消して、background と border-radius と padding でカードの形を作る。どれも HTML / CSS の回で出てきたものだね。

#list {  list-style: none;  padding-left: 0;}#list li {  background: #ffffff;  border-radius: 8px;  padding: 12px;}

02 / 03

やることの文字とボタンを両端に分けると読みやすい。display: flex; と justify-content: space-between; の組み合わせだよ。

space-between は「あいだに余白をぜんぶ寄せる」という意味。結果として最初のものが左端、最後のものが右端に行くんだ。

#list li {  display: flex;  align-items: center;  justify-content: space-between;}

03 / 03

できあがったら、画面の下にある「端末に保存する」から自分の端末に落とせるよ。

1つのファイル … タップするとその場で開く。まず動くところを見たいときはこちら
3つのファイル（zip） … index.html / style.css / script.js のまま出る。パソコンで続きを書くときはこちら

ここから先は自分の機械の出番。落とした zip をエディタで開けば、今書いたコードの続きから始められるよ。