はじめてのWebページ制作プログラミング@praxiSpace
121 Views
October 05, 25
スライド概要
praxiSpaceのイベントでの投影資料です。
子ども向けのWebページ制作プログラミングの入門講座です。
▍対象者
11～14歳前後
▍ゴール
自己紹介ページの作成を通して、Webページの基本となるプログラム言語を学ぶ。
▍内容
・Webページの土台を作る（HTML）
・Webページに動きをつける（JavaScript）
・見た目を整える（CSS）
オンラインで無料の教育・学習系イベントを開催しています。主に子ども向けで、学校教育・受験勉強から少し離れた役に立つ学びを提供しています。 ［運営］株式会社まなび梯 https://www.manabibashi.co/
関連スライド
各ページのテキスト
はじめてのWebページ制作 プログラミング （子ども向け） 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
イベントのゴールとやること じこしょうかいページの作成を通して、 Webページの基本となるプログラム言語を学びます。 HTML 土台を作る JavaScript 動きをつける 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) CSS 見た目を整える 2
使用するツール CodePenを使います。 https://codepen.io/pen/ ● オンラインでHTML、CSS、JavaScriptを動かせるツールです。 ● コード（プログラム）を入力すると、すぐに結果が表れます。 ● サインアップ（アカウント作成）してログインすると、 作ったプログラムをほぞんできます。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 3
コードの入力（共通） アルファベットや記号、数字には、半角の文字を使います。 半角 全角 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 4
HTML ● ● ● 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) HTMLとは 書き方のルール タグの種類 5
HTML (Hyper Text Markup Language) とは Webページの土台を作ります。 HTML 結果 <html> <body> <h1>じこしょうかい</h1> <h2>ごあいさつ</h2> <p>こんにちは！<b>奥地</b>です。</p> <p> <u>愛知県</u>に住んでいます。<br> 最近、<i>水泳</i>に熱中しています。 </p> <h2>好きな食べ物</h2> <ul> <li>ラーメン</li> <li>りんご</li> </ul> <button onclick="message()">ひとこと</button> </body> </html> 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 6
HTMLの作り方 タグを使ってコード（プログラム）を書きます。 タグとは、決められた単語（タグ名）を<>で囲んだものです。 タグ名にはそれぞれ意味や効果があります。 (例) <b>太字にする</b> 太字にする <u>下線を引く</u> 下線を引く タグには、始まりと終わりがあります。 終わりのタグには、タグ名の前に「/」を入れます。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 7
タグの例 タグにはさまざまな種類があります。 種類 説明 タグ名の例 HTML コードがHTMLであることを表します。 html 本文 本文を作ります。 body 見出し 見出しを作ります。 h1, h2 だん落、改行 だん落や改行を作ります。 p 文字のかざり 文字の見た目を変えます。 b かじょう書き 文の先頭に記号や番号をつけます。 ul, li ボタン ボタンを作ります。 button 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 8
書き方のルール（HTML） コード（プログラム）の書き方にはルールがあります。 種類 タグ ルール 半角の記号と文字を使います。 全角は使えません。 例 <body>は実行できます。 ＜ｂｏｄｙ＞は実行できません。 大文字と小文字は区別しませんが、 <body>と<BODY>は同じ結果です。 小文字がよく使われます。 小文字の<body>がおすすめです。 コード 行頭に半角の空白を入れて見やすく <body> できます。 <p>こんにちは</p> 空白は2つ入れることが多いです。 </body> 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 9
記号の入力（HTML） 「<」「>」「/」を多く使います。 文字 キーボード入力 < 基 本 > / お ま け 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) = " 10
タグの種類｜Webページの全体と本文 htmlはWebページ、bodyは本文を表します。本文はbodyの中に書きます。 イメージ html body (本文) コード <html> <body> (本文) </body> </html> タグ html body 役目 コードがHTMLで書かれている ことを表します。 Webページの本文を表します。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 11
タグの種類｜見出し 見出しを作ります。Webページのつくりが分かりやすくなります。 タグ h1（headingの略） 役目 見出しを作ります。 コード <h1>じこしょうかい</h1> <h2>ごあいさつ</h2> 例 実行結果 じこしょうかい 説明 見出しは上から順に、h1, h2, …, h6まで作れます。 ごあいさつ 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 12
タグの種類｜だん落・改行 まとまりや区切りを作ります。 タグ p（paragraphの略） br（breakの略） 役目 だん落にします。 余白が追加されます。 改行します。 余白は追加されません。 コード <p>じこしょうかい</p> <p>こんにちは</p> じこしょうかい<br> こんにちは じこしょうかい じこしょうかい こんにちは 例 実行結果 こんにちは ほそく 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) <br>のみで使います。 終わりの</br>は不要です。 13
タグの種類｜文字のかざり 文字をかざります。太字や下線などがあります。 例 タグ b（boldの略） u（underlineの略） i（italicの略） 役目 太字にします。 下線を引きます。 かたむけます。 コード <b>おはよう</b> <u>おはよう</u> <i>おはよう</i> おはよう おはよう 実行結果 おはよう 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 14
タグの種類｜かじょう書き 文をかじょう書きにします。先頭には記号や番号がつきます。 タグ ul（Unordered Listの略） 役目 かじょう書きのはんいを表します。 かじょう書きにします。 かじょう書きの先頭には記号がつき ます。 コード <ul> <li>ラーメン</li> <li>りんご</li> </ul> 実行結果 ● ● ほそく ulとliを組み合わせます。 例 li（ListItemの略） ラーメン りんご 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 15
（参考）タグの種類｜かじょう書き（番号） ulの代わりにolを使うと、番号をつけられます。 タグ ol（Ordered Listの略） 役目 かじょう書きのはんいを表します。 かじょう書きにします。 かじょう書きの先頭には番号がつき ます。 コード <ol> <li>ラーメン</li> <li>りんご</li> </ol> 実行結果 1. ラーメン 2. りんご ほそく olとliを組み合わせます。 例 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) li（ListItemの略） 16
タグの種類｜ボタン① クリックできるボタンを作ります。 タグ button 役目 ボタンを作ります。 コード <button>ひとこと</button> 例 実行結果 ほそく このコードでは、クリックしても何も起こりません。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 17
タグの種類｜ボタン② イベント（きっかけ）によって、JavaScriptを実行します。 <button イベント="JavaScriptのコード;">ひとこと</button> コード <button onclick="JavaScriptのコード;">ひとこと</button> 意味 ボタンがクリックされたときに、JavaScriptを実行します。 例 イベントの例 イベント onclick 説明 onmouseover onmouseout タグの内容がマウスで マウスカーソルがタグの マウスカーソルがタグの クリックされたとき 内容の上に乗ったとき 内容からはなれたとき JavaScriptはこの後に説明します。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 18
まとめ（HTML） 作りたいWebページに合わせて、タグを組み合わせます。 種類 説明 タグ名の例 HTML コードがHTMLであることを表します。 html 本文 本文を作ります。 body 見出し 見出しを作ります。 h1, h2 だん落、改行 だん落や改行を作ります。 p 文字のかざり 文字の見た目を変えます。 b かじょう書き 文の先頭に記号や番号をつけます。 ul, li ボタン ボタンを作ります。 button 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 19
JavaScript ● ● ● ● ● 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) JavaScriptとは 書き方のルール メッセージ画面を表示する HTMLとJavaScriptを組み合 わせる 関数 20
JavaScriptとは Webページに動きをつけます。 (例) ボタンをクリックすると メッセージボックスに 「こんにちは」を表示します。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 21
書き方のルール（JavaScript）
コード（プログラム）の書き方にはルールがあります。
ルール
基本的に半角を使います。
例
1 + 2 // 半角なので適切
１＋２ // 全角なので不適切
独自の文字や文には全角も使います。
その場合、''または""で囲みます。
'こんにちは' // 文字は''などで囲む
大文字と小文字は別ものです。
alert と Alert は別もの
コードの区切りには「;」をつけます。
alert('こんにちは');
"こんにちは"
行頭に半角の空白を入れて見やすくでき function message() {
ます。空白は2つ入れることが多いです。
alert('こんにちは');
}
株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
22
［参考］データの種類 データには、文字列や数値（すうち）などの種類があります。 種類 説明 文字列 1つ以上の文字です。 例 alert('こんにちは'); ［結果］こんにちは 数値 計算に使用できる数です。 alert(12); ［結果］12 (すうち) 計算するには、+ や - などの記号 を使います。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) alert(1 + 2); ［結果］3 23
記号の入力（JavaScript） 様々な記号を使います。かっこは2種類を使い分けます。 文字 キーボード入力 { か っ こ } ( ) そ の 他 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) ' ; 24
メッセージ画面を表示する メッセージ画面を表示します。メッセージの内容は()の中に書きます。 書き方 alert(メッセージ内容) 役目 メッセージ画面を表示します。 コード alert('こんにちは'); 例 実行結果 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 25
HTMLとJavaScriptを組み合わせる 基本はHTMLと分けて書きますが、HTMLの中に書くこともできます。 HTMLとJavaScriptを分けて書く HTMLの中にJavaScriptを書く （おすすめ） HTML HTML 別のJavaScriptの コードをよび出す JavaScript JavaScript ● コードを整理しやすい ● 複数のHTMLのタグから1つの JavaScriptをよび出せる 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) ● 1つのHTMLファイルだけで 実行できる 26
関数とは
関数とは、一連のコードをまとめて名前をつけたものです。
HTMLからJavaScriptの関数を呼び出して使います。
HTML
別のJavaScriptの
関数をよび出す
HTML (イメージ)
<button onclick="関数;">ひとこと</button>
HTMLのボタンがクリックされたときに、
JavaScriptの関数を実行する。
JavaScript
JavaScript (イメージ)
関数
alert('こんにちは');
株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
27
関数の書き方 関数に名前をつけて{}の中にコードを書きます。 書き方 function 関数名() { 関数で実行するコード; } 役目 関数内のコードを実行します。 コード function message() { alert('こんにちは'); } 例 実行結果 なし（関数をよび出して初めて結果が出ます） ほそく 関数名は自由につけられます。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 28
関数の使い方
HTMLのイベントにJavaScriptの関数を指定します。
HTML
別のJavaScriptの
関数をよび出す
HTML
<button onclick="message();">ひとこと</button>
HTMLのボタンがクリックされたときに、
JavaScriptのmessage関数を実行する。
JavaScript
JavaScript
function message() {
alert('こんにちは');
}
株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
29
（参考）HTMLの中にJavaScriptを書く
HTMLのイベントにJavaScriptのコードを書きます。
HTML
JavaScript
HTML
<button onclick="alert('こんにちは');">ひとこと</button>
株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
30
CSS ● ● ● 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 書き方のルール HTMLとCSSを組み合わせ る CSSの書き方 31
CSS (Cascading Style Sheet) とは Webページの見た目を整えます。 (例) h2タグの見た目を変える ● 文字を赤色にする ● はいけいの色を うすいはい色にする 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 32
書き方のルール（CSS） コード（プログラム）の書き方にはルールがあります。 ルール 半角を使います。 例 color // 半角なので適切 ｃｏｌｏｒ // 全角なので不適切 大文字と小文字は区別しませんが、 小文字がよく使われます。 color と COLOR は同じです。 コードの区切りには「;」をつけます。 color: red; 小文字の color がおすすめです。 行頭に半角の空白を入れて見やすくでき h2 { ます。空白は2つ入れることが多いです。 color: red; } 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 33
記号の入力（CSS） 「;」と「:」は形が似ているので注意します。 文字 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) か っ こ { そ の 他 ; キーボード入力 } : 34
HTMLとCSSを組み合わせる 基本はHTMLと分けて書きますが、HTMLの中に書くこともできます。 HTMLとCSSを分けて書く HTMLの中にCSSを書く （おすすめ） HTML HTML 別のCSSの コードをよび出す CSS CSS ● コードを整理しやすい ● 1つのCSSを複数の HTMLタグに適用できる 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) ● 1つのHTMLファイルだけで 実行できる 35
CSSの書き方 「どこの」「何を」「どのように」変えるかを指定します。 書き方 どこの { なにを: どのように; } 役目 関数内のコードを実行します。 コード h2 { color: red; } 例 実行結果 h2タグの文字の色が赤になります。 ほそく h2の見出しの役目は残っています。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 36
（参考）見た目を変える例 「何を」「どのように」については様々なものを指定できる。 何を 文字の色 何を(CSS) color どのように どのように(CSS) 赤色 red 青色 blue 中央 center 右 right 文字のそろえ方 text-align 文字の大きさ font-size 20ピクセル 20px はいけいの色 background-color うすいはい色 lightgrey ピクセルは大きさの単位です。数が大きいと、サイズも大きくなります。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 37
CSSのよび出し方
CSSの「何を」にHTMLのタグを指定する。
HTML
別のCSSの
コードをよび出す
CSS
HTML
<h2>ごあいさつ</h2>
こんにちは
<h2>好きな食べ物</h2>
ラーメン
CSS
CSS（h2タグの文字色を赤色にする）が
HTMLに適用される。
h2 {
color: red;
}
株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
38
（参考）HTMLの中にCSSを書く
タグの中にCSSを書きます。「style」にCSSを書きます。
HTML
CSS
株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
HTML
<h2 style="color: red;">ごあいさつ</h2>
39
おわりに ● ● 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) まとめ ふり返り 40
まとめ じこしょうかいページの作成を通して、 HTML, JavaScript, CSSを学びました。 HTML CSS JavaScript HTML 土台を作る JavaScript 動きをつける 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) CSS 見た目を整える 41
ふり返り 学んだことをふり返りましょう（1分） ［例］ ● どんなところが、面白かった？ ● どんなところが、むずかしかった？ ● 学んだことを、今後どうしていきたい？ 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 42
作ったコードのほぞん アカウントを作ると、作ったコードをほぞんできます。 ほぞんしたコードは、あとで開いて編集できます。 タイトルをつける アカウントを作る ほぞんする ほぞんした コードを開く 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 43
本資料の権利と留意事項 ［使用画像の出典］ 一部の画像は以下のサイトよりダウンロードして利用しています。 ● Loose Drawing https://loosedrawing.com/ ［本資料のライセンス］ ● ● 本資料は、株式会社まなび梯（以下「当社」）より、クリエイティブ・コモンズ・ライセンス（CC-BY 4.0）の もとに提供されています。 本資料の一部の画像には、他の条件でライセンスされている第三者のコンテンツが 含まれています。 ［留意事項］ ● ● ● ● 本資料に掲載されている会社名、製品名などの固有名詞は、各団体の商標または登録商標です。 本資料に掲載されている製品名などには、必ずしも商標表示（™、®）を付記しておりません。 本資料の内容について正確な記述につとめましたが、当社は本資料の内容に対して何らかの保証をするものでは ありません。 本資料で得られた情報の使用から生じるいかなる損害についても、当社は責任を負わないものとします。 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 44
株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)