🔰超初心者級～HTML/Javascript/CSSを使って、略歴、レジュメ、個人用ウェブサイトを作成する方法
今回は、HTML/Javascript/CSSを使って、個人用ウェブサイトを作成する方法をお教えします。
まず、HTMLとは、ウェブページの骨格や内容を記述するための言語です。CSSとは、ウェブページの見た目やデザインを設定するための言語です。JavaScriptとは、ウェブページに動きや機能を追加するための言語です。
これらの言語を組み合わせて、略歴、レジュメ、連絡先の載った個人用ウェブサイトを作成するには、以下の手順を参考にしてください。
テキストエディタを開き、新しいファイルを作成します。ファイル名は「index.html」とします。
HTMLの基本的な構造を記述します。以下のコードをコピーして、ファイルに貼り付けます。
<!DOCTYPE html>
<html>
<head>
<title>あなたの名前</title>
</head>
<body>
<!-- ここにウェブサイトの内容を記述します -->
</body>
</html>`<body>`タグの中に、略歴、レジュメ、連絡先の内容を記述します。以下のコードを参考にしてください。
<body>
<h1>あなたの名前</h1>
<h2>略歴</h2>
<p>ここに略歴を記述します。</p>
<h2>レジュメ</h2>
<p>ここにレジュメを記述します。</p>
<h2>連絡先</h2>
<p>ここに連絡先を記述します。</p>
</body>テキストエディタでファイルを保存し、ブラウザで開いて確認します。ウェブページの骨格ができあがりました。
CSSを使用して、ウェブページのスタイルを設定します。新しいファイルを作成し、ファイル名は「style.css」とします。
CSSの基本的な構文を記述します。以下のコードをコピーして、ファイルに貼り付けます。
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
text-align: center;
}
h2 {
color: #666;
border-bottom: 1px solid #666;
}
p {
margin: 0 0 20px;
}HTMLファイルにCSSファイルをリンクします。以下のコードをHTMLファイルの`<head>`タグ内に追加します。
<link rel="stylesheet" type="text/css" href="style.css">テキストエディタでファイルを保存し、ブラウザで開いて確認します。ウェブページの見た目が変わりました。
JavaScriptを使用して、ウェブページに動的な機能を追加することができます。たとえば、連絡先の部分にメールフォームを作成することができます。新しいファイルを作成し、ファイル名は「script.js」とします。
JavaScriptの基本的な構文を記述します。以下のコードをコピーして、ファイルに貼り付けます。
// メールフォームの要素を取得する
var form = document.getElementById("mail-form");
var name = document.getElementById("name");
var email = document.getElementById("email");
var message = document.getElementById("message");
var submit = document.getElementById("submit");
// メールフォームの送信ボタンが押されたときの処理を定義する
submit.addEventListener("click", function(event) {
// ページのリロードを防ぐ
event.preventDefault();
// 入力された値を取得する
var nameValue = name.value;
var emailValue = email.value;
var messageValue = message.value;
// 入力された値が空でないかチェックする
if (nameValue && emailValue && messageValue) {
// メールの件名と本文を作成する
var subject = "お問い合わせありがとうございます";
var body = nameValue + "様\n\n" + messageValue + "\n\n" + "返信先：" + emailValue;
// メールのリンクを作成する
var mailto = "mailto:あなたのメールアドレス?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
// メールのリンクを開く
window.open(mailto);
// メールフォームの内容をクリアする
form.reset();
} else {
// 入力された値が空の場合は、アラートを表示する
alert("すべての項目を入力してください");
}
});HTMLファイルにJavaScriptファイルをリンクします。以下のコードをHTMLファイルの`<body>`タグの最後に追加します。
<script type="text/javascript" src="script.js"></script>HTMLファイルの連絡先の部分にメールフォームを作成します。以下のコードをHTMLファイルの`<p>ここに連絡先を記述します。</p>`の代わりに貼り付けます。
<form id="mail-form">
<p>お名前：<input type="text" id="name"></p>
<p>メールアドレス：<input type="email" id="email"></p>
<p>メッセージ：<textarea id="message" rows="5" cols="40"></textarea></p>
<p><input type="submit" id="submit" value="送信"></p>
</form>テキストエディタでファイルを保存し、ブラウザで開いて確認します。ウェブページにメールフォームが追加されました。
以上の手順に従うことで、HTML/Javascript/CSSを使って、略歴、レジュメ、連絡先の載った個人用ウェブサイトを作成することができます。😊
もっと詳しく知りたい場合は、以下のリンクをご覧ください。
自分でウェブサイトを作成するメリットは、以下のようなものがあります。
コストを抑えられる：自分でウェブサイトを作成すれば、制作会社に依頼するよりも費用を節約できます。無料のツールやサービスを利用すれば、ほとんどお金がかかりません。
自由にカスタマイズできる：自分でウェブサイトを作成すれば、好みのデザインや機能を自由に設定できます。他社と差別化できるオリジナルのウェブサイトを作ることができます。
更新や修正ができる：自分でウェブサイトを作成すれば、情報の更新や修正などが必要になったときにいつでも自分で対処できます。外注する必要がないので、時間やコストを節約できます。
ウェブサイト作成の知識が身につく：自分でウェブサイトを作成すれば、ウェブサイトやインターネットに関する知識を身につけられます。これは、今後のビジネスやキャリアに役立つスキルです。
自分でウェブサイトを作成する方法については、以下をご覧ください。
Webサイトの作り方｜自分でサイトを制作・公開する方法と注意点
ホームページ制作は自作できる？自分で作る方法・手順を解説
WEBサイトは自分で作れる？個人向けWEBサイト制作方法について
文と構成/イラスト 橘順
最後まで、お読み下さり、ありがとうございました。よかったらスキ、フォローよろしくお願いします😉
この記事が気に入ったらサポートをしてみませんか？