アメリカの中学生が学んでいるウェブページのつくり方とは？

2016年の発売直後から大きな話題を呼び、中国・ドイツ・韓国・ブラジル・ロシア・ベトナムなど世界各国にも広がった「学び直し本」の圧倒的ロングセラーシリーズ「Big Fat Notebook」の日本版が刊行された。藤原和博氏（朝礼だけの学校校長）「プログラミングは新しい言語の獲得だ」、野田クリスタル氏（お笑い芸人・マヂカルラブリー）「プログラミングがやりたくなる！まるでゲームの攻略本みたい！」、尾原和啓氏（元グーグル・IT評論家）「プログラミングを通して、ビジネスにも応用できる考え方が見えてくる！」と絶賛されている。本記事では、全世界700万人が感動した同シリーズのプログラミング編『アメリカの中学生が学んでいる 14歳からのプログラミング』より、本文の一部を抜粋・掲載しています。

Photo: Adobe Stock

ウェブサイトを構成する要素

　ウェブサイトはどれも、HTMLコードを使ってつくられている。プロのウェブ開発者（仕事でウェブサイトをつくる人たち）は、HTMLを使って、テキスト、画像、動画などをウェブブラウザ上に表示しているのだ。

　つまり、HTMLは、ウェブブラウザに何を表示するかを指示するために使われる言語ということだ。

　カスケーディングスタイルシート（CSS）は、ウェブサイトをどう表示するかを、ブラウザに指示するのに使われる。CSSを使えば、テキストの色を変更したり、背景画像を挿入したりできるのだ。

　はじめのころのウェブサイトは、HTML言語と、初期のバージョンのCSSだけを使ってつくられていたので、スタイル、対話性、動きに乏しかった。

　でも、いまでは、生き生きとした対話型のウェブサイトをつくるために、HTMLやCSS以外にも、たくさんの言語が使われている。HTMLとCSSは、ウェブサイトのレイアウトや見た目を整えるために使われるのに対して、JavaScriptやPHPなどの言語は、サイトの対話性を高めるプログラムを実行するのに使われているのだ。

ウェブサイトを書くためのツール

　プロのウェブ開発者は、ウェブサイトのコードを書くために、お金を払って特別なコード編集プログラムを使うこともある。でも、コンピュータにもともとインストールされているテキストエディター（Windowsのメモ帳や、Macのテキストエディット）を使っても、コードが書ける。

　ウェブサイトのHTMLファイルは、「.html」というファイル形式で保存しよう。たとえば「index」というウェブサイトなら、「index.html」という名前で保存すればいい。

ウェブサイトを見る

　ウェブサイトを見るのに必要なのが、ウェブブラウザだ。ウェブブラウザとは、HTMLファイルを読み取り、きみのコンピュータ上に、ウェブサイトとして表示してくれるプログラムのこと。ウェブブラウザの例としては、Google Chrome、Safari、Microsoft Edge、Firefoxなどがある。

　きみがつくった .htmlファイルが保存されているフォルダーに行き、ファイルを右クリックし（Macならcommandキー+クリック）、「プログラムから開く」メニューで、好きなブラウザを選んでみよう。ブラウザにウェブサイトが表示されただろうか？