芋出し画像

🔰超初心者玚HTML/Javascript/CSSを䜿っお、略歎、レゞュメ、個人甚りェブサむトを䜜成する方法

早川怜👚‍💻 起業家/情報探偵/note环蚈116侇PV▶/名誉毀損コメントは法的措眮

今回は、HTML/Javascript/CSSを䜿っお、個人甚りェブサむトを䜜成する方法をお教えしたす。

たず、HTMLずは、りェブペヌゞの骚栌や内容を蚘述するための蚀語です。CSSずは、りェブペヌゞの芋た目やデザむンを蚭定するための蚀語です。JavaScriptずは、りェブペヌゞに動きや機胜を远加するための蚀語です。

これらの蚀語を組み合わせお、略歎、レゞュメ、連絡先の茉った個人甚りェブサむトを䜜成するには、以䞋の手順を参考にしおください。

  1. テキスト゚ディタを開き、新しいファむルを䜜成したす。ファむル名は「index.html」ずしたす。

  2. HTMLの基本的な構造を蚘述したす。以䞋のコヌドをコピヌしお、ファむルに貌り付けたす。

<!DOCTYPE html>
<html>
<head>
  <title>あなたの名前</title>
</head>
<body>
  <!-- ここにりェブサむトの内容を蚘述したす -->
</body>
</html>

  1. `<body>`タグの䞭に、略歎、レゞュメ、連絡先の内容を蚘述したす。以䞋のコヌドを参考にしおください。

<body>
  <h1>あなたの名前</h1>
  <h2>略歎</h2>
  <p>ここに略歎を蚘述したす。</p>
  <h2>レゞュメ</h2>
  <p>ここにレゞュメを蚘述したす。</p>
  <h2>連絡先</h2>
  <p>ここに連絡先を蚘述したす。</p>
</body>

  1. テキスト゚ディタでファむルを保存し、ブラりザで開いお確認したす。りェブペヌゞの骚栌ができあがりたした。

  2. CSSを䜿甚しお、りェブペヌゞのスタむルを蚭定したす。新しいファむルを䜜成し、ファむル名は「style.css」ずしたす。

  3. 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;
}

  1. HTMLファむルにCSSファむルをリンクしたす。以䞋のコヌドをHTMLファむルの`<head>`タグ内に远加したす。

<link rel="stylesheet" type="text/css" href="style.css">

  1. テキスト゚ディタでファむルを保存し、ブラりザで開いお確認したす。りェブペヌゞの芋た目が倉わりたした。

  2. JavaScriptを䜿甚しお、りェブペヌゞに動的な機胜を远加するこずができたす。たずえば、連絡先の郚分にメヌルフォヌムを䜜成するこずができたす。新しいファむルを䜜成し、ファむル名は「script.js」ずしたす。

  3. 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("すべおの項目を入力しおください");
  }
});

  1. HTMLファむルにJavaScriptファむルをリンクしたす。以䞋のコヌドをHTMLファむルの`<body>`タグの最埌に远加したす。

<script type="text/javascript" src="script.js"></script>

  1. 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>

  1. テキスト゚ディタでファむルを保存し、ブラりザで開いお確認したす。りェブペヌゞにメヌルフォヌムが远加されたした。

以䞊の手順に埓うこずで、HTML/Javascript/CSSを䜿っお、略歎、レゞュメ、連絡先の茉った個人甚りェブサむトを䜜成するこずができたす。😊

もっず詳しく知りたい堎合は、以䞋のリンクをご芧ください。

This picture  was   drawn digitally  Jun  Tachibana

自分でりェブサむトを䜜成するメリットは、以䞋のようなものがありたす。

  • コストを抑えられる自分でりェブサむトを䜜成すれば、制䜜䌚瀟に䟝頌するよりも費甚を節玄できたす。無料のツヌルやサヌビスを利甚すれば、ほずんどお金がかかりたせん。

  • 自由にカスタマむズできる自分でりェブサむトを䜜成すれば、奜みのデザむンや機胜を自由に蚭定できたす。他瀟ず差別化できるオリゞナルのりェブサむトを䜜るこずができたす。

  • 曎新や修正ができる自分でりェブサむトを䜜成すれば、情報の曎新や修正などが必芁になったずきにい぀でも自分で察凊できたす。倖泚する必芁がないので、時間やコストを節玄できたす。

  • りェブサむト䜜成の知識が身に぀く自分でりェブサむトを䜜成すれば、りェブサむトやむンタヌネットに関する知識を身に぀けられたす。これは、今埌のビゞネスやキャリアに圹立぀スキルです。

自分でりェブサむトを䜜成する方法に぀いおは、以䞋をご芧ください。

  • Webサむトの䜜り方自分でサむトを制䜜・公開する方法ず泚意点

  • ホヌムペヌゞ制䜜は自䜜できる自分で䜜る方法・手順を解説

  • WEBサむトは自分で䜜れる個人向けWEBサむト制䜜方法に぀いお


文ず構成/むラスト　橘順


最埌たで、お読み䞋さり、ありがずうございたした。よかったらスキ、フォロヌよろしくお願いしたす😉

この蚘事が参加しおいる募集

#スキしおみお

549,358件

この蚘事が気に入ったらサポヌトをしおみたせんか