HTML/CSS

【はじめてのHTML】コメントアウトの書き方

HTMLでメモ書きをしたい。でも別ファイルに書いておくと忘れてしまう。。なにかいい方法はないかなぁ。

こういった疑問に答えます。

 

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTMLでコメントを残す方法が知りたい
  • HTMLのコメントアウトの記述方法が知りたい

 

今回は、HTMLでコメントアウトする方法について、ご紹介します。

 

 

そもそもHTMLコメントアウトとは?

コメントアウトとは、コードの中にメモ書きのように書くことができる機能です。

コメントアウトの書き方はいくつかあるのですが、今回はそのうちの一つを紹介していきます。

 

 

コメントアウトって、どのようなときに使うのですか?

 

例えば、コードの解説であったり、普通はしないようなコードを何らかの理由で書いている時など、第三者の方がコードを見たときに何かわかるようにしたい時に使います。

 

【HTML】コメントの書き方

<html lang="ja">

<head>
    <meta charset="utf-8" />
</head>

<body>
    <!-- ここがコメント部分です。 -->
    <p>ここが本文です。</p>
</body>

</html>

このようにコメントアウトしたい部分を「<!--  -->」これで囲みます。

コメントアウトした部分はWeb上には表示されないので安心してください。

 

<html lang="ja">

<head>
    <meta charset="utf-8" />
</head>

<body>
    <!-- ここがコメント部分です。 
        ここもコメントとして反映されます。 -->
    <p>ここが本文です。</p>
</body>

</html>

 

このように、<!-- と -->の間はたとえ複数行あったとしてもコメントアウトされます。

間違えて閉じタグを忘れたりすると、それ以降の行はすべてコメントアウトされてしまうので注意してください。

 

【HTMLコメントアウト】まとめ

今回は「コード中にメモを書きたい!」そう思ったときに使えるコメントアウトを紹介しました。

 

<!-- --> で囲むだけなので簡単ですよね♪

適度に書き込むことで見やすさが格段に上がります!

ぜひ活用してください。

 

テキストエディタによってはコメントアウトをショートカットキーで省略できたりもしますので、お使いのテキストエディタでもできないか、探してみてください!

 

関連記事

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。

CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】

CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。

【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!

今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。

【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介

HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.