どうも、ひろです。
今回は、AIを駆使しながら自分でコードも書いてホームページ制作（テスト版）をしました。
なぜテスト版なのかというと、初めはリンクを載せたりすると私が訳分からなくなってしまいそうだからです。
なので、ホームページのトップページだけを作成する事にしました。
※今後、今回のトップページを使って1つのサイトを作りたいと考えています。
大枠はAIにお願いして、細々としたところを私が行いました。
AIに頼めばもっと素敵なデザインにしてくれると思いますが、それでは私の実力向上にはつながらないのでAIに聞いたりネットで調べたりして作成しまいた。
※時々、AIの言ってる意味がわからない時があるので、そういう時はネットで検索しました。
ぜひ見て、参考にしていただければと思います。
AIに頼んで大枠を作成
今回は、HTML・CSS・JavaScriptを使って簡単なホームページを作成していきたいと思います。
まず始めにAIに
「簡単なホームページ制作をしたいです。初心者向けの簡単なホームページをお任せで作ってください」
とAIに頼みました。
すると、
上のようなホームページが作成されました。
青いヘッダー（上に置く見出し）に白い文字のタイトル。
白い背景にある、2つの白い枠。
白い枠の中には、それぞれ「自己紹介」「チャレンジ」の文字があります。
さらには、チャレンジの下には「クリックしてください」との文字が入った青い枠があります。
Javascriptも入れているので、画像では分かりにくいですが、カーソルがクリックしてくださいの枠の上に置くと色が変わります。
「クリックしてください」の上にカーソルを置くと、分かりにくいですが青い枠の色が少し濃く変わります。
「クリックしてください」を押してみると、
青い文字で「Javascriptが動きました！」の文字が出ました。
これで大枠は完成です。
次からは、私もコードを書いたりしてデザインしていきます。
好みのホームページにする
私は宇宙が好きなので、宇宙に関するホームページを作る練習をしたいと思います。
まず、背景が白いままでは味気ないので、背景に宇宙の画像を貼りたいと思います。
AIに「ホームページの背景に合う宇宙の写真を生成」と書き込み、生成された宇宙の画像をホーうページに落とし込みました。
背景が宇宙の背景になりました。
注意：コードに画像を書く場合は、HTMLと画像ファイルが一緒ではないと添付されません。
その時は以下のようにすれば表示されるようになります。
「background-image: url(“../フォルダー名/ファイル名.jpg”);」
最後に、上のヘッターの色合いが合ってないので、フッター（下の黒いバー）と同じ色の黒に統一します。
また、フッターも微妙な位置にあるので下固定にしたいと思います。
さらには、ちょっとでも格好良くしたいので「box-shadow:」という陰を落とすようなコードも取り入れました。
結果
色合いも統一でき、宇宙の画像も合うことで良いデザインに仕上がりました。
また、「box-shadow:」を入れたことで影が生まれ、宇宙の神秘さが少しでも引き出せたのでは無いでしょうか。
今回は、ここで完成とさせていただきます。
始めの方にも書きましたが、このホームページを使って1つのサイトにできたらと考えています。
終わりに
今回学べたことは
HTML…家
CSS…家の中にあるもの
Javascript…扉を開ける、お水を出す
私的には上のように思えました。
HTMLという家を建てて、CSSという家具や日用品を家の中に入れ、扉を開けたり水を出したりとこちらが何かのアクションを起こせば返ってくるアクション。
もちろん、プロからしてみたらこいつ何言ってんだ？そんな役割じゃ無いだろう！
と言われそうですが、現状私の中のHTML・CSS・Javascriptのイメージはこんな感じです。
また、「box-shadow:」などちょっとしたコードを入れることで、よりホームページを引き立たせたりすることができ見栄えもグッと良くなりました。
始めの方でも書きましたが、今後はこのホームページを使って1つのサイトにできればなと考えています。
次回は、Pythonの知識を深めたいので、初心者でもPythonで作れるものを見つけて作成したいと思います。
ご覧いただき、ありがとうございました。
