何を紹介するか決める

何をする：何をする: 自己紹介ページに入れる内容を5項目決めます。 どうやる: ノートに「ニックネーム」「好きな教科」「好きなこと」「今がんばっていること」「将来やってみたいこと」のように書きます。住所、学校名、本名、顔写真、電話番号、SNSアカウントは書きません。 なぜ: Webページは人に見せる可能性があるため、最初に安全な内容だけを選ぶことが大切だからです。

どうやる：

なぜ：

ページの設計図を紙に描く

何をする：何をする: 画面のどこに何を置くか、レイアウト案を作ります。 どうやる: A4用紙に大きな四角を1つ描き、上にタイトル、中央に紹介文、下に好きなことのリストを書くなど、配置を決めます。 なぜ: いきなりコードを書くより、先に設計図を作ると、完成形を考えながら作業できるからです。

どうやる：

なぜ：

作業用フォルダとファイルを作る

何をする：何をする: HTML と CSS のファイルを保存する場所を作ります。 どうやる: パソコンに「profile_page」というフォルダを作り、その中に `index.html` と `style.css` という2つのファイルを作ります。 なぜ: Webページは複数のファイルでできていることが多く、同じフォルダに入れると管理しやすいからです。

どうやる：

なぜ：

HTML でページの骨組みを書く

何をする：何をする: HTML で見出し、文章、リストを作ります。 どうやる: `index.html` に、タイトルを表す `

`、文章を表す `

`、リストを表す `

` と `
• ` を使って自己紹介を書きます。HTML(読み仮名: エイチティーエムエル、Webページの文章や構造を決める言語) のタグは、開始タグと終了タグをセットで書きます。 なぜ: HTML はページの内容と意味をブラウザに伝える役割を持っているからです。

  どうやる：

  なぜ：

CSS ファイルを読み込む

何をする：何をする: HTML と CSS をつなげます。 どうやる: `index.html` の `` の中に `` と書きます。CSS(読み仮名: シーエスエス、Webページの色や配置を整える言語) を読み込むことで、見た目を別ファイルで管理できます。 なぜ: 内容を書くファイルと見た目を整えるファイルを分けると、あとから修正しやすくなるからです。

どうやる：

なぜ：

CSS で色・文字・余白を整える

何をする：何をする: 背景色、文字の大きさ、余白を設定します。 どうやる: `style.css` に `body`、`h1`、`p`、`ul` などの指定を書きます。たとえば、`font-size: 18px;` で文字の大きさを、`padding: 20px;` で内側の余白を決めます。 なぜ: 同じ内容でも、読みやすいデザインにすると情報が伝わりやすくなるからです。

どうやる：

なぜ：

ブラウザで表示を確認する

何をする：何をする: 作ったページが正しく表示されるか確認します。 どうやる: `index.html` をダブルクリックしてブラウザで開きます。文字が出ない、色が変わらない、レイアウトが崩れるなどの問題をノートに記録します。 なぜ: コードは少しの入力ミスで表示が変わるため、実際の画面で確認する必要があるからです。

どうやる：

なぜ：

改善して完成版を作る

何をする：何をする: 見やすさと安全性をチェックして修正します。 どうやる: 文字の大きさ、色の見やすさ、項目の順番を直します。最後に、保護者または先生に見てもらい、個人情報が入っていないか確認します。 なぜ: Web制作では、作って終わりではなく、見る人に伝わりやすいように改善することが大切だからです。

どうやる：

なぜ：