HTMLとCSS

5回目 「HTMLとCSSでのボタンの作り方」

画像なしでつくれる!

今回はHTMLとCSSだけで「ボタン」を作ってみようと思います。
ボタンとは服に付いてる方ではなくて、スイッチの方「ポチッとな」の押すボタンのことです。
HPを漁ってるときにメニュー画面なんかにありますよね?

こんなの

とか…。
緑色の画像を貼り付けて作っているわけではなく、これらは全部文字テキストだけで作ることが可能です。

簡単なボタンの作り方

いきなり立体的なもの作ったりすると、何が何やらわかりにくいと思われるので
まず「四角い枠の箱」を作ることを意識して始めようと思います。

まずはHTML要素から!

<button>見本</button>

<button>タグ挟んで終了です…。早い、早いですがこれも一応「ボタン」です。

もうちょっと凝ったボタンの作り方

次にCSSを伴うHTML要素の作り方です。ボタンと言うからには押せば何かに繋がります。
使うタグは<a href>“エー・エイチレフ”。他の場所にリンクさせることを目的としたタグです。
あくまでHTML要素はリンクさせることを重点的に置いて、実際のボタンの形を作るのはCSSの役目になります。

<a href=”リンク先” class=”クラス”>ボタンの中の文字</a>

次に対応させるCSSは今回はこのようになります。

.クラス名{
color:文字の色;
back-ground: ボタンの色※;                
font-size: ボタンの中文字の大きさ;
padding: 余白;
width: 幅;
display: 表示の指定;
text-align: 文字位置;
text-decoration: テキストの装飾;

 見本

これでボタンが完成します。

上のCSSはあくまでボタンを作る一例でしかありません。
もっと立体的なものを作る場合や、ボタンを押した時のアクッションを付ける際には
別なCSSテキストと組み合わせてつくります。

注※back-groundは本来背景色指定の要素です。

アクション付きボタンを作ってみる

早速、さっきつくったボタンにアクションを付けて見たいと思います。
そのためにはもう一個CSSテキストを追加します。HTML最初に作ったCSSはいじらなくていいです。
下のは「ポチッとな」タイプこと、押し出すアクションができるCSSです。

.クラス名:アクションの種類{
-webkit-transform: translate; …Google、Safariで対応する変形移動
-ms-transform: translate; …Internet Explorerで対応する変形移動
transform: 変形移動させる値;
box-shadow:影の大きさの調整;
border-bottom:ボーダーの値;

見本

お気づきだとは思いますが、「transform」という要素が多く入っています。
これの役割は変形を示し、回転や拡大縮小、移動などの動きをもたせたい場合に使用します。
また、動きを持たせるために関数(XとかYとか)を使用します。

丸ボタンも作ってみる

四角いボタンが作れたのなら、またもうちょっとだけ応用して丸ボタンも作って見ましょう。
HTMLテキストは四角のときと変わりません。

<a href=”リンク先” class=”クラス”>ボタンの中の文字</a>

次にCSSです。

.クラス名{
color:文字の色;
background: ボタンの色;
font-size: ボタンの中文字の大きさ;
padding: 余白;
width: 幅; …高さと同じ大きさにする
height:高さ; …幅と同じ大きさにする
display: 表示の指定;
text-align: 文字位置;
text-decoration: テキストの装飾;
border-radius: 角の丸み; …50pxに設定する

見本

今回は情報量が多いですが、大丈夫だったでしょうか?
いつもはふわっとした説明ですが、少し専門的な説明の回になりました。
それでは、ここまでご覧いただきありがとうございました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)