2025.07.07

夏休みは「Webの世界」をのぞいてみよう！

クリエイティブ

こんにちは！MaromaroのChieです。
もうすぐ夏休み。旅行にプール、ゲームにお祭り…とっても楽しい季節ですね！
でも、親御さんにとってはこんな悩みはありませんか？

「子どもがゲームばかりで、ちょっと心配…」
「自由研究やること決まってない！」
「せっかくだから、何か“ためになること”をさせたい…」

そんなときにおすすめなのが、『Webの世界を体験できる“ミニ講座”』です！

Webってなに？インターネットとは違うの？

まず、「Web（ウェブ）」ってなんだろう？

簡単に言うと、「Web」はみんなが使っているホームページのこと。
たとえば、YouTube、Yahoo!、Amazon も全部 Web の一部です。

スマホやパソコンで見る、いろんな情報やサービスは、Webのしくみでできているんです。

小学生でもできる！Webのしくみを学ぶ3ステップ

ステップ1：HTMLっていう「ことば」でページを作ってみよう

HTML（エイチティーエムエル）は、Webページを作るための“文章のルール”のこと。

HTMLを書くには、『メモ帳（Windows）やテキストエディット（Mac）』でもOKです。
以下の手順で体験できます！

■HTMLのはじめかた（親子で一緒にやってみよう）
1. パソコンのメモ帳を開く
2. 以下のように入力して保存します（拡張子は .html）

<!DOCTYPE html>

<html>

<head>
 
 <title>わたしのページ</title>
  
</head>

<body>
 
 <h1>こんにちは！</h1>

 <p>今日はカレーを食べました🍛</p>

</html>

3. 保存するときに「ファイル名.html」にする
4. ブラウザ（Chromeなど）で開くと、自分のWebページが見える！

▶【おすすめサイト】
Progate for Kids（無料で遊びながら学べます）

ステップ2：CSSで色やデザインをつけてみよう

文字の大きさや色を変えるには、CSS（シーエスエス）というスタイルのルールを使います。
CSSは、Webページの見た目をキレイに整えるための「デザインのきまり」です。
たとえば、文字を赤くして大きくしたいときはこうします↓

<style>

h1 {

color: red;
 
font-size: 40px;
  
text-align: center;

}
 
</style>

これを <head> の中に書いておくと、<h1> の見出しが変わります。

■HTML＋CSSをまとめて書いた例

<!DOCTYPE html>

<html>

<head>
 
<title>わたしのページ</title>
  
<style>

body {
 
background-color: #f0f8ff;

  
font-family: "Arial", sans-serif;

}
 
h1 {

  
color: #0077cc;

font-size: 36px;
 
}

  
p {

color: #333333;
 
font-size: 18px;

  
}

</style>
 
</head>

  
<body>

<h1>夏休み日記</h1>
 
<p>今日はプールに行って、アイスを食べました。</p>

  
</body>

</html>