facebook

twitter

  1. Home
  2. プログラミング
  3. HTMLの初心者が学ぶべき基礎と入門

HTMLの初心者が学ぶべき基礎と入門

2020年01月31日

HTMLは数あるプログラミング言語の中でも、最も知名度が高く使っている人も多いです。 しかし、かつてとは異なり個人の活動ではSNSが主流となり、HTMLタグを使える人も少なくなってしまいました。

そこで今回は、

  • HTMLタグとは？基本からおさらい
  • よく使われるタグの解説
  • HTMLタグを勉強するのにおすすめの参考書やサイト

について詳しく解説していきたいとおもいます。

HTMLは初心者が学ぶべき入門書

HTMLは初心者が学ぶべき入門書

HTMLについて、これから勉強するという初心者の方はどんなイメージを持っているのでしょうか？

「覚えるのが難しい」 「配置が大変」 「細かい作業が必要」 など、人によって様々でしょう。

たしかに、SNSで普通に文字や文章を打つのに慣れた私たちはわざわざタグを使うのはとても面倒に感じます。

しかし、プログラミング言語の中ではHTMLタグは最も簡単な部類です。 しかもあらゆるWebサイトで必ず使われるタグでもあるので、システムエンジニアやプログラマーになる人以外でも知っておくといいですよ。

プログラミングの独学での入門と初心者の勉強方法　

現在の最新バージョンはHTML5.2

現在の最新バージョンはHTML5.2

HTML言語が生まれたのは1990年の30年前のこと、欧州原子核研究機構(CERN)の中でのことでした。

はじめは今のようにウェブサイトの見出しを作ったり、文章を修飾するものではありませんでした。 研究内容の情報を仲間内で共有するために使われていましたが、ちょうどそのころアメリカによるインターネットの一般解放とも重なり世界的に広く利用されるようになりました。

黎明期はごくゆるいルールであったため、時代を経るごとにバージョンアップして機能が追加されてきたのです。

2019年現在はHTML5.2か、HTML Living Standardが最新のバージョンですね。

最新バージョンではよりシンプルな形式でマークアップできるようになり、あとから修正や編集をする時もわかりやすくなっています。

プログラミング初心者でもHTMLは習得しやすい

プログラミング初心者でもHTMLは習得しやすい

プログラミング言語というと、習得するまでに時間がかかるイメージを持っている方も多いかもしれません。

しかし、HTML言語は難易度が低いのではじめてプログラミングを利用する人でも学習がしやすいのが特徴です。

また、プログラミングの種類によっては動作確認をするためにパソコンが二台必要なものもありますが、HTMLはインターネットブラウザですぐに確認できるので初期コストが抑えられるのが魅力的ですよね。

仕事でもよく使うHTML

HTMLは職種に関係なくよく使われています。 たとえば自社ホームページの作成、商品PRページの作成、ECサイトの作成、ワードプレスの作成などなど。

PRやお知らせをウェブでする現在、HTMLが使えるのは仕事にも役立つこと間違いなし。 ウェブデザイナーやエンジニア以外の職種でも、HTMLやCSSを身につけておくといいでしょう。

htmlの基礎

htmlの基礎

html言語を使ってどうやって文章を区分けしたり修飾していくのでしょうか？ たくさん種類はありますが、よく使われたり、初歩的なタグをご紹介していきます。

HTML宣言

HTML宣言

DOCTYPE htmlというタグで評されるHTML宣言は、それ以降の文書がHTMLであると表明するためのものです。

ブラウザによってはHTML宣言がちゃんと記入されていないと、レイアウトや表示がおかしくなったりするので、テンプレートなどを使わずいちからウェブページを作るとき必要となります。

bodyタグ

bodyタグ

titleタグ（ここが抜けるとタイトルが出ない）

titleタグ（ここが抜けるとタイトルが出ない） headタグ

headタグの中には、そのページの情報や前提を記載します。 Webページの文書を修飾するわけではありませんが、言語情報やキーワード情報をヘッダー部分に入れるため不可欠なタグです。

アクセス解析などのタグも、基本的にこのタグの中にいれます。

画像で使用するimgタグ

画像で使用するimgタグ

imgタグは、ページの中で画像を表示するためのタグです。 また、imgタグの中にalt属性を入れることで画像の説明や画像の代わりの文章のデータと画像を入力できます。

画像が表示できない場合や、読み上げ機能を使う時に便利です。

pタグで囲む

pタグで囲む

pタグはParagraphの頭文字で、段落を意味します。 Pタグで囲んだ文章が１つの段落ということになり、文章が長いページを見やすくする効果があります。

h1タグなどの見出しタグ

h1タグなどの見出しタグ

主にブログやまとめ形式のサイトで多様される見出しタグです。 hのあとの数字が小さいほど大きい見出しになります。 大見出しの中に小さい見出しを入れることで、ページ内の情報を効率的に区分けできますよ。

brタグで改行せよ

brタグで改行せよ

brタグは改行のためのタグです。 段落の中の文章を改行して、読みやすいように表示を整えます。

divタグ。閉じ忘れると大変な事になる‥

divタグ。閉じ忘れると大変な事になる‥

divタグはブロックとして、際立たせたい文章に使うタグです。 この説明だけだと段落のPタグとどこが違うの？と感じてしまいますが、文章の中でも特に強調したい部分やデータの開示によく使われます。

aタグ。リンクを閉じる時などに使用

aタグ。リンクを閉じる時などに使用

aタグはアンカータグとも呼ばれ、他のページへのリンクに使われるタグです。 ページの指定や、文字コードや文章タイプなど情報や規格を指定することもできます。

ulやolなど箇条書きタグ

ulやolなど箇条書きタグ

箇条書きタグは、リスト表記や番号順に表記するためのタグです。 普通に文章で箇条書きするよりも、見やすく、どのブラウザで見ても表記が崩れません。

ulで囲んだら黒点の箇条書きリストに、olで囲むと番号順のリストとして表示されます。

strong強調タグ

strong強調タグ

文章の中で強調したい部分に使うタグです。 Strongで囲むと太字表記として表示されます。アピールしたいところや、重要なキーワードに使うのがおすすめ。

HTML初心者にオススメの参考書

これから勉強を始めるHTML初心者におすすめの参考書をご紹介していきます。

デザインの学校 これからはじめる HTML & CSSの本

デザインの学校 これからはじめる HTML & CSSの本

タイトル:デザインの学校 これからはじめる HTML &CSSの本 価格:2,138円 発売日:2017年5月26日 内容: ウェブサイトを作る上で必要なHTML & CSSの基礎知識が学べる一冊。 HTMLやCSSなんぞや？という初歩的な知識から、実際にWebページを作るための実践的な言語が記載されています。

パソコンだけでなく、スマホ向けのページ作りも解説されています。 仕事でHTMLの知識が必要な人も、趣味でサイトを作りたい人にもおすすめ。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

タイトル: TML5&CSS3レッスンブック 価格:2,592円 発売日:2013年5月24日 内容:実践しながらHTML5を身につけることを目的に作られた一冊です。 参考書や入門者というよりは、ワークや問題集のような感じで分かりやすく実践的なタグを習得できます。

本の厚みはありますが、1-2週間で全て読み終わるので初心者の人でも手軽に利用できますよ。 基礎的な技術をすぐ身につけておきたいという方にぴったりで、サイト作りやWebデザインを行う人からも人気が高いですよ。

これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん

タイトル:デザインの学校 これからはじめる HTML &CSSの本 価格:2,786円 発売日:2017年3月27日 内容: HTMLとCSSとJavaScriptが一冊で学べる書籍です。 なぜ動作するか？や基本的な知識を身につけるというよりは、技術の解説がメインの本です。

なので、この本を読みながら実践していけば、ウェブデザインやサイト制作に必要な一通りの技術は身につけることができるはず。

仕事ですぐにHTMLなどが使えるようにしたい場合や、急ごしらえで技術を身に付けたい場合におすすめです。

普通の本の他にも電子書籍版もあるので、スマホやタブレットで見ながら実践してHTMLを組むことができますよ。

分かりやすく解説されてはいるのですが、基礎的な知識をつけたい人は先にご紹介した2冊と合わせて読むと理解が深まるかもしれません。

独学で勉強するならサイトもおすすめ

プログラミングを学ぶにはスクールなどを利用するのもおすすめですが、独学で勉強を進めるなら教材となるサイトもおすすめ。 学校などとはちがって自分のタイミングで勉強できるのがメリットなので、仕事をしながらや学校に行きながらHTML言語を学びたい人にもぴったりの学習方法ですよ。

Progate

Progate

サイト名: a href="https://prog-8.com/" target="_blank" rel="noopener"> 【Progate】

月額料金:0円〜(有料プランあり)

100カ国以上の国で運営している大手プログラミング情報サイトです。 840,000人ものユーザーが利用しており、全くの初心者からでもプログラミングをオンラインで学習することができます。

使用されているテキストも図解を多く用いたスライド方式で、感覚的にどのタグを入れるとどうなるか？ということがわかります。 マイページにログインすると、ブラウザ上で使えるテキストエディタが使用できるので、実践や経験も身につきます。

コースは全部で16コースあり、HTML & CSSはレベル別と目的別に6コースあります。 全くの始めてから始めるという場合は、初級編の学習コースから始めてみることをおすすめします。

スマホやタブレット向けのアプリもあるので、外出先のちょっとした空き時間も勉強に使えますよ。

ドットインストール

ドットインストール

サイト名: a href="https://dotinstall.com" target="_blank" rel="noopener"> 【ドットインストール】

月額料金:0円〜(有料コースあり)

国内大手のプログラミング学習サイトとして有名です。 プログラミングに興味がある人なら、利用したことはなくてもサイト名を見たことがある人も多いのでは？

ドットインストールでは、1つのレッスンを3分間の動画で解説するのが特徴です。 動画で実際の動きを見ることができるので、文書や説明だけじゃ理解しにくいという人におすすめ。

HTMLコースの入門編は全15回で、プロフィール作成など簡単な操作から始めてサイト作りに必要な知識と技術を身につけることができます。

これ以外のコースでも基本的に無料で学べますが、有料のプレミアム会員になれば、より詳細な機能を使って学習できます。

SkillHub

SkillHub

サイト名: a href="https://skillhub.jp" target="_blank" rel="noopener"> 【SkillHub】

月額料金:0円〜(有料コースあり)

SkillHubは社会人やフリーランスの人にむけた学習サイトです。 料金はコースやレベルによって変わりますが、入門編なら無料で受講できるものが多いので実際にサイトを利用して継続するか判断することかできますよ。

HTML入門コースももちろん無料で、1週間の短期コースで修了できるので忙しい時間の合間を縫って学習を予定している人にも最適です。

他にもパワポやイラレなどが学べます。

HTMLクリックリファレンス

HTMLクリックリファレンス

サイト名: a href="http://www.htmq.com" target="_blank" rel="noopener"> 【HTMLクリックリファレンス】

月額料金:0円

こちらは学習サイトというより、早見表や百科事典のような立ち位置のサイトです。 タグがバージョンや使用目的によってカテゴリ分けされているので、これをしたいんだけどどのタグを使うんだっけ？という場合に便利ですよ。

仕事でも趣味でも、サイト運営をする人はブックマーク必須です。

上へ 次へ