ボタンってどうやって作るの？
よくサイト上で見かける
「クリックすると、リンク先へ飛ぶ仕様になっているボタン」
ってありますよね？
あれを仕事で作らないといけなかったんですけど、HTMLのコード見ても、何がなんだか分からず途方に暮れたんですね・・・
コードって呪文みたいでワケワカメ・・・
ということで、ボタンの簡単な作り方について勉強してみました！
超基本のボタンHTMLコード
まず、ボタンを作るには
１ HTMLでボタンのコードを書く
２ CSSでデザインを整える
の２ステップが必要。
ボタンの一番簡単なHTMLのコードは、
<a href="リンク先" class="btn">ボタンテキスト</a>です。
これを基に、コードを書いてみます。
<a href="https://seed-and-bloom.com/" class="btn">あざらしあざ子のブログ</a>このコードをサイト上で表示すると、こんな感じ。
あざらしあざ子のブログただ、これだと少し味気ないですよね・・・・。
そんなときは、CSSでデザインのコードを加えて好きなようにカスタマイズできます♪
CSSでデザインを整える
たとえば、このようなコードを書くと、
<style>
.special-button{
display: inline-block;
padding: 15px 30px;
background-color: #e9f2fc;
color: black !important;
text-decoration:none;
border-radius: 10px;
font-weight: blue;
}
</style>
<a href="https://seed-and-bloom.com/" class="special-button">あざらしあざ子のブログ</a>さっきのシンプルすぎるボタンが・・・
あざらしあざ子のブログこんなボタンに変わります！
カラーやボタン、テキストの大きさを自由に変えられるので、サイトの雰囲気に合わせたボタンにできますね♪
ここでは勉強のためにhtmlのすぐ後にcssを書いてますが、
ワードプレスのcssのところにコードを書けば、サイト上のすべてのボタンのデザインを変えられます。
次はデザインの細かな部分について、勉強していきます。
コメント