【HTML入門】HTMLって何ができるの?HTMLの基本から勉強方法まで解説!
  • facebookページ
  • twitterページ
  • 2018.10.03

    【HTML入門】HTMLって何ができるの?HTMLの基本から勉強方法まで解説!

    この記事ではHTML入門者を対象に、HTMLでできることや基本のコードと独学で学習するにあたってお勧めの書籍やサイトを解説します。HTMLはWebサイト作成の基本です。本記事ではHTMLでどのような表現が出来るかサマリー的に記載しますので、初心者の方は是非チェックして概要をつかんで下さい。

    HTMLでできることは?

    HTMLは「HyperText Markup Language」の略で、Webサイトの構造を定義するための言語です。HTML文書は、「要素」と呼ばれる様々な構成要素から成り立っています。例えばヘッダ、見出し、箇条書き、画像、ひとかたまりの文章等の「要素」を含み、それを定義するのが「<」と「>」で囲まれた「タグ」と呼ばれるものです。
    作成したいページにはどのような要素があるのかをHTMLで定義することで、ブラウザに対してそれぞれのパーツの意味を伝えることが出来ます。

    HTMLと一緒に使われる言語

    css

    「Cascading Style Sheet」の略で、HTMLとセットで記述します。HTML文書中の要素をどのように装飾するかを定義することで、文字の大きさや色等の見た目を決めることが出来ます。
    HTMLの最新バージョンであるHTML5では、以前のバージョンではhtml内に記述できた属性(要素に対するオプション)が廃止になっているものもあり、その場合はcssに記述することで代替します。htmlでも一部の要素で装飾の記述は可能ですが、拡張性を高めるためにも装飾に関する記述はcssに記述していくようにしましょう。

    JavaScript

    動的な処理を記述するのがJavaScriptです。JavaScriptを記述することで、スライドショーやポップアップメッセージなど、コンテンツ内でHTMLだけでは表せない動的な表現をすることが出来るようになります。

    HTMLの基本コード

    タグは、基本的には開始タグと終了タグの2つのセットで1つの要素を表します。例えば複数行のまとまりを表すdivタグでは、まとまりの最初に開始タグ(<div>)を記述し、まとまりの最後を終了タグ(</div>)で締めくくることで、一つの要素として定義することが出来ます。
    改行を表す<br>タグなどのように、タグの中には開始タグだけで完結して終了タグを必要としないものもありますが、終了タグが必要なタグの場合に終了タグを記述しないと、コンピュータが要素のまとまりの終了がどこかを認識できなくなるため、表示が崩れてしまいます。
    以降では、基本的なタグを紹介します。本記事では、HTML5を前提にします。

    HTML文書に関するタグ

    下記は、HTML文書全体の情報や構造を表すタグです。

    <!DOCTYPE>

    ドキュメントのタイプ、バージョンをを宣言します。HTMLの最新バージョンであるHTML5では、シンプルに「<!DOCTYPE html>」と記述することでブラウザはHTML5であると認識します。また、このタグは次で説明する<html>タグの上に記述します。こうすることで、<html>以下の記述がHTMLで記述されていることが分かります。

    <html>

    html文書であることを宣言します。
    <html>タグ直下の子要素には、基本的に文書のヘッダの情報を示す<head>タグと文書の本体の情報を示す<body>タグの順に配置されます。ドキュメントをフレームで分割する場合は、<head>タグと<frameset>タグの順に配置されます。

    <head>

    ヘッダの情報を表します。<title>タグ以外のタグで記載された情報以外はブラウザのどこにも表示されることはありません。

    <title>

    タイトルを記述します。下記のように、ブラウザのタグやツールバーの表示や、お気に入り登録時のデフォルトの名称、検索サイトの検索結果のタイトルに、このタグで指定した文字列が入ります。
    <title>タグは省略することができないタグです。必ず<head>タグの中に1つ記述するようにします。

    <body>

    HTML文書の本体を表します。ブラウザに表示される部分をここに記述します。

    使用例

    文字の表示に関するタグ

    テキストの見た目を表したり、テキストの意味づけをするタグです。

    <a>

    ハイパーリンクを指定するタグです。href属性にURLを、開始と終了タグの間に表示する文字列を指定します。ブラウザ上で文字列をクリックすると、href属性に指定したリンク先に飛ぶことが出来ます。
    使用例

    表示例
    ポテパンスタイル

    <br>

    改行を表すタグです。1行のテキストに対して意味のある区切りを表すために使用します。詩の1行や、住所の改行の場合等です。見た目の調整で長い文章を折り返したい場合等は、後述する<p>要素で段落を定義した方が適しています。
    使用例

    表示例
    雨ニモマケズ
    風ニモマケズ
    雪ニモ夏ノ暑サニモマケヌ
    丈夫ナカラダヲモチ

    レイアウトに関するタグ

    ページのレイアウトを表すタグです。

    <h1>~<h6>

    見出しであることを表すタグです。<h1>が一番大きく最上位で、<h6>が一番小さく最下位の見出しになります。同じ番号の見出しは同じ位になります。
    使用例

    表示例

    大見出し

    中見出し

    小見出し

    <p>

    段落のかたまりを表すタグです。段落と段落の間には、視覚的に読みやすいように空白行が入ります。
    使用例

     

    表示例

    こちらは1段落目の文章になります。
    こちらは1段落目の文章になります。
    こちらは1段落目の文章になります。

    こちらは2段落目の文章になります。
    こちらは2段落目の文章になります。
    こちらは2段落目の文章になります。

    <ul>と<li>

    それぞれ箇条書きリストとリストの項目を表すタグです。<ul>要素の中に項目<li>を並べる事で箇条書きを作成することが出来ます。
    使用例

    表示例

    • いくら
    • ツナ
    • しゃけ

    HTMLが学べる参考書2選!


    WebサイトはHTMLのみで構成するのが最小の構成になりますが、今やHTMLだけで構成されているWebサイトはほとんどありません。実践で使える技術を身に付けるためには、HTMLとCSSをセットで覚える必要があります。ここでは初心者向けにHTMLとCSSの両方を学ぶことのできるおすすめの参考書をピックアップしました。

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

    デザインの学校 これからはじめる HTML & CSSの本
    一冊を通して一つのWebページを作成します。内容もそれほど重くなく、休みの日に一気にやれば一日で終わる程度の内容になっています。わかりやすさ重視で基本を丁寧に教えてくれているので、コードを書くのが苦手な方でも挫折することなく読みきってしまえるのではないでしょうか。基礎的な内容にとどめているので、一冊終えた後にできれば他の参考書やWebサイトのチュートリアルで、知識を補完・強化することをお勧めします。とにかく分かりやすいので、学習のとっかかりとしては最高の一冊です。

    HTML&CSSとWebデザインが 1冊できちんと身につく本

    HTML&CSSとWebデザインが 1冊できちんと身につく本
    多くのWebサイトで使われている4つのレイアウトを実際に手を動かして製作しながら学びます。1冊終える頃には、HTMLやCSSの言語の知識だけでなくデザインの知識も身に付けることができます。最初にHTMLやCSSの基本の解説から入りますので、超初心者でも楽にステップアップしていけるでしょう。レスポンシブデザインについても触れており、マルチデバイスで閲覧できるサイトの作り方も学べます。説明が丁寧で分かりやすく、初心者にもおすすめです。

    HTMLを学べるサイト3選!

    先にご紹介したような書籍で実際に手を動かしてWebサイトの作り方の流れを覚えたら、自分で作りたいものを作ってみましょう。HTMLの学習サイトをリファレンス的に参照する事で、参考書で足りなかった部分を補いましょう。

    HTMLクイックリファレンス

    HTMLクイックリファレンス
    HTMLだけでなく、CSSやJavascriptについても触れており、Webサイト製作全般の知識が身につくサイトです。Web製作のチュートリアルや小ネタのTipsは躓いた時に読んでみると思わぬヒントになることもあります。リファレンスの検索も、目的別、ABC順別のどちらでも検索できるので必要な項目の情報を簡単に探すことが出来てとても便利です。

    とほほのWWW入門 HTMLリファレンス

    とほほのWWW入門 HTMLリファレンス
    サイト自体の歴史が長く、有名なサイトのHTMLリファレンスです。長い間こまめにメンテナンスされていて、改良に次ぐ改良を経て育ってきた優良なコンテンツです。一覧でタグごとにHTMLのバージョンが分かるので、バージョンでの違いを確認しながら参照することが出来ます。

    HTMLタグボード

    HTMLタグボード
    初心者から上級者までどんなスキルの人も参照できるサイトです。リファレンスだけでなく、ホームページ作成講座やデザインに関するTips、広告収入について等、Webサイト製作をするに当たって一通り見ておきたい幅広い内容を網羅しています。
    必要だけどついつい見落としがちな項目についても触れていて、とても良心的なコンテンツになっています。

    まとめ

    この記事では、HTMLの基本を解説しました。HTMLは、Webサイトの「構造」を「要素」の組み合わせで表します。HTML初心者であれば、参考書で一通りの製作過程を学び、HTMLのリファレンスサイトを補足的に参照する事でHTMLの基礎を効率的に学ぶことが出来ます。この記事でご紹介したものを参考に、学習を進めてみてください。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800万円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料10万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE