【超絶初心者🔰向け】HTML/CSS/JavaScript でWebページをつくろう。

橘順🏢🧑🏻‍💻シリアル・アントレプレナー/note82週連続投稿更新中！合計68万PV

2023年12月19日 09:35

Webページを作るのに興味があるのですね。😊

この記事は、HTML/CSS/JavaScript の基本的な使い方を紹介しています。
初心者でもWebページの骨格、デザイン、動きをそれぞれの言語で表現する方法を学べます。

💻下準備　ホームページの基本用語　31選

💻（html、css、javascript）.を使ってWEBページを作るのに必要なPCのスペックは

（html、css、javascript）.を使ってWEBページを作るのに必要なPCのスペックは、特に高くなくても大丈夫です。HTMLやCSSやJavaScriptは、テキストファイルとして保存されるので、メモリやストレージの容量はそれほど必要ありません。また、ブラウザで表示するだけなら、CPUやGPUの性能もそれほど重要ではありません。

ただし、WEBページを作る際には、テキストエディタやブラウザなどのツールを使うことになります。その場合、ツールの種類や数によっては、PCのスペックが影響することがあります。例えば、Visual Studio CodeやChromeなどのツールは、メモリやCPUの使用率が高いことがあります。そのため、複数のツールを同時に使うと、PCの動作が遅くなったり、フリーズしたりする可能性があります。

そこで、WEBページを作るのに快適なPCのスペックを目安としてお伝えします。

CPU：Intel Core i3以上、またはAMD Ryzen 3以上
メモリ：8GB以上
ストレージ：SSD 128GB以上
ディスプレイ：フルHD（1920×1080）以上
OS：Windows 10、macOS、Linuxなど

これらのスペックはあくまで目安であり、必ずしも必要というわけではありません。また、WEBページの内容や機能によっては、より高いスペックが必要になる場合もあります。自分の作りたいWEBページに合わせて、PCのスペックを選ぶことが大切です。👍

💻ウェブサイトの作成方法

ウェブサイトを作成するには、HTML、CSS、JavaScriptの基本的な知識が必要です。以下の手順に従って、略歴、レジュメ、連絡先の載った個人用ウェブサイトを作成することができます。

テキストエディタを開き、新しいファイルを作成します。
HTMLの基本的な構造を記述します。以下のコードをコピーして、新しいファイルに貼り付けます。

<!DOCTYPE html>
<html>
<head>
	<title>略歴、レジュメ、連絡先の載った個人用ウェブサイト</title>
</head>
<body>
	<h1>略歴</h1>
	<p>ここに略歴を記述します。</p>

	<h1>レジュメ</h1>
	<p>ここにレジュメを記述します。</p>

	<h1>連絡先</h1>
	<p>ここに連絡先を記述します。</p>
</body>
</html>

上記のコードを保存し、ファイル名を「index.html」とします。
CSSを使用して、ウェブサイトのスタイルを設定します。以下のコードをコピーして、新しいファイルに貼り付けます。

body {
	font-family: Arial, sans-serif;
}

h1 {
	color: #333;
	border-bottom: 1px solid #333;
}

p {
	margin: 0 0 20px;
}

上記のコードを保存し、ファイル名を「style.css」とします。
HTMLファイルにCSSファイルをリンクします。以下のコードをHTMLファイルの`<head>`タグ内に追加します。

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

JavaScriptを使用して、ウェブサイトに動的な機能を追加することができます。たとえば、フォームのバリデーションやアニメーションなどがあります。JavaScriptの基本的な構文を学び、必要に応じてウェブサイトに追加してください。

以上の手順に従うことで、略歴、レジュメ、連絡先の載った個人用ウェブサイトを作成することができます。🙂

💻ウェブサイトの公開手順

ウェブサイトを公開するには、まずウェブホスティングとドメイン名を取得する必要があります。ウェブホスティングは、ウェブサイトのファイルを保存するためのオンラインのストレージスペースであり、ドメイン名は、ウェブサイトのアドレスです。多くのウェブホスティングサービスがあり、いくつかは無料で提供されています。また、ドメイン名を購入することもできます。

ウェブサイトを公開する方法はいくつかありますが、最も一般的な方法はFTP（File Transfer Protocol）を使用してウェブサイトのファイルをウェブホスティングサービスにアップロードすることです。FTPクライアントを使用して、ウェブホスティングサービスに接続し、ウェブサイトのファイルをアップロードすることができます。

また、GitHub Pagesなどの無料のウェブホスティングサービスを使用することもできます。GitHub Pagesは、GitHubリポジトリに保存された静的ウェブサイトをホストするための無料のウェブホスティングサービスです。GitHubアカウントを作成し、リポジトリを作成し、ウェブサイトのファイルをリポジトリにアップロードするだけで、ウェブサイトを公開することができます。

ウェブサイトを公開するための手順は、ウェブホスティングサービスによって異なります。ウェブホスティングサービスのウェブサイトにアクセスし、公開手順を確認してください。🙂.

💻ドメイン取得方法

ドメイン名を取得するには、いくつかの方法があります。一般的な方法は、ウェブホスティングサービスを使用してドメイン名を購入することです。多くのウェブホスティングサービスがあり、いくつかは無料で提供されています。たとえば、Google DomainsやWixなどがあります。

また、ドメイン名を購入することができます。ドメイン名を購入するには、ドメインレジストラと呼ばれる企業を通じて購入する必要があります。多くのドメインレジストラがあり、いくつかは無料で提供されています。たとえば、Google DomainsやGoDaddyなどがあります。

ドメイン名を購入する前に、ドメイン名の可用性を確認する必要があります。多くのウェブホスティングサービスやドメインレジストラが、ドメイン名の可用性を確認するためのツールを提供しています。ドメイン名が利用可能であれば、購入することができます。

以上の手順に従うことで、ドメイン名を取得することができます。🙂

💻まとめ

HTMLはWebページの骨格を作るための言語で、タグという印を使って要素を指定する。
CSSはWebページのデザインを整えるための言語で、プロパティと値を使ってスタイルを指定する。
JavaScriptはWebページに動きをつけるための言語で、オブジェクトや関数を使って処理を記述する。
Visual Studio Codeはプログラミングを書く場所（エディタ）で、様々な機能や拡張機能を使ってコーディングを効率化できる。

下記リンク先を参考にすると、より分かりやすいかと思います。😙

最後まで、お読み下さり、ありがとうございました。よかったらスキ、フォローよろしくお願いします😉

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

スキしてみて

518,030件

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