Web開発基本の”き”【HTML】を学ぼう

こんにちは!ミスターフュージョンの西村です!

みなさん、2020年プログラミング教育の必修化についてはご存知ですか?
2020年に小学校からプログラミング教育必修化が本格的に決定し、プログラミングが注目されています。

これからプログラミング学習や、HP作成などに取り組んでいこうとしている方が、まず最初に聞く単語といえば、「HTML」だと思います。

「HTML」は、WEBの世界においては基礎となるものなのですが、いまいちわかっていなかったり、調べてみても専門用語が多くてわかりづらいということもあるでしょう。

そこで今回は、初心者の方にもわかりやすく「HTMLとは」というところから説明していきます。
また、最後にHTMLを始める方にオススメのツールも紹介するので、参考にしていただければ幸いです。

 

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作成するためのMarkup(マークアップ)言語となります。

ウィキペディアではHTMLについて、以下のように説明されています。

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。 / wiki

少し難しいかもしれませんが、簡単にいうと
「文章に意味づけをするための言語」です。
※デザインをするための言語ではありません。

どういうことか??

例えば、
人間はホームページを見た時に大きな文字があることや写真があること、文章に色があることを脳で理解することができます。
一方でコンピューターは色や大きさだけではそのことを理解できず、どこが重要で目立たせたい部分であるのかを認識できません。
ですが、コンピューターに自動的に判断して、自動的に処理してもらいたいですよね?そこで、コンピューターにわかりやすい言語で書く時に使われるのがHTMLです。

普通のテキストファイル(Wordなど)と違うのは、
・ファイルの名前が「〇〇.html」であること
・ファイルの中身が、一定のルールに基づいて書かれていること
この2つだけです。

この2つの条件に沿って作られたファイルのことをHTMLファイル、2つ目のルールのことをHTMLと呼んでいます。

ふたたびHTMLとは

HTMLとは「一定のルールに基づいて書かれている」ルール

  • 機械が自動処理できるようにするためにHTMLはある
  • HTMLで文章にタグづけをする
  • HTMlは見た目を整えるための言語ではなく「意味づけ」のための言語

HTMLを始めるためのツールの紹介

基本的に文字を書けるテキストエディタならどんなツールでもなんでも良いです。
(Windowsならメモ帳、Macテキストエディットなど…
これらはデフォルトで入っているものですが、どれも使用できます!
※ただ、メモ帳などの機能だと、文字の色分けなどができないため、あまりおすすめはしていません)

無料でも使いやすいツールはたくさんあるのでダウンロードしてみてください。
ここでオススメしたいツールを5つご紹介します。

①brackets


Windows、Mac OS対応で、Adobe Systemsが開発しGitHub上に公開されている、オープンソースのテキストエディタです。
HTML、CSS、JavaScript用に作成したテキストエディタとなっており、Brackets自身もHTML、CSS、JavaScriptで作られているのが特徴です。そのためHTML、CSS、JavaScriptさえ理解していればエディタ自体を自由にカスタマイズすることが可能です。
さらに挙動が軽く、拡張機能をどんどん追加する事によりさらに自由にカスタマイズすることができます。

http://brackets.io/index.html

②Atom

Windows、Mac OS X、Linux対応で、2014年にGithubが公開したテキストエディタです。初期設定では各種メニュー項目は英語に設定されていますが、これを「japanese-menu」というパッケージをインストールすることで日本語化することができます。

エディタのインターフェースが非常に見やすい為、作業しやすいです。機能追加も無料でできるので初心者の方でもすぐ使い慣れるでしょう。
特にテキストエディタを使ったことがないという人は、Atomを使うところから始めて見ても良いかもしれません。

https://atom.io/

③サクラエディタ

Windows用のテキストエディタです。オープンソースでだれでもソースコードを編集できるため、多くの開発者によって機能が追加されてきました。
そのため、開発者たちの知能の最終形態と言ってもいいでしょう。使いやすいです。

また、国産エディタなのでインタフェースは全て日本語です。

https://sakura-editor.github.io/

④Mi

Mac用のテキストエディタです。国産のためインタフェースが日本語です。自動的に関数の一覧表や、ファイルの一覧表などを作成してくれる嬉しい機能が付いています。
また、エディタの背景画像を設定できるので見た目にこだわりたい方にもおすすめです。

https://www.mimikaki.net/

これらの4つは全て無料なので、気軽にプログラミングを触ってみたいという方にオススメです。

次に紹介するSublime Textは一部有料なのですが、使いやすく、メジャーな為紹介させていただきます。

 

⑤Sublime Text

Windows、Mac、Linux対応のテキストエディタです。インタフェースは英語ですが、日本語の入力は可能です。使い勝手やデザインが良く、最近特に注目されています。

シンタックスカラーリングや、ソースコード全体のマップ表示など便利な機能も揃っています。有料ソフトなのですが、現在はバージョン3の評価版が無料で無制限に使えます。気に入ったらそのまま購入することも可能です。

  • 英語でもいいという方向け
  • フリーではないが、一定の期間無料で使える
  • とても高性能の為、HTMLだけでなくプログラミングをする際にも使える
  • にも関わらず軽い

https://www.sublimetext.com/

 

まとめ

いかがでしたでしょうか?
これからプログラミングの需要はますます高まっていくばかりです。

HTMLなら文系の方でも、パソコンが苦手でも、パソコンに触った経験のあるだけで始められると思います。
その際に、この記事がお役に立てると幸いです。

 

参考になったらシェアをお願いします!