ホーム > 30日チャレンジ > 【初心者向け】30日間でWebサイト作成チャレンジ｜1日目：まず学ぶべき基礎知識

【初心者向け】30日間でWebサイト作成チャレンジ｜1日目：まず学ぶべき基礎知識

投稿日：2026/04/12

最終更新日：2026/04/12

「30日間でWebサイト作成チャレンジ」の第1日目です！

このチャレンジでは30日間でWebサイト開発ができるようになることを目指します。
30日間という期間を設けておりますので、1日ずつのステップが非常に歩みやすくなっております。

対象はWebサイト開発初心者の方を対象としております。

最終的な目標は Webサイトの公開です。

開発から公開まで少しずつ一緒にステップを踏んでいきます。

では早速始めていきましょう！

今回の記事では、Webサイト開発をする際に一体どんなことを学ばないといけないのかを説明していきます。

今回の記事でわかること

Webサイト開発において必要な知識
どれくらいで作ることができるのか

Webサイト開発に必要な知識とは？

まずWebサイトにはプログラミングの知識が必要です。

そもそもプログラミングとはコードを書いてそのコードを動かすことを意味します。

プログラミングにはプログラミング言語というものが存在します。

存在するものとしては何百個とあります。

ではどの言語から勉強すればいいのか？

Webサイト開発に必要な言語としては主に3つの言語が必要です。

HTMLとCSSそしてJavaScriptです。

HTMLとは以下のようなコードの見た目をしています。

                
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>こんにちは</h1>
</body>
</html>

CSSはこんな見た目です。

                
body {
  margin: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  flex-direction: row;
  height: 45px;
  width: 100%;
  background-color: white;
  border-bottom: #f4a245 2px solid;
}

header a {
  text-decoration: none;
  color: black;
}

JavaScriptはこんな見た目をしています。

                
const hamMenu = document.querySelector(".hamburger");

const offScreenMenu = document.querySelector(".off-screen-menu");

hamMenu.addEventListener("click", () => {
  hamMenu.classList.toggle("active");
  offScreenMenu.classList.toggle("active");
  

  if(hamMenu.classList["value"] == "hamburger active"){
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden'
  }else{
    document.documentElement.style.overflow = '';
    document.body.style.overflow = ''
  }
});

これらのようにそのプログラミング言語特有のコードの「文法」というものが存在します。

プログラミングの学習とはこれらの言語の文法を勉強することを意味します。

ではいったいどれくらいでプログラミングでできるようになるのでしょうか？

これに関しては人によりますが、完全に初めてプログラミングに触れるという方だと1ヶ月はかかると思います。

私の場合は完全に独学で大体それぐらいで慣れてきました。

また、モバイルアプリ開発を目指すと完全に別の言語を習得する必要があります。

Webサイト開発では、作ったサイトを公開する動作が必要になってきます。

そのためにはドメインを取得し、どのサービスを使って公開するのかを決めなくてはいけません。

この領域の話は少々ややこしくなってくるので公開する時が来たらご説明します。

独学でプログラミング学習に時間がかかってしまっている方に朗報です！

プログラミングを理解するのにはどうしても時間がかかってしまうものです。

本を買うにしても結局わからなくなってしまう

AIに聞いても結局理解できずになんとなく作ってしまう

そんな時に心強いのがこちらのプログラミングスクールですカウンセリングが無料で受けることができます。

↓↓↓

まとめ

以上がWebサイト開発をする上で必要な知識でした。

小さなステップを少しずつ歩んでいくことで最終的にはWebサイト公開が可能となっています。

どうしても独学でも厳しいという方にお勧めな書籍があります！

この一冊があればHTMLとCSSの基礎を簡単に学ぶことができます。

本を使って学ぶのもひとつの手です
↓
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］