スライドショー

HTMLでコメント・コメントアウトを書くには?3つの方法について解説

HTMLでコメントを書くにはどうすればいいの?
コメントはどのような場合に使うのか知りたい
コメントの基本をマスターしたい

こんにちは!HTMLとCSSが得意な侍エンジニア塾ブログ編集部のシホでです!突然ですが、皆さんは「コメント」についてご存知ですか?

HTMLを学ぶ中で意外とコメントでつまずく方がいます。そこで今回は、コメントやコメントアウトの役割から、使い方・注意点までを解説していきたいと思います。

この記事はこんな人のために書きました

  • コメントについて詳しく知りたい方
  • コメントの使い方の基礎を知りたい方
  • コメントの注意点についても知っておきたい方

HTMLのコメントやコメントアウトについて詳しく解説していますので、ぜひ参考にしてみてください。

HTMLのコメント・コメントアウトとは?

コメントとはソースコード中に特殊な記号を用いて、メモや解説をコメントとして記述することを指します。

コメントアウトもコメントと同様特殊な記号を用いて、実行させたくないコードをコメントの中に記述することによって、その行の処理を実行させないことを指します。

つまり、コメント・コメントアウトで記述した内容はブラウザに表示されませんし、処理が実行されることもありません。

どういうことなのか、具体的にクックパッドの例をみてみましょう。クックパッドのトップページで右クリックで「ページのソースを表示」を選択します。

クックパッド

出典:クックパッド https://cookpad.com/

「ページのソース表示」では、画面のHTMLのソースコードを見ることができます。すると、次のようにコードの中にクックパッドのロゴが書かれています。

クックパッド

クックパッドの遊び心ですね。笑

<!-- 〜 -->で囲んだ部分がコメントされている部分です。

このように、コメントで記述すれば、ブラウザには表示されません。

こういった遊び心を取り入れた使い方もできますし、本来の役割である注釈や覚え書きの範囲を超えて、効率よく作業を進めるためにいろいろな使われ方をされています。

なぜHTMLでコメントを使うのか

説明や注意書きを残す

これは本来のコメントの役割です。ブラウザには表示したくないちょっとしたメモを残すために使われます。ここでは何の処理が行われ結果がどこで使われるのかや、特定のブラウザに向けた特別なコードはどをメモ書きとしてコメントします。

こうすることによって、複数人で作業する場合に情報を共有することができ、効率良く開発やメンテナンスを行うことができます。

ページの構成を明確にする

HTMLではさまざまなタグを用いてWebページを構築していくので、何段もの構造が重なり合うことがあります。その場合、後から修正などを行うときに目的のコードまでたどり着くのが大変です。

そこで、後から修正をしやすいようにコメントで「Start Header」「Start Menu」などと、誰が見てもわかるように区切りを入れていきます。そうすると自分で変更や修正を行うときにもスムーズに目的の場所にたどり着くことができ、他の人が修正するときにもわかりやすくなります。

また、HTMLは開始タグと終了タグありますが、片方を追加・削除してしまうと表示が崩れてしまいます。なので、どのタグがどこまで対応しているのかがすぐわかるようにするためコメントに「Start Article」「End Article」などと記述しておくと安心です。

特定のブロックを表示、非表示にする

コメントには特に文字制限はないですし、一行である必要もありません。複数行に渡ったり、コメントにHTMLタグが混在したりしていてもコメントが可能です。

そこでこの特性をを利用すれば、特定のブロック全体をコメントすることで、ブラウザ上で非表示にすることができます。

例えば、まだ公開はできないけれど先にコードを書いておいてコメントアウトしておけば、公開時にはコメントアウトを外すだけでブラウザに素早く表示することができます。逆に表示させたくないブラウザ表示をコメントアウトをつけることで素早く非表示にすることも可能です。

HTMLのコメント3つの書き方

コメント・コメントアウトをする際は、コメントしたい箇所を<!-- 〜 -->で囲みます。

<!---->は間に空白が入らないように気をつけましょう!

一行コメントする

コメントは一行だけでなく、複数行で書くことも可能です。

See the Pen JvExbL by Shiho Sakai (@shiho-sakai) on CodePen.0


一行コメント

ブラウザにはコメントした部分が表示されていません。

複数行コメントする

コメントは、複数行で書くことも可能です。

See the Pen gzgqqb by Shiho Sakai (@shiho-sakai) on CodePen.0


複数行コメント

コメントの中にタグを入れる

次のように、コメントの中にタグを入れることも可能です。

See the Pen yjgZdP by Shiho Sakai (@shiho-sakai) on CodePen.0


コメントの中にタグを入れる

コメントの注意点

コメントの中にコメントを入れない

コメントは複数行で書いたりタグを入れたりできますが、コメントをさらに入れることはできません。

コメントにコメントを入れる構造(入れ子)にした場合、以下のように、中に入れたコメントの-->がコメントの終了宣言とみなされ、そこでコメントが終わってしまうことがあります。

See the Pen ZoLPvq by Shiho Sakai (@shiho-sakai) on CodePen.0


コメントの中にコメントを入れた場合

ハイフン「-」をなるべく使わない

ハイフン「-」をコメントの中で使わないことをおすすめします。ハイフンの連続をコメントの終了と解釈するブラウザがあるからです。そのため、意図しないところでコメントが終了して、ブラウザに表示されてしまう場合があります。

よく、区切りに「----」とこのようにハイフンを連続して使う人がいますが、「====」などに変えて使いましょう!

コメントが閲覧される

コメントにした部分はブラウザに表示されませんが、絶対に閲覧されないというわけではありません。現行の全てのブラウザでは、表示されているウェブサイトのHTMLソースをコメント部分を含めてそのまま閲覧することができます。

今閲覧しているブラウザでページを右クリックしてみてください。『ページのソースを表示』というような項目が出てくると思います。それをクリックすると、閲覧しているページのコメント部分を含めたHTMLソースが閲覧できます。

見落としがちな注意点で、大手企業さんでもたまにやらかしてしまうようですが、公開前の情報や社外秘の情報などをコメントで書かないように十分気をつけてください。

HTMLだけでは高条件の案件獲得が難しい

ウェブサイト制作をするにはHTMLは学習必須ですが、それだけでは仕事の幅は狭く、何ページも制作しなければならないなどと量をこなす仕事しかできなくなってしまいます。

同時にCSSやJavaScript、WordPressなどの技術を身につけることで、単価の高い仕事や、案件数も多くなるためおすすめです。

HTMLのみとウェブサイト制作では仕事の量が全く違う

実際にクラウドワークスでも以下のように複数技術の習得をすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

HTML/CSSのみと、ウェブサイト制作全般だと仕事の量は約10倍も変わるため、今後も仕事をとり続けられるエンジニアになるために他の技術も学んでいきましょう。

具体的に必要なスキルと学習手順はプログラミング学習診断アプリでも解説していますので見てみてください。

挫折せずにスキル習得をするには

これらの複数スキルを挫折せずに身につけるならプログラミングスクールでの学習がおすすめです。

独学だとエラーに詰まったり、プロのレベルやスタンダードがわからないため、「このまま独学を続けて仕事獲得できるようになるのかな?自分のコードの書き方や学習の方向性はあってる?」と不安になり、なかなか学習が進まないことがあると思います。

弊社「侍エンジニア塾」では、あなたの理想の生活やプログラミングを学ぶ目的を聞かせていただいた上で、最適なカリキュラムや講師によるマンツーマンレッスンを行うため、しっかり本来の理想に繋がったプログラミング学習をすることができます。

無料体験レッスンでは、時間と場所に縛られずに働くために必要なスキルや、その学習手順などもお伝えします。オンラインでも受講可能なため、ぜひお気軽にお申し込みください。

無料体験レッスンへ申し込む

まとめ

いかがでしたでしょうか。HTMLのコメントの方法は簡単ですが、ルールを間違えると記述側が意図しない文字がブラウザに表示されてしまったりします。

きちんと決まりを守って、誰が見てもわかりやすいコメントを書くことを心がけましょう!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★