完成・公開しよう
公開とは置き場所を変えること
いま開いているファイルは、まだ自分の手元にあります。公開とは、この index.html と style.css を、誰でも取りに来られる場所に置くことです。GitHub Pages や Netlify のような場所に 2 つのファイルを上げると URL がひとつもらえて、それを渡すだけで見てもらえます。特別な書き直しは要りません。
出す前の最後の 2 か所
検索結果に出るのはページの説明の 1 行です。長いと途中で切れてしまうので、いちばん伝えたいことだけを残して短くします。ここでは「HTML と CSS を学んでいる」を先頭に置きます。
もうひとつ、フォーカスの枠が文字にぴったりくっついていると読みにくいので、少しだけ離します。outline-offset は枠と要素のあいだのすきまです。
a:focus-visible,
.form-input:focus-visible,
.submit-button:focus-visible {
outline: 3px solid #0071e3;
outline-offset: 2px;
}これでサイトは完成です。骨組みから配色、レイアウト、スマホ対応まで、ぜんぶ自分の手で書きました。
次は動きをつける
いまのページは、どこを押しても表示が変わりません。メニューを押したら開く、送信したらお礼が出る、写真を押したら大きくなる。この「動き」を書くのが JavaScript です。HTML が骨、CSS が見た目、JavaScript が動き。3 つめを覚えると作れるものが一気に増えます。つぎのコース「JavaScript入門」で、このサイトに動きを足していきましょう。
課題
- ページの説明を、いちばん伝えたいことだけの 1 文に整える
- フォーカス枠に
outline-offsetを足して、文字から少し離す - 完成した 2 つのファイルを、公開できる状態として見直す