基本のボタンを作る方法
基本のボタンを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用してシンプルなボタンを作成します。余計な装飾やアニメーションは加えず、Webサイトでよく利用される基本的なボタンを実装します。HTMLとCSSの基礎を学びたい方や、さまざまなボタンデザインのベースとして利用したい場合にもおすすめです。
お問い合わせ画面の送信ボタン、会員サイトの登録ボタン、ECサイトの商品購入ボタン、管理画面の保存ボタンなど、さまざまなWebサイトで利用できます。シンプルなデザインのため、用途を選ばず導入しやすく、そのまま利用することはもちろん、今後デザインを変更するベースとしても活用できます。
ボタンに表示する文字はHTMLから変更でき、CSSでは背景色、文字色、余白、角丸、文字サイズなどを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも利用しやすく、初心者でも導入しやすい基本的なボタンのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
基本的なボタンのデザインを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>基本のボタン</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ボタン -->
<a
class="basic-button_link"
href="#">
ボタン
</a>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSを使用した基本的なボタンです。使用するファイルは「index.html」と「style.css」の2ファイルだけで構成されており、JavaScriptは使用していません。HTMLではボタンを配置し、CSSでは背景色や文字色、余白、角丸などの見た目を設定しています。シンプルな構成のため、初心者でも内容を理解しやすく、そのままWebサイトへ導入できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
ボタンを表示するHTMLファイルです。ボタンに表示する文字やリンク先を変更できます。
style.css
ボタンの背景色、文字色、余白、角丸、文字サイズなどのデザインを設定するファイルです。見た目を変更したい場合はこのファイルを編集します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じフォルダへ保存したあと、「sample/index.html」をブラウザで開くとボタンを表示できます。Webサイトへ組み込む場合は、HTMLへボタンを配置し、style.cssを読み込んで利用してください。
カスタマイズできる内容
index.htmlではボタンの文字やリンク先を変更できます。
style.cssでは背景色、文字色、文字サイズ、余白、角丸を自由に変更できます。用途に合わせてデザインを調整してください。
数値調整
style.css
padding:14px 28px;
ボタンの内側余白です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角いボタンになります。
font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さく表示されます。
レスポンシブ対応
このサンプルはインラインブロック要素を利用したシンプルなボタンのため、画面サイズに応じて自然に表示されます。スマートフォン・タブレット・PCで利用できます。
コメント