『超初心者🔰級】誰でもカンタン！すぐ出来るWEBサイト作成法
こんにちは、早川サキです。😊
今回は、HTML / Javascript / CSSを使用して、個人Webサイトを作成する方法についてお教えします。
まず、HTMLとは、Webページの骨格や内容を記述するための言語です。CSSとは、Webページの見た目やデザインを設定するための言語です。JavaScriptとは、Webページに動きや機能を追加するための言語です。
これらの言語を組み合わせて、略歴、履歴書、連絡先の載った個人Webサイトを作成するには、以下の手順を参考にしてください。
JavaScriptは、プログラミング言語であり、HyperText Markup LanguageやCascading Style Sheetsと並ぶ World Wide Webの中核技術の一つである。 プロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。 利用される場面はウェブサイト、ウェブアプリケーション、バックエンド、デスクトップアプリケーション、モバイルアプリケーションなど、ウェブブラウザからサーバ、デスクトップからスマートフォンまで多岐にわたっている。
テキストエディタを開き、新しいファイルを作成します。ファイル名は「index.html」とします。
HTMLの基本的な構造を記述します。以下のコードをコピーして、ファイルに貼り付けます。
<!DOCTYPE html>
<html>
<head>
<title>あなたの名前</title>
</head>
<body>
<!-- ここにWebサイトの内容を記述します -->
</body>
</html>`<body>`タグの中に、略歴、履歴書、連絡先の内容を記述します。以下のコードを参考にしてください。
<body>
<h1>あなたの名前</h1>
<h2>略歴</h2>
<p>ここに略歴を記述します。</p>
<h2>履歴書</h2>
<p>ここに履歴書を記述します。</p>
<h2>連絡先</h2>
<p>ここに連絡先を記述します。</p>
</body>テキストエディタでファイルを保存し、ブラウザで開いて確認します。Webページの骨格ができあがりました。
CSSを使用して、Webページのスタイルを設定します。新しいファイルを作成し、ファイル名は「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">テキストエディタでファイルを保存し、ブラウザで開いて確認します。Webページの見た目が変わりました。
JavaScriptを使用して、Webページに動的な機能を追加することができます。たとえば、連絡先の部分にメールフォームを作成することができます。新しいファイルを作成し、ファイル名は「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>テキストエディタでファイルを保存し、ブラウザで開いて確認します。Webページにメールフォームが追加されました。
以上の手順に従うことで、HTML / Javascript / CSSを使って、個人Webサイトを作成することができます。👍
もっと詳しく知りたい場合は、以下のWebサイトを参考にしてください。
超初心者級～HTML/Javascript/CSSを使って、略歴、レジュメ、個人用ウェブサイトを作成する方法
【超絶初心者向け】HTML/CSS/JavaScript でWebページをつくろう。
基礎から学べるHTML ～CSS とJavaScript を使用したWebページの作成～
【Web開発】HTML/CSS/JavaScriptを使った初心者向けのWebページ作成方法
Webサイト作成のお手伝いができて嬉しいです。😊
もし、Webサイトに関する他の質問があれば、お気軽にお聞きください。🙋♂️
(1) 超初心者級～HTML/Javascript/CSSを使って、略歴 ... - note .... https://note.com/jun20000815/n/n35ae3cd20786.
(2) 【超絶初心者 向け】HTML/CSS/JavaScript でWebページを .... https://note.com/jun20000815/n/n39069522eef1.
(3) 基礎から学べるHTML ～CSS とJavaScript を使用したWeb .... https://www.insource.co.jp/tnc/WSC0022G.html.
(4) 【Web開発】HTML/CSS/JavaScriptを使った初心者向けの .... https://bliss-growth.com/html_css_js/.
(5) Getty Images. https://www.gettyimages.com/detail/photo/program-code-javascript-php-html-css-of-site-web-royalty-free-image/1202250586.
最後までご覧頂きありがとうございます☺️良かったらスキ💖フォロー頂けますと嬉しいです😉