buttonタグの書き方｜ボタンを表示するタグの使い方を解説

<button> タグは、 ボタンを表示するタグ です。

この <button> タグで文字を囲むと、その個所がボタンになります。

■ <button> タグの記述例

■ ホームページ上の表示

上記のように、<button> タグを使うことで、 ボタンを表示すること ができます。

ただ、上記のボタンを押しても、何も起きませんよね？ つまり、<button> タグだけを使っても、ただボタンを表示するだけで、ほとんど意味はない、、、ということです。


そのため、この<button> タグは、いろいろなオプションを付けて、活用するようにします。

たとえば、パーツテンプレート集 のページに、「お気に入りに追加するバーのパーツ」がありますよね。

このパーツは、<button> タグを使っていますが、いろいろなオプションを付けることで、下記のような 「お気に入りに追加する」 のボタンを作ることができます。

上記のボタンをクリックすると、当サイトを、お気に入りに追加できるはずです。


ただ、、、「お気に入りに追加する」のボタンは、Internet Explorer を使っている人しか、動作しないという欠点があります。

そのため、Google Chrome やFirefox などのブラウザを使っている人は、上記のボタンを押しても、何も起きません。。。


この <button> タグは、使い方が難しい ですし、そもそも、使う機会があまりないので、もし使うのでしたら、「お気に入りに追加する」のボタンくらいかもしれませんね。

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒　AIやChatGPTを活用してビジネスを行う講座はこちら