この記事では、HTMLとCSSだけで簡単にボタンを作る方法を、超初心者向けに分かりやすく解説します！
「コードがよくわからない…」という方でも大丈夫！実際のサンプルを見ながら、一緒に楽しく学んでいきましょう！
フォルダ作成
まずはフォルダとファイルを作成しましょう！
フォルダとファイル作成の仕方はこちら→【 Live Server が表示できない！！】VS code初心者あるある対処法とフォルダ作成
フォルダ名を btn練習 と付ました。
次は、HTMLファイルを作成します。VS-codeを立ち上げて、 新しいファイル をクリックします。
上部に【ファイル名を入れてください】と出るので、拡張子 html ファイルを作ります
ボタンなので、 btn.html と入力し、確定キー（リタンキー）を押します
次のような画面が表示されるので、先ほど作ったフォルダ【btn練習】を選び、ファイルの作成をクリックします。
htmlファイルが作成されました。左上をクリックします。
エクスプローラーが表示されるので、【フォルダーを開く】をクリックします
フォルダ名【btn練習】、ファイル名【btn.html】を確認し、開くをクリックします
これでフォルダが開かれた状態になりました。
html と入力すると、どれですか？メニューが表示されます
html:5 を選択する
html ファイルが準備ができたので、早速ボタンを作ってみましょう！
基本のボタン
それでは早速、<body>の中にhtmlコードを書いて基本のボタンを作りましょう！
ボタンは<button> タグを使います。まずは<button>開始タグと</button>閉じタグを入力します。
リタンキーで改行します
クリック！ と入力します。更新してweb表示させます
非常に見えにくいですが、htmlのみで作成したボタンが表示されています。
ボタンに色をつける
次はCSSでデザインしてみましょう！今回はボタンのデザインだけなので、内部CSSを使って書きます
内部CSSの詳しい解説はこちら→超初心者向け！<style>タグを使ったCSSの書き方とは？
内部CSSは<head>の中に書きます。そして<style>タグを使います。
style と入力すると、これですか？メニューが表示されます。styleを選択します。
style を選択すると、<style>開始タグと</style> 閉じタグが表示されます。
改行をしたところに、デザインするコードを書いてみましょう！
デザインしたいタグ名を入れます。デザインしたいタグはボタンなので、 button と入力します。スペースを一つ入れた後に{ }を書きます。
{ } の間にカーソルを入れてリタンキーで改行します。
ボタンに色をつけるには background-color で指定します。なので、 back と入力すると、どれですか？メニューが表示されます。
background-color を選択します
次に、好きな色を選びます。
色を選んだら更新します。
web表示させると、白色から、アクアブルーに変更されました！ちなみに、HTML のみでボタン作成すると、自動的に角を丸くしてくれます。しかし、CSSを適用した瞬間、四角になってしまいます。
文字の色を変える
文字の色は color で指定します、color と入力し、選択バーの colorを選択します
ボタンの色にあった文字の色を選びます
色を指定したら、更新してweb表示させてみます。ブルーに変更してみました。
分かりずらいですが、黒色から青色に変わりました。
文字のサイズを変える
文字のサイズは font-size で指定します。 font と入力し、 font-size を選択します。
ココでは、「どれですか？メニュー」は選択しません。
直接数字を入力します。 16px と入力します
更新してweb表示させてみましょう！文字のサイズが少し大きくなりました。文字を大きくすると、ボタンも大きくなります。
ボタンの枠線をなくす
ボタンの枠線をなくすには border で指定します。border と入力し、border を選択します。
枠線をなくすには、none を指定します。
更新してweb表示させると、枠線がなくなっています
ボタンの角を丸くする
ボタンの角を丸くするには、 border-radius で指定します。（注）HTML のみでボタン作成すると、自動的に角を丸くしてくれます。しかし、CSSを適用した瞬間、四角になってしまうので、角を丸くするコードで指定します。
ココでは「どれですか？メニュー」から選択しません
直接 5px と入力します。
更新してweb表示させると、角が丸くなりました！
まとめ
・<button> タグでボタンを作る。
・CSS でデザインを変更する。
・HTML のみでボタンを作成した時は角が丸くなていますが、CSSを適用した時点で四角いボタンになってしまいます。角を丸くするには、CSSで角を丸くする設定をしてあげましょう！
次回は ボタンの上にマウスを置くと指のマークになったり、フワッと光るボタンの作り方を学びましょう！
コメント