WEB制作初心者の基本的なボタンコーディング

2020年9月10日2020年10月29日

おはようございます。hanzakiです

今回はwebコーディングの練習で、オーソドックスなボタンコーディングをしていきます

ボタンはどこのwebページでも使われるので、基本的なコーディングは覚えておきましょう

エディタはVSCを使用しています。使いやすくておすすめですよ

まずは、ボタンデザインを用意する

上記のようなベーシックな形のボタンを用意しました

HTML

<div class="buttons"><a href="#" class="buttons_a">ボタン</a></div>

HTMLは上記のように記述しています

CSS

.buttons {
    width: 160px;
    height: 70px;
    background: #3333D5;
}
.buttons_a {
    display: block;
    width: 100%;
    line-height: 70px;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

CSSはこのようにしています。

.buttonsでブロックの横幅と縦幅を指定、背景色を#222277で設定しています

.buttons_aではdisplayをblockにして、widthを100%にすることによって要素全体にリンク範囲を広げています。

line-heightと縦幅と同じ高さで指定し、text-align: centerにて左右上下の真中に配置しています

ボタンの角を丸くする

ボタンの角を丸くするにはborder-radiusを適用することで実現できます

border-radius: 20px 20px 20px 20px;

border-radiusは左上→右上→右下→左下の順番にそれぞれ値を指定できます、または値を一つにすると全体に適用できます

border-radius: 20px;

こちらの方がおなじ数値であればスッキリしますね

ここまでが基本的なフラットなボタンのコーディングになります。この形を基本に立体感をつけたり、動きをつけたりなどして、発展させていきます

シャドウでボタンに立体感を与える

おまけでボタンに立体感を与えていきましょう。

ボタンにborder-bottomを適用することで、立体感を表現できます

CSS

background: #3333D5;
border-bottom:5px solid #0F0F3A;

border-bottomに太めのピクセル、ベースの背景色を暗くした色を適用させると違和感なく立体感を表現できます。

まとめ

今回はオーソドックスなボタンのコーディングを解説しました。

コーディングは一つ一つのコードの組み合わせで、WEBサイトを構築していくので焦らずじっくり覚えていきましょう。