完成・公開しよう

公開とは置き場所を変えること

いま開いているファイルは、まだ自分の手元にあります。公開とは、この index.html と style.css を、誰でも取りに来られる場所に置くことです。GitHub Pages や Netlify のような場所に 2 つのファイルを上げると URL がひとつもらえて、それを渡すだけで見てもらえます。特別な書き直しは要りません。

出す前の最後の 2 か所

検索結果に出るのはページの説明の 1 行です。長いと途中で切れてしまうので、いちばん伝えたいことだけを残して短くします。ここでは「HTML と CSS を学んでいる」を先頭に置きます。

もうひとつ、フォーカスの枠が文字にぴったりくっついていると読みにくいので、少しだけ離します。outline-offset は枠と要素のあいだのすきまです。

これでサイトは完成です。骨組みから配色、レイアウト、スマホ対応まで、ぜんぶ自分の手で書きました。

次は動きをつける

いまのページは、どこを押しても表示が変わりません。メニューを押したら開く、送信したらお礼が出る、写真を押したら大きくなる。この「動き」を書くのが JavaScript です。HTML が骨、CSS が見た目、JavaScript が動き。3 つめを覚えると作れるものが一気に増えます。つぎのコース「JavaScript入門」で、このサイトに動きを足していきましょう。

1. ページの説明を、いちばん伝えたいことだけの 1 文に整える
2. フォーカス枠に outline-offset を足して、文字から少し離す
3. 完成した 2 つのファイルを、公開できる状態として見直す