全HTML入門者に捧ぐ、最初にみておきたい4個の項目



全HTML入門者に捧ぐ、最初にみておきたい4個の項目

HTML(えいちてぃーえむえる)は、すぐに実行結果がわかって修正も比較的カンタンなので、全くの初心者でも楽しく学べちゃうオススメの言語です。 学習をスムーズにすすめるために、基本構造、おおまかな書き方、おすすめの入門書、おすすめ入門サイトの4つを知っておきましょう!

目次
  1. HTMLとは?
  2. HTMLがわかると、こんなメリットが!
  3. HTMLの基本構造
  4. 基本構造
  5. HTMLタグ
  6. HEADタグ
  7. BODYタグ
  8. DIVタグ
  9. Pタグ
  10. IMGタグ
  11. HTMLの書き方
  12. テキストエディタとブラウザを用意する
  13. テキストエディタで書く!
  14. HTMLとして保存する
  15. ブラウザで確認してみる
  16. 修正・更新する
  17. HTML入門書
  18. いちばんよくわかるHTML5&CSS3デザインきちんと入門
  19. スラスラわかるHTML&CSSのきほん 第2版
  20. デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]
  21. HTMLの入門サイト
  22. ドットインストール
  23. Progate
  24. まとめ

HTMLとは?

image

HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、インターネット上のWebページを表現するために使われている言語です。Webブラウザ が、HTMLで書かれた文章を読み込んだ結果、今あなたが閲覧しているようなWebサイトが表示されます。

Webサイト上で、右クリック→ソースを表示としてみてください。今見ているサイトのHTMLをみることができますよ。 image

HTMLがわかると、こんなメリットが!

HTMLがわかると、以下のようなメリットがあります。

自分のWebサイトが作れる

自分のお店や趣味の紹介のホームページなど、見るだけだったWebサイトが自分でも作れちゃいます。

ブログパーツを編集できる

ブログのデザインはHTMLやCSSで書かれています。HTMLが書ければ、自分の思った通りに細やかな編集ができますよ。

他のプログラミング言語の入り口にピッタリ

PHPやJava、Pythonなど他のプログラミング言語も、Webブラウザに文章や画像を表示させるときはHTMLを使います。また、何度でもトライアンドエラーができるHTMLなら「命令を書いて、マシンがその通りに動く」という独特なコンピューターとのやり取りのコツも掴みやすいです。いつかはプログラミングを始めたいなら、HTMLから始めて損はないでしょう。

HTMLの基本構造

よくわからないアルファベットがたくさん並んでいる・・・と思われがちなHTMLですが、学んでみると意外とわかりやすいですよ!

HTMLはタグと呼ばれる< >のカッコで囲まれた専用の指示を使って、文字や画像を仕分け、組み立てています。図で見てみましょう!

基本構造

image

それぞれ四角で囲んでいる部分が、タグで囲まれている部分にあたります。たとえば上の図のような構造で作ったHTMLは実際にはこのようになっています。

HTMLファイル

image

Webブラウザで確認

image

HTMLタグ

簡単にひとつひとつのタグの意味を見ていきましょう! <HTML> </HTML> で囲まれた部分は、このファイルがHTMLだということを表しています。

HEADタグ

<HEAD> </HEAD> で囲まれた部分は、文字化けを防ぐための文字コードの指定や、ページのタイトルなど、Webサイトの補助的な情報を記載します。

BODYタグ

<BODY> </BODY> で囲まれた部分は、Webサイトの本文です。

DIVタグ

<DIV> </DIV> で囲むことで、Webサイト上の情報のかたまりを表します。このタグで囲んだ部分に線をひいたり、色をつけたりすることもできます。

Pタグ

文章の段落を<P> </P>で囲みます。

IMGタグ

<IMG src="ファイル名" > で画像を指定の場所に配置します。

このように、HTMLでは「こう表示したいときはこう書く」というルールに沿って、色々なタグを組み合わせてWebページを作っていきます。

HTMLの書き方

それでは試しに、HTMLを書いてみましょう!

テキストエディタとブラウザを用意する

パソコンさえあれば用意するものは、こちら2点だけ。どちらも最初からインストールされているもので大丈夫です!

  • テキストエディタ(Notepadなど)
  • Webブラウザ(ChromeやIEなど)

テキストエディタで書く!

テキストエディタで、タグを書いていきます。1文字ずつ打つことで覚えやすいかたは、時間があれば自分で書いてみてください。急いでトライしてみたい!というかたは、こちらのサンプルをコピーしてテキストエディタに貼り付けてみましょう。

<HTML>
<HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>サンプルHTMLです</title>
</HEAD>
<BODY>
    <div>
        <p>
            <h2>サンプル見出し</h2>
            <img src="sample.jpg" width=100 height=100>
            サンプルテキスト
        </p>
        <p>
            サンプルテキスト2
        </p>
    </div>
    <div>
        <p>
            <h2>サンプル見出し</h2>
            <img src="sample2.jpg" width=100 height=100>
            <img src="sample3.jpg" width=100 height=100>
        </p>
    </div>
</BODY>

</HTML>

HTMLとして保存する

先ほど書いた/貼り付けたテキストを、保存します。通常、テキストファイルをそのまま保存するとXXXX.txtなどになっていることと思います。HTMLファイルは.(ドット)以降のファイル名である拡張子を.htmlにして保存します。例えば、sample.htmlなど好きな名前をつけましょう。

ブラウザで確認してみる

保存したHTMLファイルをダブルクリック、もしくはWebブラウザにドラッグ&ドロップすると、先ほど書いたHTMLがWebサイトのように表示されます!

修正・更新する

サンプルのままでは画像ファイルが反映されていません。IMGタグにある画像ファイル名を自分のパソコンにある好きな画像のファイル名に変更してみましょう。

テキストエディタで再度編集し、ブラウザの「更新」ボタンを押すと反映されますよ。

 

HTML入門書

もっとたくさんHTMLが書きたくなってきたのでは?入門者がざっと概要を掴むには、やはり書籍での学習がおすすめ。まず読んでほしい入門者向け書籍を紹介します!

 

いちばんよくわかるHTML5&CSS3デザインきちんと入門

img text

著者:狩野祐東
出版社:SBクリエイティブ
出版年月:2016/10/27
単行本価格:2,678円
Kindle価格:2,480円

対象:体系立てて学びたい人
編集部レビュー

Webサイトがどうして表示されるのか?のしくみの部分にはじまり、タグの意味や使い方、CSSを使った装飾など基礎から真面目に取り組むことができる一冊です。スマートフォンでの閲覧が増えている昨今の現状に合わせ、レスポンシブWebデザインについても網羅されており、そろそろ独自のWebサイトを開発したい中級者にも役立ちそうです。

Amazonレビュー

学ぶ過程で誰しも疑問を抱えつつ進んでいきそうな部分がしっかりと解説されています。

Amazonレビューより引用

スラスラわかるHTML&CSSのきほん 第2版

img text

著者:狩野祐東
出版社:SBクリエイティブ
出版年月:2018/4/14
単行本価格:2,138円
Kindle価格:1,980円

対象:手を動かしながら学びたい人
編集部レビュー

HTMLを書くためのテキストエディタのインストールから解説してくれている、入門者向けの親切な一冊です。「カフェのサイトを作る」という目的で実習課題を進めていく内容になっており、手を動かしながら理解したい人におすすめです。実習課題作成のためのサンプルデータもダウンロードできるので安心。2018年4月の第二版への大改訂で、最新のHTML5.2に対応したのも高評価ポイントです!

Amazonレビュー

この参考書はわかりやすくプログラミングが好きになります。初心者におすすめの参考書です。

Amazonレビューより引用

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

img text

著者:千貫りこ
出版社:技術評論社
出版年月:2017/5/26
単行本価格:2,138円
Kindle価格:2,138円

対象:パソコン操作にちょっと自信がない人
編集部レビュー

先の2冊と比較して、基礎的な情報にフォーカスしたやさしい一冊です。フォルダ?拡張子?なにそれ?というレベルの入門者でもつまづかない、写真や図を豊富に使った詳しい説明が特徴。パソコン操作もちょっと自信がないな・・・という方の初めての一冊におすすめです!

Amazonレビュー

本当に丁寧です。丁寧すぎます。 HTMLやCSSに限らず、PC自体にもあまり詳しくない方が読んだら置いてかれずに最後までやり切れるのではないでしょうか?

Amazonレビューより引用

HTMLの入門サイト

本を卒業してより深く知りたいときや、知識を補強したいときに便利な学習サイト!HTMLの入門者向けにはこちらがおすすめです。

ドットインストール

3分動画講座でスキマ時間にちゃっかり学習!

image

画像出典:ドットインストール

おもに入門者向けの無料講座を307講座も公開しているドットインストールは、3分にコンパクトにまとまった学習動画で、スキマ時間に学習を進めていける便利なサイト。こまぎれ時間しか取れない忙しい方にもオススメです。ユーザー登録すると、ちゃんと自分がどこまで進んでいるかも管理できちゃいます。

image

画像出典:ドットインストール

入門者向け講座としておすすめなのは、HTML入門CSS入門ですね。これらをマスターしたら、 実践!ウェブサイトを作ろう で、自分で1からWebサイトを作ってみましょう。

 

Progate

ブラウザ・アプリでお手軽プログラミングレッスン!

image

画像出典:Progate

スライドを見ながら、実際のプログラムをブラウザ上で書ける手軽さが魅力のProgate。見やすく達成感のある画面で、サクサク学習を進められます。HTML初級レッスンは無料で提供されています。月額980円の有料プラン会員になると、すべてのレッスンが受け放題になります。

image

画像出典:progate

image

画像出典:progate

なんと、iOSとAndroidでスマホアプリも出ています!外出先でもコツコツ学習できるのでとっても便利ですね。

まとめ

ぜひHTMLをはじめて、プログラミングの楽しさを感じてみてくださいね!

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp