『超初心者🔰級】誰でもカンタン！すぐ出来るWEBサイト作成法

はやかわれい😆note閲覧128万PV🌆能天気な起業家が教える、お金とモテ💖の秘密！

2024年3月6日 09:44

こんにちは、早川サキです。😊

今回は、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サイトを参考にしてください。

This picture was drawn digitally Jun Tachibana.

超初心者級～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.

最後までご覧頂きありがとうございます☺️良かったらスキ💖フォロー頂けますと嬉しいです😉

この記事が参加している募集

#スキしてみて

561,324件

この記事が気に入ったらサポートをしてみませんか？