HTMLでボタンを作る方法は概ね三つがあります。buttonタグ、aタグ、inputタグです。この記事では、CSSを使用してbuttonタグを綺麗にする方法を紹介します。
buttonタグとは
<button>ボタンです。</button>ボタンの見た目にはブラウザごとのデフォルトのスタイルが適用されるため、デザインに合わせた独自のスタイルを適用する必要があります。
ボタンのスタイルを変更する
まずは、ボタンのスタイルを変更する方法を紹介します。buttonタグのスタイルを変更するためには、CSSを使用して次のようにスタイルを指定します。
button {
/* ボタンのスタイルを指定するプロパティを追加 */
}例えば、背景色を赤色に変更したい場合は、以下のようにCSSを指定します。
button {
background-color: red;
}このようにCSSを指定することで、buttonタグの背景色を赤色に変更することができます。
ボタンのスタイルをカスタマイズする
次に、buttonタグのスタイルをカスタマイズする方法を紹介します。ボタンのスタイルをカスタマイズする場合には、次のようなプロパティを指定することができます。
background-color: ボタンの背景色を指定します。color: ボタンの文字色を指定します。border: ボタンの境界線を指定します。border-radius: ボタンの角丸を指定します。padding: ボタンの内側の余白を指定します。text-align: ボタンのテキストの配置を指定します。text-decoration: ボタンのテキストの下線や打ち消し線を指定します。font-size: ボタンのフォントサイズを指定します。cursor: マウスカーソルの形状を指定します。（あまり使わないと思う）
これらのプロパティを適用することで、ボタンのスタイルをカスタマイズすることができます。
サンプルコード
button {
display: inline-block; /* ボタンを横並びにする */
border: none; /* 枠線をなくす */
border-radius: 5px; /* 角丸をつける */
padding: 10px 15px; /* ボタンの内側の余白 */
margin: 5px; /* ボタン同士の余白 */
background-color: #96b97d; /* ボタンの背景色 */
color: white; /* ボタンの文字色 */
text-align: center; /* ボタンのテキストを中央揃えにする */
text-decoration: none; /* テキストに下線をつけない */
font-size: 15px; /* テキストのフォントサイズ */
cursor: pointer; /* マウスポインタを変更する */
}表示例
デフォルトのスタイルを初期化
buttonタグには、デフォルトのスタイルが適用されています。このスタイルをリセットすることで、自分でスタイルを設定しやすくなります。
サンプルコード
button {
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
outline: none;
}上記のコードでは、border, background, padding, margin, font, color, cursor, outlineに対して、値を初期化しています。
表示例
普通のテキストと同じように見えます。
コメント