こんな人におすすめ
- 「HTML/CSSを概要レベルでは知ってるけど、何も作ったことがない…。」
- 「今日1日暇だから、勉強進めて個人のウェブサイトまで作ってみよ！」
- 「せっかくだし、人に見せられる作成物レベルまで持っていきたい！」
- 「でも、お金はかけたくない…。お金ない…。」
完成品
URL貼るか迷ったのですが、セキュリティの心配もあるのでスクショで。
写真は自前です。
地図は知り合いのコーヒー屋さんを拝借。
手順
1 . ドメイン名を取得 所要時間：10分
お名前.comを使用しました。1年間無料で使用できます。
＊レンタルサーバーをセットでおすすめしてきますがスルーします。
2 . サーバーをレンタル 所要時間：30分
xreaを使用しました。広告表示されますが、無料で使用できます。
このレンタルサーバーにお名前.comで取得したドメインを紐づけます。
＊ドメインをセットでおすすめしてきますがスルーします。
3 . HTML/CSSファイルを作成 所要時間：3時間〜
下記サイトとコードを参考に、ファイルを作成しました。
コーディング・ファイル作成は、PC上のVScodeで行っています。
HTMLは130行、CSSは400行くらいに収まりました。
ディレクトリ構成は以下です。ファイル名はなんでもいいのですが、参考サイトとあわせておくとやりやすいです。
ディレクトリ構成
website/
│
├─ index.html
│
├─ css
│ └──style.css
│
├─ img
│ └──profile.jpg
│ ├── … #その他jpgファイル複数
│
├─ php #任意
│ └──send_email.php
│
└── contact.html #任意
上記の参考ページにはコンタクト機能がないのですが、割と簡単にできそうだったので追加しました。
4. websiteファイルをサーバーにアップロード 所要時間：10分
最初はFileZillaを使用していたのですが、xreaのコントロールパネルから直接操作できることがわかったため、xrea上でファイルをアップロードしました。
5 . 完成。
最初から100点を目指さず、一旦大枠だけ作成してから徐々に細かな編集をしていきましょう。
難しかったこと
- レンタルサーバー選び
種類が多くてどれを使用するか悩みました。一旦xreaはおすすめできるのですが、他はわかりません。もっと使いやすいものがあるかもしれません。 - CSSの反映
最初CSSが反映されなくて困りました。色々調べてCookieの削除など色々試しましたが、解決せず…。結局わかった原因は、割と簡単なコーディングミスでした。GPTにも聞いていたのですが簡単にいうと検知できないタイプのエラーでした。CSSが反映されない！となっている人は初歩的なミスも確認してみましょう。 - コーディング
HTMLやCSSを実際に書いたのは初めてだったので、色々とわからないところを調べながらの試行錯誤でした。GPTにもたくさん頼りました。ただ、「理解すること」を目指すとほんと終わららないので、とにかく手を動かしサイトを完成させることを優先させた方がいいと思います。やってからわかることは結構あります。
1番のコツ＝GPTの活用
少し逸脱する個人的な意見ですが、コーディングは生成AIに任せて人間が考えるべきところ（どうすれば見やすくなるか？どんなプロンプトをすればいいコードができるか？）に時間をかけるべきだと思います。
力になれることがあればコメントください。
他にも細かな躓きはいくつかありました。1人だと気づきにくいことや難しいこともあると思うので、自分で良ければぜひコメントください。