■個人用ウェブサイトの作成方法を生成AIに聞いてみた
個人用ウェブサイトの作成方法を生成AIに聞いてみました。
条件はHTML、CSS、JavaScriptを使うというものです。
（この画像は画像生成AIのMidjourneyで作成しています。）
HTML、CSS、JavaScriptを使って、個人用ウェブサイトを作成するには、以下の手順を実行する必要があります。
-
HTMLでウェブサイトの骨格を作成する
- HTMLは、ウェブページの構造を定義するためのマークアップ言語です。
- HTMLを使用して、ウェブページのタイトル、見出し、段落、リスト、画像、リンクなどを作成できます。
- HTMLの基本的な構文は、タグで囲まれたテキストで構成されています。タグは、<タグ名>と</タグ名>のように、開始タグと終了タグのペアで表されます。
-
CSSでウェブサイトのスタイルを設定する
- CSSは、ウェブページのスタイルを定義するためのスタイルシート言語です。
- CSSを使用して、ウェブページのフォント、色、レイアウト、背景、ボーダーなどを設定できます。
- CSSは、HTMLのタグにスタイルを適用するために使用されます。スタイルは、セレクタとプロパティのペアで表されます。
-
JavaScriptでウェブサイトに動的な機能を追加する
- JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。
- JavaScriptを使用して、ウェブページの動的なエフェクト、フォームのバリデーション、ユーザーの入力に応じた動作などを実装できます。
- JavaScriptは、HTMLのタグにイベントリスナーを追加するために使用されます。イベントリスナーは、ユーザーのアクション（クリック、マウスオーバー、フォームの送信など）に応答して、JavaScriptコードを実行します。
これらのステップを実行することで、略歴、レジュメ、連絡先の載った個人用ウェブサイトを作成することができます。また、ウェブサイトの作成には、テキストエディタ、Webブラウザ、およびWebサーバーが必要です。テキストエディタは、HTML、CSS、JavaScriptのコードを作成するために使用されます。Webブラウザは、作成したウェブページを表示するために使用されます。Webサーバーは、ウェブページを公開するために使用されます。
ちょっと期待したものと違ったので、コードを生成してもらいました。
以下に、HTML、CSS、JavaScriptを用いた、基本的な個人用ウェブサイトのひな形を示します。このテンプレートでは、略歴、レジュメ、連絡先のセクションがあります。
<!DOCTYPE html>
<html>
<head>
<title>個人ウェブサイト</title>
<style>
body {
font-family: Arial, sans-serif;
}
.section {
margin-bottom: 20px;
}
.section h2 {
color: #333;
}
.contact-info li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="section">
<h2>略歴</h2>
<p>ここに自己紹介を書く</p>
</div>
<div class="section">
<h2>レジュメ</h2>
<p>ここに経験やスキルを書く</p>
</div>
<div class="section">
<h2>連絡先</h2>
<ul class="contact-info">
<li>Email: ここにメールアドレスを書く</li>
<li>Phone: ここに電話番号を書く</li>
</ul>
</div>
<script>
// 必要に応じてJavaScriptコードをここに書く
</script>
</body>
</html>
このテンプレートは非常に基本的なもので、実際のウェブサイトではさらに複雑で洗練されたデザインと機能が必要になるでしょう。
更に詳細な情報を提供するために、各セクションをさらに詳細に分割したり、画像やリンクを追加したりすることができます。
また、JavaScriptを使用してより動的な機能を追加することもできます。
残念ながらJavaScriptのコード自体の提案はありませんでした。
生成されたコードをブラウザーで表示すると以下のようになります。
HTMLの書き方を知らない人が、本当に簡単なお知らせなどの表示に使うならば良いのではないでしょうか。
P.S. Twitter（X）で Midjourneyで生成した画像を公開しています。