プログラムコードで自己紹介サイトを作る方法【プログラミング未経験、転職、在宅】 - 松岡ラモのプログラミング未経験から転職を目指すブログ

① フォルダを作る
② VS Codeでフォルダを開く
③ 新しいファイルを作る
④HTML（サイトの骨組み）
⑤CSS（デザイン）
⑥ JavaScript（動き）
⑦ サイトを見る

使う技術👇

HTML

CSS

JavaScript

エディタ👇

Visual Studio Code

① フォルダを作る

まず作業フォルダを作ります。

例👇

Web
└ my-website

作る場所は自分が分かりやすい場所ならどこでもいいです。

② VS Codeでフォルダを開く

VS Codeを開く

「File」→「Open Folder」

作った my-website を選ぶ

すると左にファイル一覧（エクスプローラー）が出ます。

③ 新しいファイルを作る

左の 📄アイコン（New File）を押します。

作るファイル👇

index.html
style.css
script.js

④HTML（サイトの骨組み）

index.htmlにこのコードを書く



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介サイト</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<header>
<h1>私の自己紹介サイト</h1>
</header>

<section>
<h2>プロフィール</h2>
<p>こんにちは！Web制作を勉強しています。</p>
</section>

<section>
<h2>スキル</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>

<button onclick="hello()">クリックしてね</button>

<script src="script.js"></script>

</body>
</html>

⑤CSS（デザイン）

style.cssにこのコードを書く


body{
font-family: sans-serif;
background:#f0f0f0;
text-align:center;
}

header{
background:#333;
color:white;
padding:20px;
}

section{
background:white;
margin:20px;
padding:20px;
border-radius:10px;
}

button{
padding:10px 20px;
font-size:16px;
}

⑥ JavaScript（動き）



function hello(){
alert("サイトを見てくれてありがとう！");
}

⑦ サイトを見る

左の index.html を右クリック

「エクスプローラーで表示」

index.html をダブルクリック

ブラウザ（例：Google Chrome）で
サイトが表示されます。