自分で1枚のWebページを作り、ブラウザで開いて直していきます。
このレッスンが終わると、指示だけで動くものを1つ作り、見ながら直せるようになります。
第2章までは、すでにあるファイルを読む・書き換えることをしてきました。 このレッスンでは、何も無いところから作ります。
作るのは、ブラウザで開ける1枚のページです。 自己紹介でも、自社のサービス紹介でも、社内の案内でも構いません。
お題が思いつかない方へ
次のどれかを選んでください。どれも15分で形になります。
新しいフォルダを1つ作って、そこで始めます。
手順
1. 黒い画面で、新しいフォルダを作って移動します。
mkdir ~/Desktop/page-renshu && cd ~/Desktop/page-renshu
2. claude で起動して、次のように頼みます。
（かっこの中はご自身の内容に置き換えてください）
``` 1枚のWebページを作って。index.html というファイル1つにまとめて。
載せる内容： - 見出し：（会社名やお名前） - 何をしているか：（1〜2文で） - できること3つ：（3つ書く） - 連絡先：（メールアドレスなど）
スマホでも読みやすくして。派手にしすぎず、落ち着いた見た目にして ```
うまくいくと
index.html というファイルが1つできます。確認を求められたら、内容を見て許可してください。
作っただけでは、どうなったか分かりません。必ず目で見ます。
手順
次のように頼むと、ブラウザで開いてくれます。
いま作ったページをブラウザで開いて
開かないときは、デスクトップの page-renshu フォルダを開いて、
index.html をダブルクリックしてください。
うまくいくと
ブラウザに、いま指定した内容のページが表示されます。 これがあなたの作ったページです。 ファイルはご自身のパソコンの中にあります。
ここで感じてほしいこと
いま打ったのは、日本語の指示1回だけです。 HTMLもCSSも書いていません。それでも、開けるページができています。
ここからが本番です。1回に1つずつ直します。
直し方の例
気になったところを、1つずつ伝えます。毎回ブラウザを再読み込みして確かめます。
見出しの文字が大きすぎるので、少し小さくして
背景を白から、少しだけ温かみのある色にして
「できること3つ」を横並びの箱にして
スマホの幅で見たときに、文字が窮屈なので余白を広げて
まとめて頼まないでください
「全体的にいい感じにして」と頼むと、直したくないところまで変わります。 1回1か所にすると、どの指示が効いたか分かります。
3回直したら十分です
完璧を目指さないでください。このレッスンの目的は、 「作る→見る→直す」の往復ができるようになることです。
見落としが一番多いのがここです。
手順
スマホの幅（375px）で見たときに崩れていないか確認して、
崩れていたら直して
ご自身の目でも確かめられます。ブラウザの幅を、画面の端をつかんで ぐっと狭くしてみてください。文字がはみ出したり、横にスクロールが出たら崩れています。
うまくいくと
幅を狭くしても、文字が読める大きさのまま、縦に並び替わります。
正直にお伝えしておきます。
ここまでは、自分でできます
今日やったことで十分です。 これだけでも、伝わり方がまるで変わります。
ここからは、専門にやっている人の仕事です
お客様に出す会社のサイトになると、見た目のほかに次が必要になります。
たたき台まで自分で作って、そこから先を相談する。 これができると、任せるときの伝わり方が段違いによくなります。
同じやり方で、簡単な道具も作れます。余裕があれば試してみてください。
お題の例
金額を入力すると、消費税込みの金額と、源泉徴収を引いた手取りを
計算して表示するページを作って。index.html 1つにまとめて
やることリストのページを作って。追加・完了・削除ができて、
閉じても内容が残るようにして
作ったものを人に配る前に
応用コース「仕事をツールにする」に、作る前に決めることと、 使われるようにする段取りをまとめてあります。人に渡す前に読んでください。