夏休みといえば、自由研究ですね！
皆さんは、子どものころ、どんな自由研究をやっていましたか。
僕はといえば、毎年8月31日。最終日の夜に、半泣きで一気に片づける、あのタイプの人間でした。
あれから、ずいぶん経ちました。
いい大人が夏休みに何をやってるんだと言われそうですが、やりました。自由研究。
お家でできる自由研究として、ぜひ参考にしてください！
テーマは「ホームページを作ってみよう！」
ここから先は、りょうちゃん（12歳）の声でお届けします。
りょうちゃんの自由研究「ホームページを作ってみよう！」
① きっかけ
毎日いろんなホームページを見るけれど、どうやって作られているのかは、まったく知りませんでした。
近所でホームページを作っている「よんにゅ」のこもりんに聞いたら、「しくみが分かれば自分でも作れるよ」と言われたので、夏休みの自由研究でためしてみることにしました。
② 予想
ホームページは文字と写真でできているから、それをどこかに書いていくんだと思いました。
でも、色をつけたり大きさを変えたりは、どうやるのか分かりません。そこを調べてみます。
③ 用意したもの
お父さんのMacbook Air。用意したのは、これだけです。
あとは、ブラウザと、パソコンにもともと入っている「テキストエディット」というソフトを使いました。
④ HTMLとCSSについて
作るまえに、こもりんにしくみを教えてもらいました。
最初は、「HTML」と「CSS」という２つのものを教えてもらいました。
HTMLは、「なにを置くか」を決めるもの。ここにタイトル、ここに文、ここに写真、と1つずつ置いていきます。
CSSは、「どう見せるか」を決めるもの。この文字は大きく、色は青く、まん中に、とあとから飾りつけます。
なにを置くかがHTML、どう見せるかがCSS。役わりが2つに分かれていました。
⑤ 実験① 文字を出す
テキストエディットに「こんにちは」と書いて、「jibun.html」で保存。
ダブルクリックすると、ブラウザに「こんにちは」と出ました。文字を書いただけなのに、ホームページになりました。
その文字を「h1」というタグではさむと、大きく太くなりました。「ここがタイトルだよ」と伝えるタグだそうです。
⑥ 実験② 写真を出す
つぎは「img」というタグで、お家のネコの写真を出してみました。タグの中に写真の名前を書くと、ちゃんと出ました。
⑦ 実験③ 見た目をかえる
こんどはCSSで見た目をかえます。「settei.css」というファイルを作って、最初のむずかしい設定はこもりんにやってもらいました。あとは、文字を大きくしたり、青くしたり、まん中によせたり。書いたとおりに、かわりました。
一番おどろいたのは、背景の色をかえたとき。HTMLは何も変えていないのに、CSSを1行書いただけで、ページ全体の色がガラッとかわりました。これが面白かったです。
⑧ わかったこと
今はブラウザで見ているだけですが、サーバにアップすれば、本当にインターネットで見られるようになるそうです。今回やったのは基本のところで、もっと勉強すると、ボタンで動いたり写真がふわっと出たり、ページを「動かす」こともできるとか。つぎは、じぶんだけの動くホームページを作ってみたいです！
以上が、りょうちゃんの自由研究でした！
その後りょうちゃんは、この自由研究を1枚の模造紙にまとめたみたいです。こんなふうに。
——正直に言います。このまとめ、紙でまとめたものをスキャンしたワケではありません。
マス目も、写真のならびも、ぜんぶHTMLとCSSで描いたWebページです。
原稿用紙のマス目にいたっては、画像を貼っているのではなく、線を1本ずつ引いて描いています。
使っている道具は、りょうちゃんが習ったのとまったく同じ。
始めるのはびっくりするほど簡単で、色々覚えると、こうなります。
自由研究、手伝います！
最後に、募集です。
この夏、クリエイティブな自由研究をやってみたい人——お子さんでも、いい大人でも——よかったら、よんにゅが手伝います！
「作ってみたいけどパソコンが不安」「うちの子にやらせてみたい」「模造紙（HTML）を一緒に描いてほしい」、なんでもどうぞ。天草の片すみから、全力でお付き合いします。
ご相談・お問い合わせは、是非お問い合わせページまで。
それでは、次回の記事をお楽しみに！
（りょうちゃん）