Archives for 2020

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週間無料体験しよう

今すぐ詳細を確認する

HTMLのエラー原因がわからない！W3Cの構文チェックツールを使用してみよう

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

はじめに

HTML初心者だけど、なんとかエラーが起きても自分で対処できるようになってきた。

でもこのエラーだけはどうしても対処方法がわからない！

そんなお悩みはありませんか？そもそもどこにエラーがあるのかもわからなかったり、とっても厄介ですよね。

四六時中考えていたらピン！と分かったりして、それはそれで気持ちのいいものですが、エラー対処ばかりに時間を書けてもいられません。

この記事では、HTMLでエラーが起きた時におすすめの奥の手として、構文チェックツールを紹介します。

基本的なエラーの対処方法

HTML文書は、何かエラーがあってもブラウザがなんとか表示しようと頑張るので、ブラウザによってはエラーがあったとしても想定通りの表示になることがあります。

また、HTMLは階層構造になっているので、上記のように目に見えない不具合があってもそのままにしていると、それ以降のコードにも悪影響が出やすいです。

そのため、エラーがひとたび起きてしまうとそもそもの原因となっている箇所がわかりにくいことが多々あります。

このように、エラーが起きてからではややこしくなるので、書いた瞬間から違和感に気付けるように、エディターの拡張機能でエラーチェックをしながらコーディングするのが基本的な対処方法です。

本サイトではエディターはVisual Studio Codeをおすすめしていますが、この標準機能や拡張機能を用いてなるべくエラーを発生させないようにするための方法は下記でも説明しています。

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

それでもダメなら構文チェックツール

先ほどの対策をしたうでコーディングすればほとんどの初歩的なミスは防げますが、複雑なコードになればなるほどそれだけでは防げないエラーが出てきます。

ここからはそれに対処するための方法を見ていきましょう。

例えば、簡単ですが下記のようなコードを書いていたとします。

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

このコードにエラーがあるかどうかチェックするには、下記のサイトにある構文チェックツールを使用します。

Markup Validation Service

W3CはHTMLの規格を管理している団体で、こちらによる公式ツールとなっていますので信頼性は十分ですね。

英語のみ対応となっていますが、不安な方はGoogle翻訳を活用すれば概ね理解可能なはずです。

こちらの「Validate by Diret Input」というタブをクリックして先ほどのコードをコピー＆ペーストし、Checkボタンを押します。

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

下の方に緑の帯と共に「Document checking completed. No errors or warnings to show.」と出ます。

これは「チェックが完了し、エラーは見つからなかった」という意味なので、このコードでは特に問題がないということがわかりました。

では、エラーがある時はどうなるのでしょうか。

試しにコードを下記のようにしてh1要素の終了タグのスラッシュを取り除いてもう一度チェックツールに渡してみましょう。

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

今度は緑色の帯が出ず、いくつかのエラー候補が出ています。

怪しい箇所が黄色でマークされるので、そこを中心に見ていけばすぐにエラーに気づくことができますね。

このように、構文チェックを使用すれば文法的な誤りがあるかどうか、ある場合はその箇所をすぐに見つけることができます。

まとめ

HTMLのエラー原因を探るための構文チェックツールとその使い方を紹介しました。

ブラウザでの表示が想定通りではない時、書いたコードに文法的な問題があるかどうかを切り分けられるだけでも便利ですね。

ぜひ活用してコーディングの効率化にお役立てください。

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

新HTML入門（Proglus）

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

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

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

今すぐ詳細を確認する

HTMLで初心者がやりがちなミスとその対処方法！困ったらとりあえずこれを確認しよう！

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

はじめに

プログラミングを始めたての時は、些細なミスでもつまずいてしまいますね。

慣れてくると「よくあるミス」がだんだんわかるようになり、何か問題が起きたらすぐに気付けるのですが、初心者の時は特に解決に時間がかかりがちです。

この記事では、特に初心者がやりがちなHTMLのミスとその対処方法を紹介します。

あなたの問題解決の時間短縮に少しでも役立てば幸いです。

動画解説

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

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

コード例と正しい表示結果

まず最初に正しく書けている場合のコードと表示結果を見てみましょう。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  <h1>はじめての段落</h1>
</body>
</html>

表示結果

見出しのみのシンプルなページですが、コードにミスがあるとうまく表示できません。

ミスをするとどんな結果になってしまうのか順番に見ていきましょう。

全角文字での書き間違い

HTMLのタグ（<〜>の部分）は全て半角英数字で記述する必要があります。

全角になっているとブラウザが正しくタグとして読み込めないので想定した通りの表示にならないことがあります。

例えば見出しを意味する<h1>〜</h1>の部分で、誤ってタグを全角で下記のように書いてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

タグがそのまま表示されてしまっていますね。また「はじめての見出し」が見出しとしての表示になっていません。

これは<h1>〜</h1>が全角で書かれてしまったためにブラウザが見出し部分と理解できずにタグごとそのまま表示した結果です。

タグを書く時はきちんと半角にしてから記述するようにしましょう。

全角スペースの混入

HTMLのタグ内にはスペースを入れることがあります。このスペースも先ほどと同様、半角でなければなりません。

間違えて全角スペースにするとどうなってしまうのでしょうか。

下記コードのように、文字セットを指定するmeta要素の中で全角スペースを入れてみましょう（4行目）。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例（macOSのSafariにて）

ブラウザによっては正しく表示されることもありますが、この例のようにmacOSのSafariブラウザで開くと文字化けしてしまいます。

これは文字セットを指定する<meta>要素内で、半角スペースの代わりに本来使ってはいけない全角スペースが使用されたため、ブラウザが使用すべき文字セットを理解できないのが原因です。

日本語で記述された「はじめての見出し」は日本語に適した文字セットであるUTF-8を指定されなかったために文字化けしてしまいました。

このように、タグだけではなくその中で記述するスペースも全角にならないように注意しましょう。

終了タグの/（スラッシュ）が無い

HTMLの基本構文は開始タグ（例：<h1>）＋コンテンツ（例：はじめての見出し）＋終了タグ（例：</h1>となっています（例外もあります）。

この終了タグには/（スラッシュ）が必要ですが、初心者のうちはこれを忘れてしまうことが多いです。

例えば下記のようにtitle要素で終了タグのスラッシュを忘れてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い<title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

白紙になってしまいましたね。

その代わり、ブラウザのタブにカーソルを合わせるとタイトル部分が出るのですが、ここに</html>までの残りのコードが入っていることがわかります。

title要素の終了タグでスラッシュを書き忘れると、タイトル部分の終了をブラウザが認識できずに、最後までタイトルが続いていると解釈してしまうためこのようになった訳です。

たかがスラッシュなのですが、忘れると大変なことになってしまうので注意してください。

終了タグの書き忘れ

終了タグにスラッシュを書き忘れるとそれ以降のコード全てがタイトルだと認識され、本文が白紙になってしまうことがわかりました。

では、終了タグそのものを書き忘れるとどうなるのでしょうか。結果はスラッシュ忘れのケースと同様になります。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

終了タグは要素によっては必要のない場合もあるので、ついうっかり必要なのに書き忘れてしまうことがあるかもしれません。

必要ないと思い込んでしまっている場合もあるので、表示がおかしいなと感じたら怪しい部分の終了タグについて改めて確認してみるのが良いでしょう。

タグのスペルミス

タグそのものをスペルミスしてしまうこともよくあります。

例えば<title>を<titla>と書いてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <titla>よくあるHTMLの記述間違い</titla>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

タイトル部分も含めて本文エリアに表示されてしまいました。

スペルミスによりタイトルを意味する<title>タグが認識できなかったため、ブラウザが<titla>以降を全て本文として解釈してしまったためです。

特にVSCodeなど、便利なブラウザには開始タグを書くとその後ろに自動的に終了タグを記述してくれる機能がありますね。

この時、開始タグをスペルミスすると終了タグもスペルミスされた状態で入力されることがあるので気付きにくく、注意が必要です。

ファイルの保存忘れ

「きちんと間違いがないか何度も確認して入力したのに、やっぱりエラーが出たまま…」

「新しく段落を追加したのに、出てこない…一体何が間違っているの？」

こんな時、あなたが書いたコードには一切間違いがない可能性があります。

しかし、ブラウザが見ているのは保存前のコードのままかもしれません。

試しに下記の画面（VSCodeでの入力例）のように段落を追加して、保存をしない状態でブラウザに表示させてみましょう。

すでに開いている場合はリロードでもかまいません。

コード例

保存をしないと、VSCodeの場合は下図のようにファイル名横に白丸マークがつきます。

表示例

せっかく追加した「はじめての段落」が出てきませんね。コード変更する前の表示と変わりません。

ファイルが保存されない限り、ブラウザは最後に保存された状態のコードしか参照できないためです。

単純なことなのですが、一番不可解な現象となりやすいのがこのパターンです。

こまめな保存を心がけ、エラーが起きた場合も保存忘れがないかどうか真っ先に確認しましょう。

まとめ

初心者がハマりやすい、よくあるHTMLの記述間違いとその対処方法を紹介しました。

どれもカラクリがわかると「なーんだ」と感じるかもしれませんが、慣れない内は焦ってしまうものばかりですね。

同じミスが原因でも、書くコードが違う以上は発生する現象は人それぞれです。

ここで紹介したような現象が起きていなくても、一つ一つ心当たりのあるミスがないか確認するだけでも何か解決の糸口になるかもしれません。

ぜひ試してみてくださいね。

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

新HTML入門（Proglus）

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

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

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

今すぐ詳細を確認する