文系でもOK！プログラミング初心者にオススメのHTMLの勉強
2020年、今年度から小学生のプログラミング授業が始まります。これまで文系で、PCやITスキルに関して避けて通っていた方も、少しずつプログラミングを身に付けた方が良いというような注目が集まっています。ですが、これまで全く縁のなかった人には、何から始めたらいいのか分からないというのが本音ではないでしょうか。
では、プログラミング等全く馴染みのない方は、何から勉強すればいいのでしょうか。実は今見ていただいているようなインターネットの画面は、HTML（エイチティーエムエル）というマークアップ言語（プログラミング言語のようなもの）が使われています。そこで、この記事ではPC自体が苦手な方にも、何となくプログラミングというものがイメージしていただけるように、インターネットの画面を見ていれば必ず関わっているHTMLから勉強した方が取り掛かりやすいということを説明致します。
[toc]
HTML（エイチティーエムエル）とは
HTMLとは（HyperText Markup Language・ハイパーテキストマークアップランゲージ）の略で、マークアップ言語と呼ばれています。インターネット上のウェブサイトを私たちが普段見ているような形式に映し出すための言語です。HTMLもプログラミングと考え方は似ていますので、まずは皆さんも普段からこうして使用しているインターネットのウェブサイトがどのような作りになっているかということを、なんとなくイメージしてもらえたらいいと思います。
まずはウェブサイトのページ上のどこでもいいので、右クリックしてメニューバーから【ページのソースを表示】をクリックしてみて下さい。
すると、下の画像のように見慣れない文字列が出てきます。これがHTMLの正体です。HTMLとは、こういった文字だけを羅列したテキストデータです。この文字列には、ブラウザソフトに対して、どのように表示しなさいという命令が含まれています。そうして私たちにとって見やすい画面にしているのがインターネット上のウェブサイトというわけす。
すると、上の画像のように見慣れない文字列が出てきます。これがHTMLのテキストデータです。この文字列をブラウザというソフトを通して私たちにとって見やすいページ映し出しているのが、インターネット上のウェブサイトというわけす。
注意・ブラウザとは
＊インターネットをどのブラウザで見ていますか？という質問をすると、Yahoo!とおっしゃる方がおられますが、Yahoo！はブラウザではなく、検索サイトに該当します。ブラウザとはページを表示するソフトのことです。つまり、私たちは下記のいずれかのブラウザを使ってYahoo!のページを見ているということになります。（日本では使用者に分かりやすいように、ブラウザを開くと自動的にYahoo!のページに繋がるような設定がされていることが多いので、勘違いしてしまうことが多くなっています。）
ブラウザソフト
- Chrome（Google)
- Microsoft Edge（Microsoft)
- Internet Explorer （Microsoft)
- Firefox（Mozilla Foundation）
- Safari（Apple)
HTMLを簡単にイメージするために
試しに下の、<!DOCTYPE html>～</html>までをコピーして、ご自身のPCのテキストエディタソフト（ウィンドウズならばメモ帳、Macならばテキストエディットで結構です。）で新規ファイルを開いて貼り付けして下さい。
HTMLの基礎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>プログラミングとは</title>
</head>
<body>
<h1>HTMLとはなんでしょうか？</h1>
<p>練習としてテキストエディタでhtmlファイルを作成して、ブラウザで表示させる</p>
</body>
</html>
名前を付けて保存するときに、仮にexample.htmlという名称を付けて下さい。.htmlと名前を付けることで、このテキストがhtmlというファイルと認識されるようになります。
グーグルクロームというブラウザを使用して、example.htmlというファイルを画像のようにドラッグ＆ドロップして下さい。
ブラウザとは、インターネット上でウェブサイトを表示させるためのソフトです。
グーグルクロームをインストールしていない方はこちらからダウンロードしてください。
⇒ ダウンロードページはこちら
example.htmlというファイルをドラッグ＆ドロップすると、上の画像のように表示が切り替わります。こうしてみるとHTMLがウェブサイトを私たちに見やすい画面に表示するための言語という意味がお分かりいただけるのではないでしょうか。もちろん多くのウェブサイトは、HTMLだけでなく様々に複雑な要素を組み合わせてできています。ですが、これだけで何となく今まで見ていたインターネットのページというものが、こういった言語の集まりなのだとイメージできます。
HTML勉強のためにオススメの本
ネット上を調べてもHTMLの独学に関する情報は沢山出てきます。ですが文系の方は、本でじっくり解説してくれているほうが良いという方も多いでしょう。そこで分かりやすく、簡単なウェブサイトなら自分で作れるスキルを身に付けることができるようになる、おススメの本をご紹介致します。
いちばんやさしいHTML5&CSS３の教本
HTMLの基礎的な部分から、花屋さんのホームページを作るという想定で分かりやすく解説しています。また、CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）という装飾的な部分をカバーする言語も解説していますので、普段見ている企業のウェブサイトに近いデザインのページを作ることができるようになります。
いちばんよくわかるHTML5&CSS3デザインきちんと入門
Webサイト制作の初心者だけでなく、最新のHTML・CSSの書き方を知りたい若干の経験者にもおすすめの本。PCサイトとスマートフォン画面は大きさが違います。PCとスマートフォンの両方で、綺麗に見えるようなレスポンシブルサイトを想定したHTMLコーディング方法や、CSSの実践的なテクニックも分かり易くなっています。また、実践で応用が効くようなサンプルコードも多数書かれています。
たった2日で楽しく身につく HTML/CSS入門教室
"みさき"君を主人公にして、リコーダー演奏会を告知するためのサイト作りをストーリーとして進めて勉強していきます。HTMLとCSSに詳しいヘンリーからWEBサイトの作り方を学ぶというマンガで始まります。マンガや図解が多く馴染みやすいのが特徴です。理解しにくい部分にはイラストやコラムを多く使っているので、気軽に楽しみながら学習するような構成になっています。レッスンごとに課題が分かれていて、わからない部分を何度も繰り返して学ぶことにも使えます。最終目標はリキッドデザインというディスプレイの大きさに左右されないWebサイトが公開できるようになっています。
HTML5&CSS3デザインレシピ集
基本のウェブサイトを作成してから役に立つ辞書のような本。どういうデザインにしたいかを逆引きして、コードを記述していけば様々なデザインの応用ができます。中級者向けですが、具体的にサイトを作って自分でアレンジしたいと考えているなら、役に立つ一冊です。
まとめ
いかがでしたでしょうか。
PCが苦手であったり、プログラミングなんて聞いてもさっぱり、という方もHTMLってどんなものかを少しご理解いただけたでしょうか。パソコンで私たちが見ている画面がどんな風にできているのか？を少し理解できれば、プログラミングにも挑戦してみたいなと思えるかもしれません。身近に見ているインたーネットのHTMLを少し知ることで、PCに苦手意識を持っている方が少しでも興味を持たれたら幸いです。
ここまで、お読みいただきありがとうございました。
