1
オ リ ジ ナ ル 制 作 教 本
オリジナルWebサイト制作をスムーズに進めていただくための先生向けの資料です。
こちらを授業準備や授業中の対応にご活用いただけると幸いです。
① オリジナル制作の目的
2
オリジナル制作の目的
3
新学習指導要領改訂の要点である、
「”何を学ぶか”よりも”何ができるようになったか”」の実現に向け、
「自分のアイディアや考えを形にする」体験を届けることを目的にしています。
自分のアイディアや考えを形にする体験を届けるために‥‥
4
自分のアイディアや考えを形にする体験ができると‥‥？
5
技術や知識が世の中とつながっていることを知る ことができます。
※Life is Tech ! のWebサイト
自分のアイディアや考えを形にする体験ができると‥‥？
6
作る立場の視点 を得ることができます。
※Life is Tech ! のWebサイト
自分のアイディアや考えを形にする体験ができると‥‥？
7
身近な課題 を発見し、解決することができます。
※電車部の部長が後輩のために
作った国鉄を紹介するサイト
② オリジナル制作５カ条
8
オリジナル制作の心構え
9
確 認 する
細かく
保 存 する
こまめに
調 べる
自分で
工 夫 する
できることで
考 える
作りながら
オリジナルWebサイト制作にのぞむ上で生徒さんが持っていると良い、
大切な観点を以下5つにまとめています。
※必要に応じて、生徒さんにもお伝えください。
10
コーディングでは、一文字違うだけで自分の思った通りにいかないことがたくさんあります。自分のやったことがどのように反映されるのか、プレビューを細かく確認しながら進めることを意識することが大切です。
コンピューター上のデジタルデータはどれだけ長い時間をかけて書いたコードでも保存をしておかないと一瞬でデータが消えてしまうことがあります。
こまめに保存をする習慣を持つことが大切です。
分からないことがある時、まずは自分で調べるくせをつけることが大切です。
テックレッスンでやったことを覚えていなくても大丈夫です。
調べたり、復習したりしながら作るのは普通のことです。
オリジナル制作を進めると、あれもこれもと、やりたいことがたくさんでてくるでしょう。ただし、最初は自分ができる範囲で制作してみるのがオススメです。これまで学んだ範囲でどんなことができるのか？意外とたくさんのことができます。考えて工夫してみるよう導いてください。
作りながら、手を動かしながら考えてみましょう。
その中で当初の構成図と違ってきたり、作業が手戻っても大丈夫だということを伝えてあげてください。生徒が自分でも気付かなかった自分の中のアイディアやクリエイティビティを引き出してあげてください。
確 認 する
保 存 する
調 べる
工 夫 する
考 える
細かく
こまめに
自分で
できることで
作りながら
③ オリジナル制作の進め方
11
オリジナルWeb制作の前提
12
Webサイトをゼロから作り上げるのではなく、パン屋さんのWebサイトをベースに、素材（写真や文字や色味）を作り替えていきます。
予め用意してある構成・構造の中で工夫していくことで生徒の制作のしやすさと先生方の指導のしやすさを両立します。
オリジナルWeb制作のイメージ
パン屋のWebサイトから自分の好きなWebサイトに作り替えていく様子を早送り動画でご覧になれます。
オリジナルWeb制作のフロー
14
オリジナル制作を進めるために、テキストエディタの使い方を学びます
パン屋のwebサイトを元に、変更する箇所とその方法を考える設計図を作成します
作成したコンセプトと設計図を元に、実際に制作をしていきます
webサイトのテーマを明確にします
①何を作るか
②誰に見てもらうか
③見た後にどうなって
欲しいか
制作したwebサイトのコンセプトやターゲットを発表します
ツ
l
ル
Cloud9
テーマ設定シート
（PDF）
構成シート
（PDF）
目的
発表会シート
(PDF)
Life is Tech ! Lesson
Cloud9
導入レッスン
企画・設計
構成
テーマ
制作
発表会
1
好きなもののまとめや欲しい情報のまとめなど、「こんなのがあったらいいのにな」と思うテーマを設定します。自分の好きなテーマを設定することで学習を自分ごとにすることができます。
テーマ設定シートの記入
構成シートの記入
テンプレートサイト（パン屋）の構成を参考にしながら自分のWebサイトの内容を当てはめていきます。Webサイトの構造・構成は変えず、写真やフォント・色味を変えるだけでも十分オリジナリティを出すことができます。
企画・設計
企画・設計
構成
テーマ
制作
発表会
導入レッスン
2種類のワークシートを使用して、どのようなWebサイトを作るのか前もって計画を立てます。
1
テキストエディタの起動方法や使用方法を学べます。
CSSで見た目を変更し、Webサイトに反映させる方法を学べます。
インターネット上で画像を検索し、保存する方法を学べます。
保存した画像をテキストエディタに取り込みwebサイトに反映させる方法を学べます。
オリジナルwebサイトを制作する際にテンプレートとなるファイルを作成します。
テキスト
エディタの
操作説明
CSSの変更
写真を
ダウンロード
写真を
差し替え
テンプレート
のコピー
導入レッスン
企画・設計
構成
テーマ
制作
発表会
導入レッスン
テキストエディタを使って、テンプレートサイト（パン屋）の画像＆テキストの変更方法を学びます。
1
タイトル変更
header変更
背景変更
写真変更
テキスト変更
調整
簡単に変更できるタイトルから変えていきます。
CSSで背景画像を変更します。
CSSで背景画像や
背景色を変更します。
HTMLで写真を変更します。
テキストを変更します。
全体を見直して色や余白などを調整します。
制作
企画・設計
構成
テーマ
制作
発表会
導入レッスン
テンプレートをオリジナルに作り変えます。まずはパン屋さんの要素をなくすことを目標にします。
1
制作を振り返り、発表したいことをまとめます。
※テーマ設定シートで代用可
発表会シートの記入
自分が制作したWebサイトを他人に見てもらいフィードバックを受け取ることで、
生徒自身が成功体験を感じられる場を目指します。
発表会
発表は、授業のご都合に合わせて実施しやすい形態で行ってください。
振り返り
例）全員の前で
1人づつ発表
例）5人程度の
グループで発表
発表が終わったら拍手でねぎらいます。これをルール化することで安心して発表に臨むことができるようになります。
発表会を振り返り、次回の制作に活かせることを考えてみます。時間がとれれば、何人かから感想をもらってみると良いです。
発表会
企画・設計
構成
テーマ
制作
発表会
導入レッスン
よくある質問・エラー
19
オリジナルWeb制作のフロー
20
オリジナル制作を進めるために、テキストエディタの使い方を学びます
パン屋のwebサイトを元に、変更する箇所とその方法を考える設計図を作成します
作成したコンセプトと設計図を元に、実際に制作をしていきます
webサイトのテーマを明確にします
①何を作るか
②誰に見てもらうか
③見た後にどうなって
欲しいか
制作したwebサイトのコンセプトやターゲットを発表します
ツ
l
ル
Cloud9
テーマ設定シート
（PDF）
構成シート
（PDF）
目的
発表会シート
(PDF)
Life is Tech ! Lesson
Cloud9
導入レッスン
企画・設計
構成
テーマ
制作
発表会
よくある質問・エラーの構成
21
タイトルの変更方法
エラー・質問
headerの変更方法
エラー・質問
背景の変更方法
エラー・質問
写真の変更方法
エラー・質問
テキストの変更方法
エラー・質問
調整の方法
エラー・質問
※下線の文字をクリックすると該当ページにとびます。
導入レッスン
22
制作をするために必要なツールやパソコンの使い方について説明しています。
こちらに掲載されている手順は、導入レッスンで学ぶことができます。
※下線の文字をクリックすると該当ページにとびます。
目次
テキストエディタについて
23
テキストエディタ
について
画像について
※下線の文字をクリックすると該当ページにとびます。
テンプレート
について
メニューバーが消えてしまいました
左上の ▲ をクリックするとメニューバーが非表示になってしまいます。
上部の点線で囲まれた細長い部分をクリックすると、メニューバーが表示されます。
Q.
よくある質問・エラー
コードの左側にでる記号の意味を教えてください
コードの横にでる記号でコードのエラーや不具合の可能性を教えてくれます。
見た目が崩れているなどの不具合がある場合に確認してください。
意図通りに表示がされていれば、こちらの記号がでていても問題ありません。
コードのエラーを
教えてくれます。
コードを書く上で注意した方が
よい点を教えてくれます。
コードの不具合の可能性を
教えてくれます。
高
低
重要度
Q.
よくある質問・エラー
目次
画像について
26
画像について
※下線の文字をクリックすると該当ページにとびます。
テンプレート
について
テキストエディタ
について
27
Pixabay (画像素材サイト) が閲覧できません
貴校内のセキュリティ上、閲覧をブロックされている可能性があります。
※ 状況をご確認のうえ、セキュリティの解除が難しい場合は
今後のwebサイトの活用方法（下記2つの場合）に応じてご対応ください。
①Webサイトを公開する場合
アクセス可能なWebサイト等で「著作権フリーの画像」をダウンロードしてご活用ください。
著作権をクリアしている場合は、生徒が所有している画像を使用していただいても良いかと思います。
②Webサイトを公開しない場合
Webサイトを公開せず、個人や教室内での共有に留める場合は、著作権法第35条の範囲内で自由に制作 を進めることをおすすめします。授業の中で伝えたいメッセージに合わせ進行ください。
Q.
よくある質問・エラー
28
ダウンロードした画像はどこに保存されていますか？
※インストールされているソフトによって、ダウンロードされる場所が異なります。授業前にご確認をお願いします。
※リフレッシュソフトなどの影響でダウンロードしたファイルが削除されてしまう場合があります。
ダウンロードした素材の保管にはご注意ください。
通常パソコンの「ダウンロードフォルダ」に保存されます。ウィンドウ左メニューの「ダウンロード」から開くことができます。
写真ファイルは「写真フォルダ」に、その他のファイルは「Safari▶︎
ダウンロードフォルダ」に保存されます。
Chromebook
mac
Windows
iPad
Q.
よくある質問・エラー
29
画像はどこに保管しておくといいですか？
my_website_〜 フォルダの中の img フォルダに入れてください。
img フォルダの名前を変更しないように気をつけてください。
Q.
よくある質問・エラー
目次
30
画像について
※下線の文字をクリックすると該当ページにとびます。
テンプレート
について
テンプレート(編集用データ) について
テキストエディタ
について
31
zipファイルとは何ですか？
容量の大きなデータを小さくしたり、複数のファイルを１つにまとめることを「圧縮」、
そのデータをもとの状態にもどすことを「展開 (または解凍)」といいます。
圧縮されたデータは展開(解凍)をしないと使用することができません。
今回使用している zip 形式 ( .zip ) は圧縮されたデータ形式の代表的なものです。
そのほかの圧縮形式 ‥‥
gzip形式 ( .gz )、LHA形式 ( .lzh )、EXE形式( .exe ) などがあります。
展開(解凍)
圧縮
ファイルの末尾に
.zip とついています
Q.
よくある質問・エラー
32
テンプレートはどこにありますか？
「lesson_data」にテンプレートが入っています。
生徒が書いたコードを最初の状態に戻したい場合は、テンプレートをコピーして使用してください。
Q.
よくある質問・エラー
33
Windows の展開 (解凍) 方法
❸
❶ zipファイルを右クリックし、
メニューからすべて展開を選びます
❷ でてきたウィンドウの
展開を選びます
❸ 近くに展開(解凍)された
フォルダが表示されます
※利用している端末によって、展開されるファイルが表示される場所が異なります。授業前にご確認ください。
zip ファイルはどのように展開(解凍)しますか？ 1/3
Q.
よくある質問・エラー
34
mac の展開(解凍)方法
iPad の展開(解凍)方法
zip ファイルはどのように展開(解凍)しますか？ 2/3
ダブルクリックすると展開(解凍)
されたフォルダが表示されます
❶ 長タップしてメニューをだし、
展開を選択します。
※利用している端末によって、展開されるファイルが表示される場所が異なります。授業前にご確認ください。
❷ 展開(解凍)された
フォルダが表示されます
Q.
よくある質問・エラー
35
Chromebook の展開(解凍)方法
zip ファイルはどのように展開(解凍)しますか？ 3/3
※利用している端末によって、展開されるファイルが表示される場所が異なります。授業前にご確認ください。
❶ zipファイルをクリックし、
開く から【Zipアーカイブツールで開く】を選択します。
❷ でてきたフォルダをドラッグ＆ドロップで
マイファイルに移動させます。
①
②
Q.
よくある質問・エラー
36
末尾が .gz のファイルとは何ですか？
容量の大きなデータを小さくしたり、複数のファイルを１つにまとめることを「圧縮」、
そのデータをもとの状態にもどすことを「展開 (または解凍)」といいます。
圧縮されたデータは展開(解凍)をしないと使用することができません。
※作品データをCloud9からダウンロードする場合、
Windowsでは zip 形式 ( .zip ) 、mac / Chromebook / iPad ではgzip形式 ( .gz ) でデータがダウンロードされます。
そのほかの圧縮形式 ‥‥
LHA形式 ( .lzh )、EXE形式( .exe ) などがあります。
展開(解凍)
圧縮
ファイルの末尾に
.tar.gz とついています
Q.
よくある質問・エラー
37
Windows の展開(解凍)方法
末尾が.gz のファイルはどのように展開(解凍)しますか？ 1/3
Windows の標準仕様では .gzファイルを展開(解凍)することはできません。
フリーソフトをインストールしていただく必要があります。（ オススメフリーソフト → Lhaplus ）
※Windows 機で Cloud9 からフォルダをダウンロードすると .zipファイルでダウンロードされます。
【 Lhaplus を使用して .gzファイルを展開(解凍)する方法 】
ダブルクリックすると 展開(解凍) されたフォルダが表示されます
Q.
よくある質問・エラー
38
mac の展開(解凍)方法
iPad の展開(解凍)方法
ダブルクリックすると展開(解凍)
されたフォルダが表示されます
❶ 長タップしてメニューをだし、
展開を選択します。
※利用している端末によって、解凍されるファイルが表示される場所が異なります。授業前にご確認ください。
❷ 展開(解凍)された
フォルダが表示されます
末尾が.gz のファイルはどのように展開(解凍)しますか？ 2/3
Q.
よくある質問・エラー
39
末尾が.gz のファイルはどのように展開(解凍)しますか？ 3/3
Chromebook の展開(解凍)方法
Chromebook の標準仕様では .gzファイルを展開(解凍)することはできません。
Google公式で紹介されている Wicked Good Unarchiver というアプリケーションをインストールして、
.gzファイルを 展開(解凍) してください。
❶ .gzファイルをクリックし、開く から
Wicked Good Unarchiver で開くを選択します。
❷ でてきたフォルダをドラッグ＆ドロップで
マイファイルに移動させます。
①
②
【Wicked Good Unarchiver を使用して .gzファイルを展開(解凍)する方法】
Q.
よくある質問・エラー
40
ファイル または フォルダ名はどのように変更しますか？
❶ ファイル または フォルダを右クリックし
メニューから名前を変更をクリックします。
❷ 任意の名前に変更し
Enterキーをクリックし確定します。
右クリック or
長タップ
Enterキーで
確定
Q.
よくある質問・エラー
制 作
41
制作の進め方や注意点、具体的な手順と制作中に実際に起こったエラーや質問について、下記の順番で説明しています。
※下線の文字をクリックすると該当ページにとびます。
制作パートの進め方 (参考)
42
タイトルの
変更
headerの
変更
背景の変更
写真の変更
テキストの
変更
調整
簡単に変更できるタイトルから変えていきます。
CSSで背景画像を変更します。
CSSで背景画像や
背景色を変更します。
HTMLで写真を変更します。
テキストを変更します。
全体を見直して色や余白などを調整します。
テンプレートをオリジナルに作り変えます。まずはパン屋さんの要素をなくすことを目標にします。
＋α
レッスンで取り扱っていない内容に挑戦します。
「エラーかな？」と思ったら - うまくいかない時の対応 -
プログラミングでの制作にエラーはつきものです。
たった1文字、1記号が足りないだけ・ミスがあるだけで思い通りにうまくいかないものです。
「正しくやってるはずなのに、うまくいかない！」生徒からそんな声が聞こえてきたら、笑顔で対応し
プログラミングはCodeと呼ばれる命令文を正確に打ち込まないと、思い通りにはいかないことをお伝えください。
その上で、解決に向けてまずは以下4つの観点を生徒と一緒に確認してみてください。
43
※下線の文字をクリックすると該当ページにとびます。
44
エラーかな？と思ったら - スペルが違わないか -
1文字でも違うと認識されないので注意してください。
コードのスペルが違わないか確認してください。
Q.
よくある質問・エラー
45
エラーかな？と思ったら - 閉じタグがあるか -
HTML には開始タグ <〇〇> と閉じタグ </〇〇> が必要です。
閉じタグを忘れたり、消してしまったりすることが多いので注意してください。
※ <img> や <br> など閉じタグが必要ないものもあります。
閉じタグがあるか確認してください。
Q.
よくある質問・エラー
46
エラーかな？と思ったら - 記号が書けているか -
ダブルコーテーション(“) などが抜けやすいので注意してください。
記号が正しく書けているか確認してください。
HTML
CSS
Q.
よくある質問・エラー
47
エラーかな？と思ったら - 日本語入力をしていないか -
全角のスペース (空白) は見つけ難いので注意してください。
日本語入力、全角入力をしていないか確認してください。
Ctrl (command) + F で検索窓がでてきます。
そこに全角の空白を入力して検索することが
できます。
ここに全角の空白！
Q.
よくある質問・エラー
目次
タイトルの変更
48
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
※下線の文字をクリックすると該当ページにとびます。
1
タイトルの変更方法 1/2
HTML でタイトル <h1> のテキストを変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
1
※こちらの変更はこだわって時間がかかってしまう生徒さんが多いので注意してください。
最後、調整の時間に変更することがオススメです。あとで変更することができることを伝えてください。
タイトルの変更方法 2/2
CSS で文字の色、サイズ、種類 (フォント) を変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
51
タイトルが変更できません
・タイトル文字が <h1> 〜 </h1> タグの間に書かれているか確認してください。
<title> タグに書かれている場合があります。
<title> タグは Webページ全体のタイトルを指定するときに使用します。
サイトの画面には見えません。
・閉じタグ </h1> を消してしまっていないか確認してください。
※インターネット上に公開した時の検索結果などに反映されます。
記載されていても問題はありません。
Q.
よくある質問・エラー
52
色はどのように指定すればいいですか？
「カラー＆フォント ガイド」に掲載されている
色名を入れてみます。
まずは何色でもいいので、設定できるか試して
みましょう。
※「カラー＆フォント ガイド」はオリジナルサイト制作の
補助教材からダウンロードできます。
Q.
よくある質問・エラー
53
タイトル文字の色が変更できません…
・色名で指定している場合、英語のスペルが正しいか確認してください。
・カラーコードで指定している場合、以下の項目を確認してください。
1) 先頭に「 # 」(シャープ) が付いているか
2) アルファベットまたは数字が６文字あるか
・色名またはカラーコードの前に「 : 」(コロン) がついているか確認してください。
・色名またはカラーコードの後に「 ; 」(セミコロン) がついているか確認してください。
「 ; 」(セミコロン) が無いとその行と次の行の設定が反映されません。
※一番最後の行は無くてもOK。
Q.
よくある質問・エラー
54
フォントを変更してみたいのですがどうすればいいですか？
「カラー＆フォントガイド」に掲載されている
フォントを設定してみます。
まずはどのフォントでもいいので、変更できるか
試してみましょう。
※「カラー＆フォント ガイド」はオリジナルサイト制作の
補助教材からダウンロードできます。
Q.
よくある質問・エラー
55
フォントを変更できません…
・フォントの英語のスペルが正しいか確認してください。(lobstar → lobster)
・フォント名の前に「 : 」(コロン) がついているか確認してください。
・フォント名の後に「 ; 」(セミコロン) がついているか確認してください。
「 ; 」(セミコロン) には区切りの意味があります。無いとその行と次の行の設定が反映されません。
※一番最後の行は無くてもOK。
Q.
よくある質問・エラー
目次
headerの変更
56
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
※下線の文字をクリックすると該当ページにとびます。
57
my_website_〜 の中の
img を選択します。
File
↓
Upload Local Files…
を選択します。
Select files を選択し、
画像を指定します。
imgフォルダに画像が
入っていることを
確認してください。
❷
❶
❹
❸
headerの変更方法 1/2
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
1
headerの変更方法 2/2
CSS でheaderの背景画像の画像名を変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
59
・imgフォルダに画像が入っていることを確認してください。
・画像名が同じであることを確認してください。
拡張子（〜.jpg や 〜.png ）がなかったり、「 . 」(ピリオド) がない場合があります。
・「img / 」が消されていないか確認してください。
「 / 」（スラッシュ）は「imgフォルダの中の」という意味です。
・ CSS の header に書かれていることを確認してください。
HTML の <h1> に書いてしまう場合があります。
header 画像が変更できません
Q.
よくある質問・エラー
60
CSS の header に background-repeat: no-repeat; を指定します。
① style.css を開きます。
② header を探します。
③ header の中に
background-repeat: no-repeat; を追加します。
・background-repeat は
背景画像の表示形態を指定します。
・no-repeat は背景画像を繰り返さない設定です。
※何も指定しないと繰り返される設定になります。
header画像が繰り返し表示されないようにしたい
設定をしない
Q.
よくある質問・エラー
61
CSS の header に background-size: cover; を指定します。
① style.css を開きます。
② header を探します。
③ header の中に
height: 100%;
background-size: cover; を追加します。
・background-size は
背景画像のサイズを指定できます。
・cover は背景サイズに合わせて、
画像サイズを調整調整してくれる設定です。
※画像サイズによっては、画質が悪くなる場合があります。
header画像を1枚で大きく表示したい
設定をしない
Q.
よくある質問・エラー
62
header画像の画質が悪いのですがどうすればいいですか？
サイズの大きい画像を探しましょう。Googleの画像検索ではサイズを指定して検索できます。
❷
❶
❹
❸
キーワードを入力し「画像」で検索します。
「ツール」を選択します。
検索の条件が表示されます。
「サイズ」から「大」を選択します。
Q.
よくある質問・エラー
目次
背景の変更
63
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
※下線の文字をクリックすると該当ページにとびます。
1
背景色を変更する方法
CSS で.shopの背景色を変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
65
色はどのように指定すればいいですか？
「カラー＆フォント ガイド」に掲載されている
色名を入れてみます。
まずは何色でもいいので、設定できるか試して
みましょう。
※「カラー＆フォント ガイド」はオリジナルサイト制作の
補助教材からダウンロードできます。
Q.
よくある質問・エラー
66
色が変更できません
・色名で指定している場合、英語のスペルが正しいか確認してください。
・カラーコードで指定している場合、以下の項目を確認してください。
1) 先頭に「 # 」(シャープ) が付いているか
2) アルファベットまたは数字が６文字あるか(#fff0000 → #ff0000)
・色名またはカラーコードの前に「 : 」(コロン) がついているか確認してください。
・色名またはカラーコードの後に「 ; 」(セミコロン) がついているか確認してください。
「 ; 」(セミコロン) には区切りの意味があります。無いとその行と次の行の設定が反映されません。
※一番最後の行は無くてもOK。
Q.
よくある質問・エラー
1
背景画像を変更する方法
CSS で.photoの背景画像を変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
68
・imgフォルダに画像が入っていることを確認してください。
・画像名が同じであることを確認してください。
拡張子（〜.jpg や 〜.png ）がなかったり「 . 」(ピリオド) がない場合もあります。
・「 img / 」が消されていないか確認してください。
「 / 」（スラッシュ）は「imgフォルダの中の」という意味です。
画像が表示されません
Q.
よくある質問・エラー
69
木目の背景画像は、同じ画像を繰り返し表示させることで模様のように見せています。
画像を使って背景を模様にしたい！
「パターン」 などの言葉で画像を検索すると、繰り返して模様のように見せられる画像が見つかります。
Q.
よくある質問・エラー
目次
写真の変更
70
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
※下線の文字をクリックすると該当ページにとびます。
1
写真の変更方法 1/2
HTML で <section class="shop"> の写真を変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
1
写真の変更方法 2/2
HTML で <section class="photo"> の写真を変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
73
・imgフォルダに画像が入っていることを確認してください。
・画像名が同じであることを確認してください。
拡張子（〜.jpg や 〜.png）がなかったり、「 . 」(ピリオド) がない場合があります。
・「 img / 」が消されていないか確認してください。
「 / 」（スラッシュ）は「imgフォルダの中の」という意味です。
・「 " 」〜「 " 」 (ダブルコーテーション) が消されていないか
確認してください。
画像が表示されません
Q.
よくある質問・エラー
74
HTML で情報の中身やWebサイトの構造を、 CSS で見た目を表現します。
header の画像は背景として見た目の部分を扱っているので、CSSで指定しています。
HTML の <h1> に画像を入れた例
CSS の h1の背景に画像を入れた例
header や背景の画像は CSS で指定しましたが、
マーサやパンの画像は HTML で指定するのはなぜですか？
Q.
よくある質問・エラー
<h2 class="title"> の色や文字サイズはどのように変更しますか？
<h2 class="shop">の色や文字サイズはどのように変更しますか？
<h2 class="title">の見出し(h2)の色やサイズはどのように変更しますか？
<h2 class="photo">の見出し(h3)の色やサイズはどのように変更しますか？
<h2 class="photo">のテキストの色やサイズはどのように変更しますか？
目次
テキストの変更
75
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
※下線の文字をクリックすると該当ページにとびます。
1
テキストの変更方法 ①
HTML で <h2 class="title"> のテキストを変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
77
<h2 class="title"> の色やサイズを指定している CSS は2箇所あります。
<h2 class="title"> の色やサイズはどのように変更しますか？
※HTMLの指定
Q.
よくある質問・エラー
1
テキストの変更方法 ②
HTML で <section class="shop"> の中の <p> のテキストを変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
79
<h2 class="shop">の色やサイズはどのように変更しますか？
<h2 class="shop"> の中の <p> の色やサイズを指定している CSS は2箇所あります。
※HTMLの指定
Q.
よくある質問・エラー
1
テキストの変更方法 ③
HTML で <section class="photo"> の中の <h2 class="title"> と <h3> 、<p> のテキストを変更します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
81
<h2 class="title">の見出し(h2)の色やサイズはどのように変更しますか？
<section class="photo"> の中の <h2> の色やサイズを指定している CSS は2箇所あります。
Q.
よくある質問・エラー
82
<h2 class="photo">の見出し(h3)の色やサイズはどのように変更しますか？
※サイズは指定をする場合は、
font-size を指定します。
<section class="photo"> の中の <h3> の色やサイズを CSS で指定します。
Q.
よくある質問・エラー
83
<h2 class="photo">のテキストの色やサイズはどのように変更しますか？
※サイズは指定をする場合は、
font-size を指定します。
<section class="photo"> の中の <h3> の色やサイズを CSS で指定します。
Q.
よくある質問・エラー
84
ギャラリーの背景が消えてしまいました… 1/4
<section class="photo"> の中の <p> が削除されており、
高さを認識できず背景が表示されなくなっています。
背景が消えた‥‥
Q.
よくある質問・エラー
85
ギャラリーの背景が消えてしまいました… 2/4
<p> に floatを 解除する CSS ( clear: left ) を入れることで、背景に高さが戻ってきます。<p> タグを残して、文章を削除すれば背景が表示されます。
※floatの説明は後のページに記載しています。
背景を
表示させる
方法１
Q.
よくある質問・エラー
86
ギャラリーの背景が消えてしまいました… 3/4
<section class="photo"> をあらわす .photo に高さを指定する height を使って、
好きな高さ（例：500px）にします。
背景を
表示させる
方法２
Q.
よくある質問・エラー
87
floatとは何ですか？ 1/2
float とは要素（divなど）を浮かせて、要素を横に並べる CSS のプロパティです。
要素が浮かんでいると（float が効いていると）、
背景の <section class="photo"> の高さがなくなり、背景が表示されなくなります。
Q.
よくある質問・エラー
88
floatとは何ですか？ 2/2
float を解除するためには、別のHTML要素 (今回は .photo p ) で CSS ( clear: left ) を指定します。
Q.
よくある質問・エラー
目次
調整
89
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
※下線の文字をクリックすると該当ページにとびます。
1
調整する方法 1/3
CSS で header と h1 の表示位置や余白などのレイアウトを調整します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
1
調整する方法 2/3
CSS で .shop の表示位置や余白などのレイアウトを調整します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
1
調整する方法 3/3
CSS で .photo の表示位置や余白などのレイアウトを調整します。
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
93
「カラー＆フォントガイド」に掲載されていない色はどうやって指定しますか？
16色の色名の他にカラーコード、RGBで指定できます。
カラーコード
・Web上で色を指定するためのコード（符号）で、
６桁の16進法で指定します。６桁の前には「 # 」 (シャープ) をつけます。
https://www.colordic.org/ などのサイトを参考にしてください。
RGB
・色を混ぜて表現する方法の１つで、R (red)、G (green)、B (blue)の
３色を0〜255の数値で指定します。
RGBに A (Alpha ※透明度) を0〜1の数値で指定する場合もあります。
color : # f f f f f f ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
※白になります。
※白になります。
Q.
よくある質問・エラー
94
色を選ぶコツを教えてください
Chapter 3. オリジナルWebサイト制作の補助教材からダウンロードできる、
「デザインガイド」を参考にしてください。
Q.
よくある質問・エラー
95
文字の色はfont-colorで変えられませんか？
CSS で font-color というプロパティはありません。fontの色を指定するときは color を使用します。
以前は HTML で font要素を使用でき、font color で色を指定できたのですが非推奨になりました。
fontの要素は CSS の color で指定することが推奨されています。
Q.
よくある質問・エラー
96
写真のサイズはHTMLとCSSのどちらで指定しますか？
HTML で写真を、 CSS は背景 (白い枠) のサイズを指定しています。
CSSで指定している背景サイズとHTMLで写真のサイズを合わせて指定します。
Q.
よくある質問・エラー
97
画像のサイズを合わせたいのですがどうすればいいですか？ 1/3
❶ CSS で画像を指定します。
クラス名 .photo の中の div の中の img (画像) を
指定しています。
画像を同じサイズにしたい！
Q.
よくある質問・エラー
98
画像のサイズを合わせたいのですがどうすればいいですか？ 2/3
❷ height と width でサイズを指定します。
※widthとheightでサイズを変えると画像が
不自然に変形されることがあります。
Q.
よくある質問・エラー
99
画像のサイズを合わせたいのですがどうすればいいですか？ 3/3
❸ object-fit: cover; を指定します。
object-fit は画像を好きなサイズの中にフィットさせるプロパティです。
cover を指定すると好きなサイズからはみだした部分を切り取って、表示してくれます。
（真ん中基準）
Q.
よくある質問・エラー
100
写真の背景の色はどうやって変えるのですか？
CSS で .photo div のbackground-color を書き換えます。
Q.
よくある質問・エラー
101
paddingとmarginはどちらも余白を調整するためのものですが、余白の場所が違います。
図でいう要素の表示範囲というのは、heightやwidthなどで大きさを指定できる部分で、要素の箱の枠線(ボーダー)の中に入っています。
そのボーダーと内側と要素の表示範囲の間の余白がpaddingです。
そして、ボーダーの外側の余白がmarginです。
要素のどの部分に余白を作りたいか、調整したいかを考えて、paddingとmarginを使い分けてみてください。(次ページに具体例あり)
余白を調整したいのですがpaddingとmarginの違いはなんですか？ 1/2
要素の箱の枠線 (ボーダー)
Q.
よくある質問・エラー
102
余白を調整したいのですがpaddingとmarginの違いはなんですか？ 2/2
padding
margin
Q.
よくある質問・エラー
目次
＋α（テックレッスンで取り扱っていない内容を紹介します）
103
タイトル
の変更
header
の変更
背景の
変更
テキスト
の変更
調整
写真の
変更
＋α
※下線の文字をクリックすると該当ページにとびます。
「カラー＆フォントガイド」に掲載されていないフォントを使う方法の一つに、
web上でフォントのデータを読み込み表示させるwebフォントというものがあります。
今回は、Google社が提供するwebフォント、googleフォントの使いかたをご紹介します。
「カラー＆フォントガイド」に掲載されていないフォントを使いたい！ 1/6
クリック
※LanguageからJapaneseを選択すると
日本語のフォントのみ表示することができます。
❶ https://fonts.google.com/ にアクセスします。
❷ 使いたいフォントを選んで選択します。
104
Q.
よくある質問・エラー
105
「カラー＆フォントガイド」に掲載されていないフォントを使いたい！ 2/6
❸ そのフォントの中でも、線の太さが異なるものや、斜体のものなど色々な種類があります。
使いたいものを選んでクリックします。
クリック
Q.
よくある質問・エラー
106
「カラー＆フォントガイド」に掲載されていないフォントを使いたい！ 3/6
❹ 画面の右側にパネルがでてきます。
「Use on the web」の項目で<style>から始まるコードを探します。
選択
※↓パネルが出てこない場合はここをクリック
Q.
よくある質問・エラー
107
「カラー＆フォントガイド」に掲載されていないフォントを使いたい！ 4/6
❺ 表示されたコードをコピーして、 CSS の style.css ファイルにペーストします。
※<style> </style> タグはコピーしません。
※一番最初の行に
ペーストするのが
オススメです。
コピー
ペースト
Q.
よくある質問・エラー
108
「カラー＆フォントガイド」に掲載されていないフォントを使いたい！ 5/6
❻ CSS でフォントを使いたい部分に「CSS rules to specify families」のコードをコピー＆ペーストします。
フォントが反映されているか確認します。※フォントによっては変化がわかり難いものがあります。
コピー
h1に使用する例
ペースト
Q.
よくある質問・エラー
109
「カラー＆フォントガイド」に掲載されていないフォントを使いたい！ 6/6
※ HTML のテンプレートデータで、すでにGoogleフォントが指定されている場合があります。
その場合は、 HTML の <link href = 〜> にフォント名を記入すると追加することができます。
※複数フォント（特に日本語フォント）を入れると画面の表示が遅くなりますので注意してください。
Q.
よくある質問・エラー
110
❶ 入れたい動画素材をimgフォルダにいれます。
❷ HTML の <header>〜</header> にこのコードをいれます。
headerの画像を動画にしたい！ 1/2
例) <video src=”background.mp4” autoplay muted> …無音で自動に再生される
動画を再生する時の設定を指定できます
・自動再生…autoplay
・繰り返し再生…loop
・無音…muted
・再生停止音量調節などを表示…controls
Q.
よくある質問・エラー
111
headerの画像を動画にしたい！ 2/2
❸ 動画のサイズと表示位置を設定します。
Q.
よくある質問・エラー
112
1) 配置したい動画を開き
「共有」をクリック
YouTubeを配置したい！
2)「埋め込む」を選択
3) コードが作成されるので「コピー」をクリック
❶ YouTubeを開いて埋め込めるリンクをコピーします。
❷ コピーしたリンクを HTML の掲載したい部分にペーストします。
Q.
よくある質問・エラー
113
.photoは右図のように、.photoというclass(箱)の中に
.big .box .smallというclassが入っている。というような
少し複雑な構成をしています。この構成を把握した上で、
.bigと.boxを反対にしてみる。
.bigの中にも、.smallを入れてみる。
.boxを.bigにし、.smallを無くしてみる(次ページで紹介)
などといった工夫をしてレイアウトを変えてみてください
.photoのレイアウトを変えたい！ 1/2
Q.
よくある質問・エラー
114
・(例).boxを.bigにし、.smallを無くしてみる
.photoのレイアウトを変えたい！ 2/2
box
small
small
big
big
big
Q.
よくある質問・エラー
リンクのボタンを設置したい！ 1/2
HTML に を指定します。
① index.html を開きます。
② <a href="リンク先">表示名</a>を追加します。
例1
<a href="season.html">季節限定のメニューはこちら</a>
cloud9の中の”season.html”ファイルに遷移します
例2
<a href="https://life-is-tech.com" target=”_blank”>
Webサイトのリンクはこちら</a>
https://life-is-tech.comのページが新しいタブで開きます
Q.
よくある質問・エラー
CSS にa { }を追加してボタンを装飾します。
リンクのボタンを設置したい！ 2/2
a {
/* 文字の色 */
color: brown;
/* 背景の色 */
background-color: gold;
/* 内がわの余白 */
padding: 10px;
/* 文字の装飾 */
text-decoration: none;
/* 角丸 */
border-radius: 20px;a
/* 並べ方 */
display: block;
/* 文字の整列 */
text-align: center;
}
CSS a { }の装飾例
Q.
よくある質問・エラー
117
テックレッスン内で扱わない内容に関する質問が出た場合には、まずは習ったスキルを応用して工夫するようお伝え下さい。
テックレッスンで習った内容で構築された作品集を提供していますので、ご利用ください。
（次ページ）
その他、生徒から要望があった際の対応方法 1/3
このサイトのように
アニメーションを
取り入れたい！
ログインする機能を作ってみたい！
ヘッダー画像を
定期的に切り替える機能を取り入れたい
Q.
よくある質問・エラー
118
その他、生徒から要望があった際の対応方法 2/3
Q.
よくある質問・エラー
119
その他、生徒から要望があった際の対応方法 3/3
サンプルコード
（準備中）
こちらのスライドを
生徒さんに共有いただいても構いません
Q.
よくある質問・エラー
120
作品をインターネット上に公開したい
こちらのスライドを
生徒さんに共有いただいても構いません
外部の無料サービスを利用して、Webサイトを公開する（=リリースする）方法の
マニュアルをご用意しております。
Q.
よくある質問・エラー
目次
データ回収について
121
※下線の文字をクリックすると該当ページにとびます。
122
Cloud9 で作った生徒の作品はどうやって見ればいいですか？ 1/5
Cloud9上から作品のデータをダウンロードします。
オリジナル制作で使用したフォルダを選択します。
❶
右クリック(または長タップ)でメニューを出し、Download を選択します。
❷
・Webサイトの場合は my_website〜
・検索サイトの場合は twoway_original
Q.
よくある質問・エラー
123
Cloud9 で作った生徒の作品はどうやって見ればいいですか？ 2/5
Cloud9上から作品のデータをダウンロードします。
パソコンのダウンロードフォルダに、Windowsでは 〇〇.zip (zipファイル) 、mac / Chromebook / iPad では 〇〇.tar.gz (gzipファイル) という名前の圧縮ファイルが保存されます。
❸
〇〇.tar.gz
〇〇.zip
または
Q.
よくある質問・エラー
124
Cloud9 で作った生徒の作品はどうやって見ればいいですか？ 3/5
作品のデータを先生の教材確認用アカウントのCloud9にアップロードします。
トップにある「 litl- 〜 」
もしくはアップロードしたいフォルダを
選択します。
❹
File→Upload Local Files…
を選択します。
❺
Q.
よくある質問・エラー
125
Cloud9 で作った生徒の作品はどうやって見ればいいですか？ 4/5
作品のデータを先生の教材確認用アカウントのCloud9にアップロードします。
Select folder を選択し、
作品データを指定します。
❻
作品データが入っていることを
確認してください。
❼
Q.
よくある質問・エラー
126
Cloud9 で作った生徒の作品はどうやって見ればいいですか？ 5/5
作品のデータをプレビューします。
確認したい作品のデータ内のindex.htmlを
選択します。
❽
PreviewからPreview File index.htmlを押してプレビューします。
❾
Q.
よくある質問・エラー
(Cloud9) データ回収はどのように行えば良いですか？ 1/3
Cloud9 からダウンロードした作品データを回収します。
回収後に誰のデータか把握できるよう、命名規則を作ってフォルダ名を変更することをおすすめします。
※Cloud9 から作品データをダウンロードする方法はこちら
my_website〜.tar.gz
2年A組_デイジー.gz
拡張子を消さないように注意
my_website〜.zip
2年A組_デイジー.zip
Q.
よくある質問・エラー
128
(Cloud9) データ回収はどのように行えば良いですか？ 2/3
回収の方法をお伝えください。
（クラウドにアップロードするか、USBメモリ等のメディアで回収をする など）
クラウドサービスを利用する
USBメモリ等のメディアを使用する
DropBox
Google Drive
外付けハードディスク
USBメモリ
Q.
よくある質問・エラー
129
(Cloud9) データ回収はどのように行えば良いですか？ 3/3
Webサイトを構成するのに必要なデータは複数あります。
回収した各生徒の作品フォルダに、以下の必要なフォルダやファイルがあるか確認をしてください。
※オリジナル検索サイトを作成した場合は JavaScriptファイルも回収します。
Q.
よくある質問・エラー
⑤ コラム
130
コラム
131
ITに関係する面白い話や雑学、今学んでいる技術や知識が実社会で役になっていることが実感できるようなエピソードなどをコラムにまとめました。
授業でもぜひご活用ください。
132
世界最高齢のプログラマ
世界最高齢のプログラマは日本人女性の若宮正子さん。
Appleのティム・クックCEOから「世界最高齢プログラマ」として賞賛された彼女はなんと、58歳でパソコンに触れ、82歳でiPhoneアプリを開発しました。
「高齢者は指が乾いているから、スマートフォンの画面をスワイプやスライドをしても、なかなか機械が反応しない」という問題意識から、高齢者でも楽しめるスマホゲームを開発しようと思い、アプリ開発を始めたそうです。
幾つになっても挑戦できるという姿勢だけでなく、まさに「プログラミングは、問題解決のツールだ」ということを体現されています。
コラム
133
昔のコンピューターは人間だった！？
一見何を言っているのかさっぱりわからないかも知れませんが、今我々の手元にある機械が発明される以前、「コンピューター」(Computer) とは「計算手」すなわち計算をする人のことを指していました。
計算機が発明されるまで複雑な計算は全て人間の手で行わなければいけませんでした。当然それは一人でできることではなく、大勢の人間が「計算手」としてチームを組み複雑な計算作業にあたっていました。「コンピューター」はれっきとした職業だったのです。
コラム
134
「Google」の会社名は実は誤字から生まれた？！
Googleの社名の由来は「googol (グーゴル) 」という単語です。
googolは英語で10の100乗、つまり10を100回かけた巨大な数字を意味する言葉で、Web上に存在する膨大な量のデータや情報を体系的に取りまとめることが、Googleのミッションである。という想いが込められています。
ちなみに、本来Googolと綴るべきところを、スペルを間違って登録をしてしまったことで、社名やサービス名は「Google(グーグル)」となったそうです。
コラム
135
正義のハッカー
「ハッキングによりX万件の情報漏えい・・・」というニュースをたまに見かけます。ネットショップや決済サービスなどは頻繁にターゲットになります。
ハッカーというと悪のイメージもありますが少しワルカッコイイ感じもします。
実は合法的に、かつお金をもらってやる方法があります。
予め所有者に許可をもらって、Webサイトなどを攻撃し、ハッキングができる穴がないかを調べることで、悪い人にハッキングされることを未然に防ぐお仕事があります。これをする人は「ホワイトハッカー」と呼ばれたりします。
最近は中高生が遊びでハッキングをしてしまい、逮捕される事例も出てしまっています。ハッキングの技術は社会の役に立つこともできるので、正しい使い方ができるようになってほしいです。
コラム
136
意外な由来が盛りだくさん！？プログラミング言語の名前の由来
世の中にはさまざまなプログラミング言語があり、その種類は100種類を超えるほど！その中にはちょっと意外な理由で決められたものもあります。例えばPython、英単語の意味としてはニシキヘビという意味ですが実はその由来は作者のGuido van Rossumが好きだったショー番組「モンティパイソンの空飛ぶサーカス」から取られています。いろんな由来を調べてみるのも面白いかもしれませんね。
コラム
137
iPhoneのAIアシスタント Siriの秘密
Siriという名称は、2010年にAppleが買収した企業「Siri」に由来します。SiriはSpeech Interpretation and Recognition Interfaceの略です。
実はこのSiriの開発には、SRI(Stanford Research Institute,スタンフォード研究所)という研究所のプロジェクトからスタートしたそうです。
SiriとSRI、なんだか似ていると思いませんか？
SRIは、コンピュータのマウス、インターネットのURLを設計開発したすごい研究所なんです。更に古くは、ウォルト・ディズニーのディズニーランド設計のための助言もしていたと言います。
素晴らしい商品を開発すると、この様にサービス名に開発者の名前がつくことがあります。
プログラミングを突き詰めていけば、世界的な商品にみんなの名前がつくこともありえるかも？！
コラム
138
良い子は真似しちゃダメ！PCで黒毛和牛が焼ける！？！？
パソコンにおける「頭脳」に当たるCPUはコンピュータのたくさんの処理を担当している部品です。その際に大量の熱を発するため、CPUには冷却装置が必ずついています。その冷却装置を外してパソコンを動かすと、たちまち100°Cを超える高温に！安全にしっかり配慮した人が、CPUの上で焼き肉をやっている動画なんかもYoutubeなどでは見られます。でも火傷や故障の原因になるから実際に試してはダメだよ！
コラム