Archives for 8月 2020

HTML文書内で改行しても反映されない？明示的に改行するには？区切り線のつけ方も解説！

2020-08-26 By プログラミング入門ナビ編集部

はじめに

HTML文書の中で長い文章を書く時、せっかく見やすいように改行を入れたのにブラウザで見てみると改行されていない…ということはありませんか？

実は、HTMLでは改行を明示的に入れたい場合、あることをしなければなりません。

この記事ではその方法を説明します。

また、見やすくするための関連機能として区切り線のつけ方も覚えましょう。

動画解説

本記事の内容を動画でも解説しています。

改行する方法

https://www.youtube.com/watch?v=AcHf-lz0GEs&feature=youtu.be

区切り線をつける方法

https://www.youtube.com/watch?v=6EzeJ0cR7Cc&feature=youtu.be

HTMLでの改行方法

まずは改行する方法についてです。

普通に改行をした場合

HTML文書内で普通に改行をした場合にどうなるか見てみましょう。

下記のコードをエディタ等で記述し、ブラウザで表示させてみてください。

段落内には国会の住所を記載しており、見やすいようにコード内で改行を入れていますね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>改行の練習</title>
  </head>
  <body>
    <p>
      100-0014
      東京都
      千代田区
      永田町1丁目7-1
    </p>
  </body>
</html>

ブラウザではこうなります。改行を入れたはずなのに、改行されず1行で表示されていますね。

このように、コード内で普通の改行をしてもブラウザには反映されないことがわかりました。

明示的に改行をするには<br>

実は、自分がここだ！というところで改行をするには「ここで改行をします」とブラウザに指示するためのある記載をする必要があるのです。

それは<br>という改行タグです。「Break」の略になっています。

先ほどのコードで改行したい位置に入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>改行の練習</title>
  </head>
  <body>
    <p>
      100-0014<br>
      東京都<br>
      千代田区<br>
      永田町1丁目7-1
    </p>
  </body>
</html>

保存したら、もう一度ブラウザで見てみましょう。下記の通り、今度はきちんと改行が入りました。

このように、<br>タグを使えば明示的に改行することができます。

<br>は空要素

MDNで調べてもわかる通り、この<br>は空要素です。

つまり、<p>などのように「開始タグ+コンテンツ+終了タグ」で要素を成すのではなく、それ単体で改行を表すためコンテンツや終了タグを書いてはいけません。

間違えないように注意してください。

<br>: 改行要素 – HTML: HyperText Markup Language | MDN

HTMLでの区切り線

ここで、もう一つコンテンツを見やすくするのに役立つ機能を紹介します。

それは区切り線：<hr>です。「Horizontal Rule」の略で、水平な罫線の意味ですね。

どんなものかを知るために、下記のコードを書いてみましょう。

段落が2つあり、その間に<hr>があることに注目してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>区切りの練習</title>
  </head>
  <body>
    <p>私はHTMLを学習します</p>
    <hr>
    <p>私はCSSを学習します。</p>
  </body>
</html>

ブラウザで表示すると下記のようになります。

1つ目の段落と2つ目の段落の間に、罫線が表示されましたね。

このように、<hr>をつけると区切り線をつけることができます。

話の場面の切替えや節内での話題転換などに使用されることが多いです。

こちらも<br>と同様、空要素ですのでコンテンツを含めたり、終了タグを書かないように注意してください。

まとめ

HTML文書で明示的な改行をする方法と区切り線のつけ方を解説しました。

いずれも文章やコンテンツを見やすくするのによく使われる機能です。

正しく使いこなして見やすいWebページを作るのにお役立てください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTMLコードにコメントを書く方法を解説！使い道や注意点は？

2020-08-26 By プログラミング入門ナビ編集部

はじめに

プログラミングの「コメント」について知っていますか？

一般的な「ひとこと話す」という意味でのコメントと違い、プログラミングの世界では特別な意味合いがあるのです。

この記事ではHTMLでのコメント方法と、使い道や注意点について紹介します。

動画解説

本記事の内容を動画でも解説しています。

https://www.youtube.com/watch?v=8AmQt7H_t7s&feature=youtu.be

HTMLコードにコメントを書く方法

まずは簡単なコードを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>コメントの練習</title>
</head>
<body>
  <p>コメントの練習</p>
</body>
</html>

これをブラウザで表示すると下記のようになります。

「コメントの練習」という本文が表示されていますね。

HTMLではコメントを下記のように書きます。

<!-- コメントの内容 -->

この<!–と–>で挟まれた部分がコメントになるのです。なお、上記の例ではの間にスペースを書いていますが無くても問題ありません。

ただ、スペースがあった方がコメントの内容が見やすいですね。

早速先ほどのコードの本文をコメントにしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>コメントの練習</title>
</head>
<body>
  <!-- <p>コメントの練習</p> -->
</body>
</html>

ブラウザで表示すると、下記のように本文が表示されなくなります。

このように、コメントの部分はプログラムの実行にあたり無効化されることを頭に入れておいてください。

また、コメントは複数行になっても問題ありません。

下記のように「コメントの練習1行目」〜「コメントの練習3行目」まで、複数行にわたる部分をコメントにしてからブラウザで表示させても白紙のままです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>コメントの練習</title>
</head>
<body>
  <!-- <p>コメントの練習1行目</p>
  <p>コメントの練習2行目</p>
  <p>コメントの練習3行目</p> -->
</body>
</html>

コメントの使い道は？

コメントはプログラムの実行時に無効化されてしまうならば、なぜそんな機能があるの？と思われたかもしれません。

しかし、これが実はとても便利なのです。

コメントは主に下記のような使い道があります。

機能や仕様の説明を書く

1人でプログラミングをしている際にはどこに何を記述したのか自分で把握することができます。

しかし、複数人で共同プログラミングする時は他の人が何を書いたのかわかりづらく、それがトラブルや不具合の原因になることも多いです。

そのため、機能のかたまりごとにどういうことをしているのか、他の人にもわかりやすいようにコメントを書くことが推奨されます。

また、機能改修をする時などはコード全体から目的の部分を探し当てる必要がありますが、この時にもコメントがあれば検索しやすいです。

例えば下記のように会員登録ページの機能部分冒頭にコメントを書いておけば、後から他の担当者が改修する場合に探しやすいですね。

<!-- 会員登録ページ -->
<h2>利用規約</h2>
<p>
  ・・・略・・・
</p>

一時的に機能を無効にする

コメントの部分はブラウザでの表示対象とはならないので、一時的に機能を無効にしたい時にも使用されます。

例えば商品紹介をするページで、一時的に品切れの商品を非表示としたい場合、コード自体を消してしまうと在庫が再入庫して販売を再開したい時に文言が思い出せないですね。

そんな時は下記のようにコメント化して一時的に非表示にしましょう。このように、コメントにしてその部分を無効化することを「コメントアウト」と呼びます。

また販売再開したいときはコメントの<!–と–>を消すだけなので便利ですね。

<h2>オススメ商品一覧</h2>
<!-- 
<h3>水まんじゅう</h3>
<p>見た目にも爽やかなイチオシ商品！</p>
-->
<h3>水羊羹</h3>
<p>上品な甘さ！ご贈答用としても！</p>
<h3>くずきり</h3>
<p>ツルッとした喉越しが夏にぴったり！</p>
・・・

コメントするときの注意点

機密情報や個人情報を書かない

コメントの部分はブラウザには表示されませんが、ブラウザの検証ツールを使用すると誰でも見ることができます。

そのため、社外秘の機密情報・パスワード・個人情報など、見られては困る情報を書いてはいけません。

入れ子にしない

コメントの中にさらにコメントを書くことはできません。

ブラウザは<!–から始まって–>で終わっている部分をコメントとして解釈するので、入れ子にしてしまうと思わぬところでコメント終了となります。

下記のコードのように、本文の中でコメントにした「コメントの練習」のうち、「の」を入れ子でコメントにするとどうなるでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTMLの練習</title>
</head>
<body>
  <!-- <p>コメント
    <!-- の -->
    練習</p>
  -->
</body>
</html>

表示結果は下記のようになります。「の」でコメント終了と解釈されたため「練習–>」が表示されてしまっていますね。

まとめ

HTMLにコメントをつける方法と、使い方および注意点について紹介しました。

たかがコメントですがコードを見やすくしたり、一時的な機能の無効化をするなど、実は重要な役割がありますね。

また、ここで紹介はしませんでしたが機能の無効化の延長線でデバッグにもよく使われています。怪しい部分をコメントアウトしてエラーが取れればその部分が怪しいというわけです。

うまくコメント機能を使いこなしてプログラミングスキルを上げていきましょう。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Nuxt.jsで作成したアプリをNetlifyへデプロイするには? デプロイまでの流れを紹介!

2020-08-25 By プログラミング入門ナビ編集部

この記事では、Nuxt.jsで作成したアプリケーションをNetlifyにデプロイする流れについて説明します。

この記事は、オンライン講座「Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

Netlifyとは

静的なWebサイト向けの高機能なホスティングサービスです。
Github等のレポジトリと連携することで、簡単にソースコードのビルド・デプロイからWebサイトの公開までを行うことができます。
個人用途であれば無料で利用可能です。

デプロイの流れ

Githubのアカウントは取得済みであるものとします。

Githubレポジトリへの追加

Nuxt.jsで作成したアプリケーションをNetlifyにデプロイするためには、Githubで専用のレポジトリを作成する必要があります。ここでは、新規にレポジトリを作成します。

まずGithubにログインします。

右上の「+」ボタンから「New repository」をクリックします。

ここでは、「nuxt-todo」という名前のアプリケーションをデプロイしていきます。レポジトリ名は、手元のアプリケーションのフォルダ名と同じにすることをおすすめします。

レポジトリの公開設定はここでは「Public」とし、「Create repository」ボタンをクリックします。

ターミナルでNuxtアプリケーションのプロジェクトディレクトリに移動します。

$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add origin https://github.com/[ユーザー名]/[レポジトリ名].git
$ git push

上記の手順に従って、フォルダの中身をレポジトリにpushしてください。

Netlifyへのデプロイ

次に、作成したGithubレポジトリの中身をNetlifyにデプロイするまでの流れについて説明します。

Netlifyのトップページを開き、右上の「Sign Up」ボタンを押します。

「GitHub」をクリックすることで、サービス連携で簡単にアカウント登録をすることができます。

ログイン後は、上のようなページが表示されます。

「Sites」をクリックして、「New site from Git」ボタンをクリックします。

「Create a new site」という表示が現れます。「Github」をクリックします。

上記のような新規ウィンドウが現れるので、「Authorize Netlify by Netlify」をクリックします。

「Only select repositories」をクリックし、「Select repositories」ボタンでデプロイするレポジトリを選択します。

選択済みのレポジトリは、「Selected 1 repository」の下に表示されます。

「Insatall」ボタンをクリックします。

先ほど追加したレポジトリを選択します。

「Owner」では自分のアカウント名、「Branch to deploy」は特別な事情が無ければmasterを選択します。

「Build Command」は、SPAモードでアプリケーションを作成した場合には「npm run build」と入力します。静的に生成されたサイトをデプロイする場合は、「npm run generate」と入力してください。

どちらの場合も、「Publish directory」は基本的に「dist」を指定します。

補足:「dotenv」で環境変数の管理を行っている場合

ここでは、ローカル環境でdotenvを用いて環境変数の管理を行っている場合について補足します。

「dotenv」の設定ファイルである.envファイルは隠しファイルであり、セキュリティ上の観点からgithubにはpushしないのが普通です。

そこで、Netlify上で環境変数の値を設定する必要があります。

まずアプリケーションフォルダ内のnuxt.config.jsファイルに、Netlifyから環境変数の値を受け取るために以下の修正を加えます。

ここでは、「FIREBASE_PROJECT_ID」というキー名の環境変数を用いています。キー名の部分は、各自のアプリケーション設定に合わせて変更してください。

export default {
　env: {
　  　FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID
   　},
　　　　　(-----   省略   -----)
}

そして先ほどのNetlifyの「Basic Build Settings」の画面では、環境変数を設定するために、「Advanced」をクリックします。

「New variable」ボタンを押してフィールドを追加し、環境変数のキー名と値のペアを入力してください。

完了したら「Deploy site」をクリックします。

デプロイ中

デプロイが進行中の場合、このように表示されます。

デプロイが完了すると、緑色でURLが表示されます。URLをクリックします。

このように、デフォルトのウェルカムページが表示されればデプロイ成功です。

Netlifyへのデプロイが完了し、Nuxt.jsで作成したアプリを外部に公開することができました！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTMLの正しい書き順は？タグが先？コンテンツが先？

2020-08-10 By プログラミング入門ナビ編集部

はじめに

HTMLを学習している受講生の皆さんからよくいただく質問に

「HTMLの正しい書き順はありますか？」

というものがあります。

結論からいいますと、書き順に特に正誤はなく、正しい文法になっていればどのような書き方でも構いません。

この記事では、どのような書き順があるのかと、しいていうならばのオススメをご紹介します。

動画解説

本記事の内容を動画でも解説しています。

https://www.youtube.com/watch?v=avVANITDInc&feature=youtu.be

コンテンツから先に書く方法

まずはコンテンツから先に書く方法です。


はじめてのHTML

と、書きたい内容を書いた後でこれを段落として表示するために前後にp要素の開始タグ・終了タグをつけます。


<p>はじめてのHTML</p>

HTMLはマークアップ言語と呼ばれ、コンテンツそのものに意味を持たせるためのタグをつけてブラウザに解釈させるための言語です。

そのため、このように先にコンテンツがあり後からタグをつける書き方はある意味で教科書的な書き方といえます。

タグから先に書く方法

次に、タグから先に書く方法です。


<p></p>

と、先に段落を示すp要素の開始タグ・終了タグのセットを書いてから、その中にコンテンツを書きます。


<p>はじめてのHTML</p>

Visual Studio Codeなどをはじめとする便利なエディタでは、「p」キーの後タブキーで「<p></p>」のセットが自動で入力されたり、「<p>」だけ書くとその後に「</p>」が入力補完される機能があります。

そのため、この書き方の方が若干打つスピードは速いです。

左から右へ順番に書く方法

動画では触れていませんが、コードを左から右へ順番に書いていく方法もありますね。


<p>はじめての

という風にp要素の開始タグから始めてコンテンツを書き、最後に終了タグを書くものです。


<p>はじめてのHTML</p>

書籍やテキスト上の見本コードを見ながら、同じように書いていく場合などにこの書き方をしている方がいらっしゃるかもしれませんね。

この方法も間違ってはいないですし、もちろん同じ表示結果とはなるのですが、あまりオススメできません。

理由としては、HTMLのコーディングミスで比較的多いのがタグの書き忘れや書き間違いだからです。

この書き方をすると、開始タグを書いてから終了タグを書くまでの間にコンテンツを書く必要がありますね。

わずかな時間ではありますが、コンテンツを書いている間に終了タグを書かなければならないということを忘れて次の行に行ってしまったり、</p>と書くべきなのに見出しを書いていると勘違いして</h1>と書き間違いをしてしまうことが増えます。

先に紹介した2つの方法のように、開始タグ・終了タグの記述をなるべくまとめて行う方がこのようなミスを犯すリスクを減らせるでしょう。

先にタグを書くのがスピード面でオススメ、しかし…

ここまで3通りの書き方を紹介しました。他にもあるかもしれないですね。

HTMLプログラミングの究極目的はブラウザに想定通りの表示をさせることです。

そのため、冒頭でも記した通りどれが正解というのはなく、文法が正しく書けてさえいれば問題ありません。

しいていうならば「先にタグを書いてから中にコンテンツを書く」方法がスピードの面でオススメです。

コンテンツが先だと開始位置・終了位置にカーソルを移動させて書かなければならないため、長いコンテンツだと特に余計な時間がかかりますが、タグが先だとこの手間が小さいのと、エディタの補完機能により終了タグをタイプする時間も省けます。

しかし、エンジニアはタイピングしている時間よりも、調査や考えることに時間を使う割合が多いです。

そのためプログラミングの知識を身につける方が圧倒的に重要で、コーディングスピードの改善は後からで問題ありません。

最初のうちは自分がしっくりくる書き方に慣れていく方が大切です。

まとめ

HTMLの様々な書き方を紹介しました。どれが正解、というのはなく、自分が書きやすい方法で書いていけば問題ありません。

余談ですが、ウェブ開発の仕事は正解が1つではないことが多いので、あまり正解・不正解に拘らず、自分の進めやすい方法を見つけていく姿勢が重要です。

自分のこだわりポイントを探せるのは楽しいことでもあるので、ぜひ迷いながら進めていきましょう！

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTMLのエラーを自力で解決してみよう！演習方式で方法を解説！

2020-08-10 By プログラミング入門ナビ編集部

はじめに

HTMLのコーディングに慣れてくると、エラーが発生する回数も増えてきます。

エラー対処は「嫌だな」と思うかもしれませんが、実はプログラミング上達のための大変貴重な学習機会なのです。

「こういう書き方はダメなんだな」「じゃあ、こうだとどうなんだろう？」といった試行錯誤を通し知識の幅が広がります。

また、自力でエラーを取り除けるようになるのはエンジニアへの第一歩といっても過言ではありません。

この記事では、演習方式でHTMLのエラーを取り除いていくことで自力でエラー解決できるようになることを目指します。

演習問題の後に回答を解説するので、ご自身で演習の答えを考えてから確認してみてください。

動画解説

本記事の内容を動画でも解説しています。

演習：HTMLのエラーを取り除く

https://www.youtube.com/watch?v=yyfLlI4bGXY&feature=youtu.be

回答：HTMLのエラーを取り除く

https://www.youtube.com/watch?v=e3Iig9w1WL8&feature=youtu.be

演習問題

表示させたいWebページのイメージは下記の通りです。

赤文字で見出しがあり、その下に段落がありますね。

エラーありHTMLコード

これを表示させるためのHTMLコード例が下記ですが、ここにはいくつかのエラーがあります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="utf-8">
  <title>はじめてのHTML
  <stile>
    h1 {
      color: red;
    }
  </stile>
</head>
<body>
  ＜ｈ１＞はじめての見出し アップデート</h1>
  <p>はじめての段落</p>
</body>
</html>

実際に、ブラウザで表示してみると下記のようになります。

タイトルが長いですし、本文は白紙で、イメージとは程遠いですね。もちろんこれはエラーが原因となっています。

一つ一つ、エラーを探してこれを解決していきましょう。

エディタの機能であたりをつけよう

HTMLはメモ帳などの簡単なアプリでも記述できますが、エラーを防いだりコーディング効率を上げるためにも便利なエディタを使うのがおすすめです。

本サイトで特におすすめしているのはMicrosoft社が開発したVisual Studio Codeで、使いやすい上に無料で使えるため人気があります。

特にこだわりがない場合はぜひインストールして使ってみてください。

また、Visual Studio Code（以下、VSCode）でエラーを発見しやすくする便利な設定方法については下記で解説しています。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう

実際にVSCodeで上記の設定をしてから今回のエラーありHTMLコードを開くと下記のように表示されます。

VSCodeの拡張機能により、エラーが疑われる箇所に波線が引かれるので、あたりをつけやすくなりますね。

これを参考にエラーのある場所を考えてみてください。

ヒント：エラーは全部で4箇所あります。

回答：どこにエラーがあったのか

エラーの対処方法は思いつきましたか？それでは順に見ていきましょう。

まずはエディタのエラーチェック箇所を確認

前述の通りVSCodeのエラーチェック機能でマークがついているところが怪しいですね。

(1)metaタグ内の全角スペース

HTMLではタグ内で全角文字が使用できません。本来半角スペースにすべきところが全角スペースになってしまっていますね。

これを半角スペースに修正しましょう。

(2)title終了タグ忘れ

基本的に波線マークがついている箇所そのものにエラーがあるわけでなく、その周辺や要素内にエラーがあることが多いです。

今回もheadの終了タグに波線がついていますがこれ自体には問題なさそうですね。

波線の上にカーソルを置くとエラー詳細を見ることができます。

「missing: [ </title> ]」という文言がありますね。title終了タグがないという意味です。

確かに書き忘れているようなので、追加しましょう。

(3)h1開始タグが全角文字

h1終了タグにも波線がありますが、</h1>自体にはエラーがなさそうです。

カーソルを置いてみましょう。

「no start tag：[ </h1> ]」という文言がありますね。これは</h1>に対しての開始タグがありませんよ、という意味です。

開始タグはあるはず…とよく見ると、タグの色が周りと違っていて不自然ですね。それに何だか文字が大きいような…

お気づきでしょうか。h1開始タグが全角で書かれてしまっていますね。

タグは半角で書くのがルールなので、半角に修正しましょう。

ブラウザでの表示チェックもしてみよう

ここまででエディタのエラーチェック箇所はなくなりました。

他にもエラーがあるかもしれないので、ブラウザで表示させてみましょう。

白紙ではなくなりましたが、最初の仕上がりイメージとはまだ異なりますね。

スタイルを指定した部分のコードがそのまま表示されているのと、見出しの赤文字が反映されていません。

このことから、スタイル指定部分のあたりでエラーがあると想定されます。

(4)styleタグのスペルミス

コードに戻って見てみましょう。

「<style>〜</style>」となっていなければならない箇所が、スペルミスで「<stile>〜</stile>」になってしまっていますね。

これによりスタイル指定がうまくいかず、先ほどのような表示になってしまったわけです。

このスペルミスも修正しましょう。

ブラウザで表示すると、イメージ通りの結果になっているので、エラーは全て取れたと考えられます。

構文チェックツールで最終確認

ブラウザでの表示結果に問題がなくとも、実際にはコードにエラーが残っていることがあります。

ブラウザによっては高機能なものがあり、多少のエラーならば自動的に独自解釈して表示できることがあるためです。

しかし、一部のブラウザでは表示できて、他のブラウザで表示できないというのでは根本的なエラー解決になりません。

そこで、構文チェックツールを使って最終確認をしてみましょう。

構文チェックには、HTMLの規格策定団体であるW3Cが公式に提供している下記のツールがおすすめです。

W3C Markup Validation Service

「Validate by Direct Input」のタブを開き、空欄にコードをコピー＆ペーストして「Check」ボタンを押します。

結果は下記のようになります。

もしミスがあればその詳細が表示されますが、ミスがない場合は上記のように緑色の帯が出て、エラーが見つからなかった旨が表示されます。

これでめでたく全てのエラーを解決できました！

まとめ

HTMLのエラーを自力で解決する方法を演習形式で解説しました。

実際にはここで取り上げたエラーだけでなく、様々なものが出るでしょう。

しかし、紹介した手順と同じ方法で確認していくことで、解決の糸口が掴めるはずです。

エラーが出ても怯まずに、理解を深めるチャンスと捉えてぜひ頑張ってください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する