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コメントアウト】複数行でもOK！
また、このコメントアウト、実は複数行でも使えるんです。
サンプルコードを参考にしてみてください。
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<!-- ここがコメント部分です。
ここもコメントとして反映されます。 -->
<p>ここが本文です。</p>
</body>
</html>
このように、<!-- と -->の間はたとえ複数行あったとしてもコメントアウトされます。
間違えて閉じタグを忘れたりすると、それ以降の行はすべてコメントアウトされてしまうので注意してください。
【HTMLコメントアウト】まとめ
今回は「コード中にメモを書きたい！」そう思ったときに使えるコメントアウトを紹介しました。
<!-- --> で囲むだけなので簡単ですよね♪
適度に書き込むことで見やすさが格段に上がります！
ぜひ活用してください。
テキストエディタによってはコメントアウトをショートカットキーで省略できたりもしますので、お使いのテキストエディタでもできないか、探してみてください！
関連記事
-
FUNAこんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...
-
CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。
-
今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。
-
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。
-
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。
HTML/CSS
【はじめてのHTML】コメントアウトの書き方
こういった疑問に答えます。
こんにちは、リバティエンジニアのFUNA（フナ）です。
現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
この記事はこんな方におすすめ
今回は、HTMLでコメントアウトする方法について、ご紹介します。
目次
そもそもHTMLコメントアウトとは？
コメントアウトとは、コードの中にメモ書きのように書くことができる機能です。
コメントアウトの書き方はいくつかあるのですが、今回はそのうちの一つを紹介していきます。
例えば、コードの解説であったり、普通はしないようなコードを何らかの理由で書いている時など、第三者の方がコードを見たときに何かわかるようにしたい時に使います。
【HTML】コメントの書き方
<html lang="ja"> <head> <meta charset="utf-8" /> </head> <body> <!-- ここがコメント部分です。 --> <p>ここが本文です。</p> </body> </html>このようにコメントアウトしたい部分を「<!-- -->」これで囲みます。
コメントアウトした部分はWeb上には表示されないので安心してください。
書きすぎても見づらくなるのでほどほどに。
【HTMLコメントアウト】複数行でもOK！
また、このコメントアウト、実は複数行でも使えるんです。
サンプルコードを参考にしてみてください。
<html lang="ja"> <head> <meta charset="utf-8" /> </head> <body> <!-- ここがコメント部分です。 ここもコメントとして反映されます。 --> <p>ここが本文です。</p> </body> </html>このように、<!-- と -->の間はたとえ複数行あったとしてもコメントアウトされます。
間違えて閉じタグを忘れたりすると、それ以降の行はすべてコメントアウトされてしまうので注意してください。
【HTMLコメントアウト】まとめ
今回は「コード中にメモを書きたい！」そう思ったときに使えるコメントアウトを紹介しました。
<!-- --> で囲むだけなので簡単ですよね♪
適度に書き込むことで見やすさが格段に上がります！
ぜひ活用してください。
テキストエディタによってはコメントアウトをショートカットキーで省略できたりもしますので、お使いのテキストエディタでもできないか、探してみてください！
関連記事
【コピペOK！】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】
FUNAこんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...
【CSS】たった1行のコピペで簡単！object fitで画像をトリミングする方法
CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。
【コピペOK】CSSでcounterを利用して自動ナンバリングする方法
今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。
【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。
【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。
最近の投稿