夏休みの自由研究に!パソコン1つで学べるホームページづくり(導入編)

当ブログではアフィリエイト広告を利用しています。

個人ブログの為記事内容は必ずしも正確性・鮮度を保証するものではありません。

当サイトを利用することで生じたトラブルや損害などは、その責任を一切負いかねます。

こんにちは。Eristarです。

これから3回にわたってホームページを簡単に作る方法を紹介していきます。

 

[会話:猫]今回はなんだか楽しそうだニャ♪

[会話:悩み猫]でも難しくないかニャ?

[会話:Eristar]ホームページは意外に簡単に作れるんです。ぜひホームページ作りに挑戦してみてください!

 

この記事は夏休みの自由研究におススメなホームページの作り方を子供の方に理解できる様に紹介していきますが、大人の方にもおすすめです。自分のWebサイトを作ってみたい方や、子供と一緒に何かに挑戦してみたい方はぜひ一緒にやってみてください。一見難しそうに感じるかもしれませんが、意外とシンプルで、でもクリエイティブな制作ができるので楽しく感じられてくると思います。

 

ホームページづくりが大人にもおススメな理由
  • ブログ・ポートフォリオ・日記などを自分で作成できるようになる
  • 趣味の1つにできる
  • HTMLやCSSなど、Webの基本を理解できる
  • お金をかけずに始められる⇒無料のエディタとブラウザだけで作れる

 

 

そもそもホームページってどうやってできてるの?

私たちが毎日見ているWebサイトやホームページは、「HTML(エイチティーエムエル)」という言語で作られています。HTMLは「HyperText Markup Language(ハイパーテキストマークアップ・ランゲージ)」の略で、HTMLはプログラミング言語ではなく、ページの「見た目」や「構造」を伝えるためのルールみたいなものです。

 

 

ホームページ作りに必要なもの

下記3点を用意してください。

  1. パソコン(WindowsでもMacでもOK)
  2. テキストエディタ(メモ帳、VSCodeなど)
  3. WebブラウザChrome、Edgeなど)

特別なサーバーなどは必要ないのですぐにホームページ作りをスタートすることができます。

 

 

では、始めていきます。

今回は、Windowsのパソコンを使いながら解説していきます。

 

↓デスクトップの見方はこちらをどうぞ

 

 

まずは、新しいフォルダーを1つ用意します。

 

↓マウスの操作方法はこちらをどうぞ

eristar.hatenablog.jp

 

デスクトップ上で右クリックをし、新規作成⇒フォルダーをクリックします。

デスクトップに作成された、新しいフォルダーの名前を任意で変更しておきます。

今回は「自由研究」と名前を付けます。

次に言語を記入するテキストエディタを出します。

自由研究のフォルダを開き、右クリックをし、新規作成⇒テキストドキュメント(メモ帳)をクリックします。

Windowsのスタートボタンからメモ帳を検索しても良いです。

そして、「自由研究.txt」という名前で保存してください。

そして、もうひとつテキストエディタにを使います。新規作成⇒テキストドキュメント(メモ帳)をクリックして作成し「デザイン.txt」という名前で保存してみてください。

今は、自由研究フォルダの中にテキストドキュメントが2つ入っている状態です。

これでホームページ作りの準備が整いました。

 

では、次回はいよいよ実際にテキストドキュメントにHTML言語を入力していきます。

eristar.hatenablog.jp

 

↓皆様のクリックが励みになりますm(__)m

 

 

こちらもぜひご覧ください↓

eristar.hatenablog.jp

 

Excelで簡単!円アート↓

eristar.hatenablog.jp