福岡県福岡市西区のプログラミングスクールなら「iTeen(アイティーン)姪浜校」!!教育のプロが、プログラミングを一から丁寧に個別指導します。小学生から高校生対応!福岡県福岡市西区のプログラミング、IT知識の個別指導「iTeen姪浜校」

【生徒作品紹介】HTML,CSSでホームページ作ってみた!
1,576 Views
【生徒作品紹介】HTML,CSSでホームページ作ってみた!

生徒が作成した音楽教室のホームページのご紹介です。


頑張ってとても素晴らしいホームページを作ってくれました!

紹介動画もYouTubeにアップしています





※ここから下の文章はすべて生徒が作成したものです!すごい!!


もくじ


1. 製作者の概要

2. ページ作成においての目的

3. 学んだこと

4. 各ページの紹介

5. 工夫点

6. 大変だった点

7. 今後のことについて




1. 製作者の概要


iTeenに通う生徒の一人です。

もとからゲームが好きで、いつか自分が作りたいゲームを作れるようになることを目標に、プログラミングを学ぶために毎週いろんなことを学習しています。






2. ページ作成におての目的


ホームページ作成について、さらに理解を深めるためにこのホームページを制作しました。なお、題材は昔通っていた経験もあるピアノ教室を選びました。





3. 学んだこと


このページはHTMLCSSのみを用いて制作しました。

HTMLとは、ホームページなどを制作するために欠かせない言語です。今ネット上にあるどんなホームページも主にこれを基盤として構成されています。


CSSとは、そのHTMLで作成されたページを華やかにするために用いられる言語です。例えばHTMLで書かれた文字の色や大きさを変えたりなど、そのほかにも様々なことができます。


恥ずかしながら、忘れっぽい性格ゆえに結構な頻度で学んだことを忘れてしまうことがあるので困ったら一人で悩まず、すぐに調べたり人に聞くことの大切さを痛感しました……






4. 各ページの紹介


メインページ
ホームページを見るにあたって一番はじめに開くことになるページなので、そこからさまざまなページに飛べるようになっています。

ページを開くと一番最初に目に入ってくる大きなメイン画像もポイントです。




アバウトページ
本当にありそう、ということを意識してページの紹介文を書きました。

教室長にまつわるあれこれはご本人にきちんと許可済みです◎

実はこのページにiTeen姪浜校のホームページまで飛べるリンクをこっそり隠しています。



コース紹介ページ
これもまた、本当にありそうを目指しました。

詳しい相場を調べることを忘れたのでレッスン料はだいたいです。ごめんなさい!



体験レッスンページ
このページにはお問い合わせフォームとは別に体験レッスン用のフォームを用意しています。

どこがフォームなのかわかりやすくするために点線で囲ったのがポイントです。



アクセスページ
思いっきりiTeen姪浜校の所在地がグーグルマップで表示されています。

下にある住所も、もちろんiTeen姪浜校のものです。




お問い合わせページ

体験レッスン用のフォームとほとんど仕組みは一緒です。
このページにはフッターからも移動することができます。





5. 工夫点


ピアノ教室らしいシックなイメージに色調をそろえたところや、彩度の低い配色のなかでも極力見やすいホームページになるようにしたところ。

それから、誰が見ても分かりやすいようにするというところにもこだわりました。






6.大変だった点


昔習ったはずのことをど忘れすることが多々あったところです……

何か覚えると何か忘れていくのでかなり初歩的なことを改めてネットで調べたりしていました……

プログラミング的なもの全く関係なしなのですが、キャッチコピーやホームページ内の文章などを考えるのに時間がかかりました。

ホームページにおける全体的な雰囲気をうまくまとめるのが大変でした!






7.今後のことについて


これからもいろんなことを学んでプログラミングの奥深さを知っていきたいです!

それから、この先もプログラミングをしていく上でまた何か忘れたらすぐ調べたり聞いたりすることを癖にしていきたいです……

最後に小山先生、お名前や顔写真をホームページ作成にお借りすることを快く了承してくださりありがとうございました!