「Web制作を始めたいけど、まずは簡単なところから学びたい」
そんな方におすすめなのが、HTMLボタンの作成です。HTMLタグとCSSを組み合わせるだけで、シンプルかつ実用的なボタンを作れます。この記事では、HTMLボタンの基本 → CSSでのデザイン → よくあるアレンジの順に解説します。サンプルコードをそのままコピーして試せるので、初心者でもすぐに学習を始められます。
HTMLとCSSでボタンを作る基本手順
フォルダとファイルを準備しよう
まずは作業環境を整えましょう。
フォルダとファイル作成の仕方はこちら→【 Live Server が表示できない！！】VS code初心者あるある対処法とフォルダ作成
フォルダ名を 【btn練習】 と付ました。
次は、HTMLファイルを作成します。VS-codeを立ち上げて、 新しいファイル をクリックします。
上部に【ファイル名を入れてください】と出るので、拡張子 html ファイルを作ります
ボタンなので、 btn.html と入力し、確定キー（リタンキー）を押します
次のような画面が表示されるので、先ほど作ったフォルダ【btn練習】を選び、ファイルの作成をクリックします。
htmlファイルが作成されました。左上をクリックします。
エクスプローラーが表示されるので、【フォルダーを開く】をクリックします
フォルダ名【btn練習】、ファイル名【btn.html】を確認し、開くをクリックします
これでフォルダが開かれた状態になりました。
html と入力すると、どれですか？メニューが表示されます
html:5 を選択する
html ファイルが準備ができたので、早速ボタンを作ってみましょう！
HTMLボタンの基本の書き方
HTMLボタンを配置する
HTMLでボタンを作るには <button> タグを使います。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
👉 このように記述するだけで、画面に「クリック」と書かれたHTMLボタンが表示されます。
CSSでHTMLボタンをデザインする
次にCSSを使ってデザインを加えましょう。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
👉 これでシンプルな青いHTMLボタンが完成します。
HTMLボタンのアレンジ例
赤い警告用のHTMLボタン
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
緑色の成功用HTMLボタン
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
👉 クラスを変更するだけで、HTMLボタンの色や用途を簡単に変えられます。
HTMLボタンを使うメリット
・シンプルに書けるので初心者でも安心
・CSSを組み合わせて自由にデザイン可能
・フォームやリンク、UIパーツなど幅広く活用できる
H2: まとめ
<button>タグを使えば簡単にHTMLボタンを作れる- CSSで色・丸み・ホバー効果を追加すると見た目が良くなる
- 用途に合わせて複数種類のHTMLボタンを使い分けると便利
HTMLボタンはWeb制作の基本中の基本です。最初の学習にぴったりなので、ぜひこの記事を参考に手を動かしてみてください。
内部CSSの書き方の詳しい解説はこちら→超初心者向け！<style>タグを使ったCSSの書き方とは？
Comments