カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • HTMLは簡単に初心者でも習得できる?HTMLの基礎解説から作り方

HTMLは簡単に初心者でも習得できる?HTMLの基礎解説から作り方

太田 ヨウタ
太田 ヨウタ
公開日:2020.01.17
更新日:2020.02.08
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
HTMLは簡単に初心者でも習得できる?HTMLの基礎解説から作り方
少女

HTMLは初心者でも簡単に習得できる?

少年

HTMLの基礎やメリット、できること・できないことを知りたい

こんな疑問・要望に答えるべく、HTMLの基礎から簡単なWebページを作る手順まで解説する記事です。具体的には、次の順番でお話ししていきます。

  • そもそもHTMLとは?
  • HTMLでできること、できないこと
  • HTMLを学ぶことのメリット
  • Webページを作る方法

Webサイト制作に興味がある初心者のあなたに向けた記事ですので、ぜひご覧ください。

記事のもくじ

  • そもそもHTMLとは?
    • HTMLはマークアップ言語
    • HTMLで使用するタグとは?
    • HTMLには基本形がある
    • HTMLが動く仕組み
  • HTMLでできること、できないこと
  • HTMLを学ぶことのメリット
    • Webページ上の問題を修正できるようになる
    • Webページの表現幅が広がる
    • Webページの仕組みを理解できる
    • 隠された情報を入手できる可能性がある
  • HTMLで簡単なWebページを作ってみよう
  • まとめ:HTMLはWebの基本であり初心者でも簡単に習得できる

そもそもHTMLとは?

Webサイト制作に欠かせないHTMLですが、そもそもどのようなものかわからない、という方もいるのではないでしょうか。ここでは、HTMLの基本知識について解説します。

HTMLはマークアップ言語

HTMLはHyper Text Markup Languageの略称で、Webページを形作るための骨組みとして利用されるマークアップ言語です。

マークアップ言語とは、コンピュータに処理させるための言語のことであり、タグなどを用いて文書の構造や見栄えを定義します。

具体的に、HTMLで書かれた文書の例を見てみましょう。

一見すると記号ばかりでよくわからないかもしれませんが、この文書をブラウザが読み込むことによって、私達が普段見ているようなWebページに変換されています。

画像のHTML文書は、Kredo Blogのトップページのものでした。

このように世界中のWebページは、このHTMLを使って構築されているのです。

HTMLで使用するタグとは?

HTMLには、文書の構造や見栄えを定義するために「タグ」を利用します。HTMLで使われるタグは「< >」で囲まれ、タグごとに役割を持っているものです。

たとえば、文字を太字にする場合は「<b>~</b>」というタグで囲むことで、コンピュータに指定の文字列を太字にすることを教えています。

ほかにも、フォントの色を変えたり、テーブルを作成したりと多くの表現方法をHTMLのタグで定義することで実現しているのです。

もっと詳しくタグについて知りたい方は、よく利用されるタグの使い方とあわせて、こちらの記事で紹介していますので、ご参照ください。

【おすすめの関連記事】

【初心者向け】HTMLの基本とよく利用されるタグの使い方を徹底解説

HTMLには基本形がある

HTMLはルールが定められており、基本となる形が存在します。 HTMLで利用するタグは、原則「<タグ名>~</タグ名>」で囲んで利用するものです。

また、HTML文書としてコンピュータに理解してもらうために、基本形が存在します。

HTMLの基本形

<!DOCTYPE html> <html> <head> <title>ページタイトル</title> </head> <body> 本文 </body> </html>


HTMLを利用する上で最低限守らなければならない基本形ですので、覚えておきましょう。

HTMLが動く仕組み

HTMLはコンピュータによって処理されますが、具体的な動く仕組みについてはご存知でしょうか。 私達が普段見ているようなWebページが表示されるまでには、次の順番で処理が行われています。

HTMLが動く仕組み
  1. HTMLのコーディングを行う
  2. HTMLファイルを作成する
  3. WebサーバーにHTMLファイルを保存する
  4. パソコンやスマホでWebサーバーにアクセスする
  5. 受信したHTMLファイルをブラウザが読み込む
  6. ブラウザがHTML文書を読み解いて表示する

1~3の工程は、Webサイトの管理者側の工程であり、4~6は閲覧者側の工程です。私達が普段見ているWebページは、サイト管理者が作成したHTMLファイルをブラウザで読み込むことで表示されています。

ブラウザがHTML文書を読み込み、再構築することでキレイな見た目のWebページを見ることができるのです。

HTMLでできること、できないこと

HTMLを使うことでWebページを作成できます。しかし、Webページを作成するなかでも、できることとできないことがあります。

HTMLでできること
  1. 文字の装飾
  2. 画像の表示
  3. リンクの設置
  4. 表の作成

など

HTMLでできないこと
  1. 動きのあるWebページデザイン
  2. 高度なレイアウト
  3. 画像のスライド
  4. 時間計測

など

HTMLでは、基本的に静的なWebページしか作成できません。Wordの文書のように、文字を装飾したりすることは可能ですが、画像のスライドなどはHTMLでは実現できないのです。

また、コンテンツの配置を自由にすることも、HTMLだけでは難しくなります。

しかし、私達が普段見ているWebページは、動きのあるWebページデザインだったり、コンテンツの配置も自由に行われているものも多くあります。

このようなWebページは、HTMLとあわせてCSSやJavaScriptが使われているのです。

HTMLは、Webページを作成する上での最も基礎的なマークアップ言語ですが、より高度なWebページを作成する場合は、CSSやJavaScriptも合わせて利用しなければなりません。

HTMLとCSS、JavaScriptなどの関係性については、こちらの記事で詳しく解説しています。

【おすすめの関連記事】

【初心者向け】HTMLとCSSの具体的な違いから学習方法・使い方まとめ

HTMLを学ぶことのメリット

AI(人工知能)の自作のステップ、無料で使えるAPIなどを初心者向けに紹介 現在では、ツールやソフトウェアを利用することで、HTMLの知識がなくてもWebページを作成することが可能です。

しかし、Webページを作成するのであれば、HTMLを学ぶことには大きなメリットがあります。 ここでは、HTMLを学ぶことのメリットについて紹介していきます。

Webページ上の問題を修正できるようになる

ツールやソフトウェアを利用しても、最終的にできあがるものはHTMLファイルです。

慣れないうちは、HTMLタグを手打ちすることは難しく、作業効率化の点でもツールやソフトウェアを利用する場合は多いものですが、手打ちでもツールでもできあがるものは同じなのです。

Webページ上の見た目を修正したい、といった問題もHTMLの知識があれば、具体的にどの部分を修正すればよいか理解できます。

Webページ上のちょっとした問題を修正する場合に、知識があれば修正できるようになるのです。

Webページの表現幅が広がる

ツールやソフトウェアでは、文字装飾などをボタン一つで行なえますが、細かい設定ができない場合があります。

たとえば、文字を取り消す線を入れたり、任意の文字色に変更したりすることができない場合が考えられます。

HTMLタグについて理解していれば、ツールなどでは対応していない文字装飾を行ったり、特殊な形のテーブルを作成したりといった、あらゆる装飾を施すことが可能です。

そのため、HTMLを学ぶことでWebページの表現幅が広がります。

Webページの仕組みを理解できる

参考にしたいデザインのWebページがあれば、WebページのソースであるHTMLを見ることで仕組みが理解できるのです。

Webページの仕組みは、HTMLを見れば理解できますが、HTMLの知識がなければもちろん理解できません。

既存のWebページのレイアウト変更などをする際も、ブラウザのデバッグツールなどを利用しますが、HTMLの知識がなければ仕組みを理解できないため難しいでしょう。

HTMLはWebページを作る上で基礎となる知識であるため、Webページの仕組みを理解するためにも身に付けたい知識といえます。

隠された情報を入手できる可能性がある

HTMLには、コメント機能などによってブラウザ上では表現されない情報をソースに残すことが可能です。 そのなかには、求人情報や遊びの要素を含ませている場合があります。

たとえば、ランキングと口コミで探せるグルメサイト「食べログ」のソースには、ちょっとした求人情報が隠されています。

ほかにも、さまざまなWebサイトでこのような情報が隠されており、隠された情報を入手できる可能性があるのです。

HTMLで簡単なWebページを作ってみよう

HTMLは、OSに標準インストールされているテキストエディタを使って、簡単に作成できます。Windowsであれば「メモ帳」、Macであれば「テキストエディット」で、作成可能です。

以下のHTMLソースをコピー&ペーストし、ファイル名を「index.html」として保存しましょう。保存したHTMLファイルをブラウザで開けば、タグに応じた内容をブラウザで表示できます。

サンプルコード

<!doctype html> <html> <head> <title>Webページタイトル</title> </head> <body> <h2>大見出し</h2> HTML文書は、このように簡単に作成できます。<br> <a href=”https://kredo.jp/media/” target=”_blank”>Kredo Blogへのリンク</a> <h3>小見出し</h3> <table border=”1″> <tr> <td>テーブル項目</td><td>テーブル内容</td> </tr> <tr> <td>項目1</td><td>内容1</td> </tr> <tr> <td>項目2</td><td>内容2</td> </tr> </table> <hr> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> </body> </html>


簡単な例として、HTMLタグだけで作成したものですが、これも立派なHTML文書です。 あなたなりに内容を修正して、HTMLの動きを掴んでみてはいかがでしょうか。

慣れてきたら、CSSなどと組み合わせて、さらに高度なWebページを作成してみましょう。

まとめ:HTMLはWebの基本であり初心者でも簡単に習得できる

HTMLは、Webページを構成する最も基本的なマークアップ言語です。 私達が普段見ているWebページも中身はHTMLであり、Webページには欠かせない存在といえます。

慣れないうちは難しく感じるかもしれませんが、難しい決まりはないため、初心者でも十分に習得可能です。今回紹介したサンプルコードを使って、実際に動かしながら身に付けていきましょう。

HTMLをある程度習得したら、CSSやJavaScriptと合わせて学習を進めてみてはいかがでしょうか。

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

Kredo オンラインキャンプなら

新規CTA

プログラミング×英語を身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか?

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
太田 ヨウタ
太田 ヨウタ

IT関連企業にてインフラエンジニア(SE)として官公庁や銀行などのシステム更改をメインに約10年従事。基本情報技術者・ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。

関連記事

  •  loading
    Web・プログラミング

    【IT転職成功した私が語る】progateが終わったらプログラミングスクール受講が効果的

    2022.06.08
  •  loading
    Web・プログラミング

    【2022年最新】フロントエンドエンジニアを目指せるおすすめスクール5選

    2022.05.16
  •  loading
    Web・プログラミング

    転職保証付きプログラミングスクールは危険!?口コミを元にリアルを解説

    2022.05.02
  •  loading
    Web・プログラミング

    主婦・ママが在宅で・スキマ時間でも学べるプログラミングスクール5選

kredo it 英語 留学

よく読まれている記事

  •  loading
    2022.05.25

    【6/23(木)~ 24(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語を身につけろ!アフターコロナ時代を勝ち抜くキャリア戦略

  •  loading
    2022.04.19

    「好きなことを仕事に」IT初心者からプログラミング×英語を身に付けフリーランスエンジニアへ

  •  loading
    2021.07.08

    【7/4(月)~ 7/8(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語習得で時代に左右されない海外フリーランスを目指す方法

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

IT留学オンライン
新規CTA

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig
弊社顧問弁護士

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.