HTML&CSS

「HTMLのみで設置できるボタン」のガイドブック

HTMLを解説

タナトスです!

前回、投稿させていただいた記事の続編になります。

HTMLのみで設置できるボタン一覧_00266
HTMLのみで設置できるボタン一覧(CSS不要!)こんにちは!タナトスです! 今回は、コピペで使えるボタン一覧を作成しました😉 ただのボタン一覧ではありませんよ💡 ボタ...

この記事では、HTMLのみで使えるボタンを一覧表にして投稿しました。

今回は、「もう少しボタンのカスタムをしたい」という方々の為に、HTMLの解説をしていきます。

簡単ではありますが、お役に立てれば幸いです😉

注意
  • 携帯で見る時
    ホバーはPCで見た時だけの機能なので携帯では実装できません🙇‍♂️
    携帯の人はタップした時に少し薄くなるぐらいです。ボタンとしての機能は働きます💡
  • 編集する時
    動作確認はHTMLのみで実装するのでプレビューでは動きません。面倒ですが、「公開」して動作確認をしてください💡
    プラウザによっては機能しないこともあります。悪しからず💡

コードの使い方

よりわかりやすくする為に、コードを3つに分割しました💡

  1. リンクの指定
  2. ボタンのカスタム
  3. ホバーエフェクトのカスタム

ポイントだけご説明しようと思います😀

見方と使い方

色が付いているコードを解説してます💡
さらに、色付きコードはリンクを貼っているのでクリックすれば解説の所まで飛ぶようになってます✨

リンクの指定

ボタンを押したときに「どこのページに飛ぶのか」という指定と、飛んだ時の設定を行うことができます。

<div class="switch" style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #ff0000;border:1px solid #ff0000;box-shadow: 0 3px 5px rgba(0,0,0,.5);border-radius: 5px; font-size: 1.1em; font-weight: bold;color: #ffffff; text-decoration: none; padding: 0.5em 1.8em 0.5em 2em; transition: 0.5s;"

onMouseOver="this.style.background='#ffffff';this.style.color='#000000';this.style.boxShadow= 'none';this.style.border='1px solid #000000';"

onMouseOut="this.style.background='#ff0000';this.style.color='#ffffff';this.style.boxShadow= '0 3px 5px rgba(0,0,0,.5)';this.style.border='1px solid #ff0000';">赤から白</a></div>

 

a href=”リンク先URL”

ボタンをクリックした時に、外部のサイトページや、自分のサイトの別ページに飛ばすことができます。
任意のURLを入れてみましょう。
 

rel=”noopener noreferrer”

これはセキュリティに関するコードです。
リンク先を外部のサイトページに飛ばす時に重要視されます。
自分のサイトページに飛ばす場合は特に必要ありません。

  • rel=”noopener”
    リンク元(あなたのページのURL)を操作されるのを防ぐことができます。
  •  

  • rel=”noreferrer”
    リンク先に「どこからアクセスしてきたのか」というのを知らせないようにすることができます。
    電話で言う「非通知」と同じです。

特に理由がなければ、とりあえずrel=”noopener noreferrer”で大丈夫です。

 

target=”_blank”

同じタブで開くのか、違うタブで開くのか指定することができます。

  • target=”_self”
    同じタブで開く
  • target=”_blank”
    別タブで開く

必要に応じて変更しましょう。

ちなみに私は、
自分のサイトのページに飛ばす時は「target=”_self”
外部のサイトに飛ばす時は「target=”_blank”
にするようにしています。

 

ボタンのカスタム

ボタンのデザインを決めるHTMLの解説をしていきます。
 

<div class="switch" style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #ff0000; border:1px solid #ff0000; box-shadow: 0 3px 5px rgba(0,0,0,.5); border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 1.8em 0.5em 2em; transition: 0.5s;"

onMouseOver="this.style.background='#ffffff';this.style.color='#000000';this.style.boxShadow= 'none';this.style.border='1px solid #000000';"

onMouseOut="this.style.background='#ff0000';this.style.color='#ffffff';this.style.boxShadow= '0 3px 5px rgba(0,0,0,.5)';this.style.border='1px solid #ff0000';">赤から白</a></div>

 

赤から白

ボタンに表記する文字です。
好きな文字に変更して使ってください。
 

background: #ff0000;

HTMLカラーコードを変更して、ボタンを好きな色に変えることができます。

 

border:1px solid #ff0000;

ボタンの外枠の色と太さを変える事ができます。
基本的にボタンの色と同色にすることをオススメします。
もし外枠だけ違う色にしたい場合は、HTMLカラーコードで好きな色に変更してみましょう。
外枠を太くしたい場合は、「1px solid」の数字を上げて見てください。
 

box-shadow: 0 3px 5px rgba(0,0,0,.5);

ボタンの影をカスタムできます。

box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;

ここでは、「色 内側指定」に「rgba(0 0 0 .5) 」を指定することで影を透過させています。

 

border-radius: 5px;

ボタンに丸みを作ることができます。
もしパキッと真四角にしたい場合は、数値を0にすればOKです。
 

font-size: 1.1em;

文字のサイズを変更することができます。
ここでは「em」を使っていますが、「px」でも問題ありません。
 

font-weight: bold;

文字を太文字にすることができます。
必要なければ削除しても問題ありません。
 

color: #ffffff;

HTMLカラーコードを変更して、文字の色を変更できます。

 

text-decoration: none;

文字の装飾を「無し」にしてくれるコードです。
なぜこのコードがあるのかというと、「リンクの設定を行うと自動的にアンダーラインが引かれる」からです。
アンダーラインが引かれるとデザイン的に邪魔になるのでこのコードを使って消してるという訳です。
逆にアンダーラインを引きたい場合は、削除しましょう。
 

padding: 0.5em 1.8em 0.5em 2em;

ボタンの大きさを調整できます。

padding: 上側em 右側em 下側em 左側em;

「em」を使っているのはレスポンシブを考慮しているからです。
よく分からないという方はとりあえず「px」で設定してもいいと思います。
レスポンシブも考慮したい方は「em」も使えるようになることをオススメします。
 

ホバーエフェクトのカスタム

ボタンにはホバーエフェクトを設定してます。

今回HTMLのみで実装するにあたって使ったコードが「onMouseOver」と「onMouseOut」です。
簡単に説明すると、

onMouseOver → マウスポインターを置いた時の動作
onMouseOut → マウスポインターをどかした後の動作

この二つのコードの使い方も簡単に説明していきますね

もし「ホバー機能は必要ない」という方は削除して使ってください。

 

<div class="switch" style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #ff0000;border:1px solid #ff0000;box-shadow: 0 3px 5px rgba(0,0,0,.5);border-radius: 5px; font-size: 1.1em; font-weight: bold;color: #ffffff; text-decoration: none; padding: 0.5em 1.8em 0.5em 2em; transition: 0.5s;"

onMouseOver="this.style.background='#ffffff';this.style.color='#000000';this.style.boxShadow= 'none';this.style.border='1px solid #000000'; "

onMouseOut="this.style.background='#ff0000';this.style.color='#ffffff';this.style.boxShadow= '0 3px 5px rgba(0,0,0,.5)';this.style.border='1px solid #ff0000';">赤から白</a></div>

 

transition: 0.5s;

変化の速度を変更できます。
数値を上げれば動作がゆっくりになります。
 

onMouseOver

this.style.background=’#ffffff’;

ホバー時のボタンの色を変更することができます。

 

this.style.color=’#000000′;

ホバー時の文字色を変更することができます。

 

this.style.boxShadow= ‘none’;

ホバー時に影を消しています。
これにより、ボタンが押し込まれたように見せています。
できればそのまま変更しないのをオススメします。
 

this.style.border=’1px solid #000000′;

ホバー時にボタンの外枠の色と太さを変える事ができます。
外枠の色は「ホバー時の文字色」と同色にするのがオススメです。
 

onMouseOut

this.style.background=’#ff0000′;

ホバーが終わった後のボタン色を変更することができます。
できればホバー前のボタン色と同色がオススメです。
 

this.style.color=’#ffffff’;

ホバーが終わった後の文字色を変更することができます。
できればホバー前の文字色と同色がオススメです。
 

this.style.boxShadow= ‘0 3px 5px rgba(0,0,0,.5)’;

ホバーが終わった後の影を変更することができます。
できればホバー前の影と同じ設定がオススメです。
 

this.style.border=’1px solid #ff0000′;

ホバーが終わった後のボタンの外枠色と太さを変える事ができます。
できれば外枠は「ホバー前のボタンの外枠色と太さ」と同じにするのがオススメです。
 

まとめ

以上、HTMLのみで実装できるボタンの解説でした😄

この記事を書いたことで私自身かなり勉強になりました💡

HTMLのみでボタンを作るメリットは、CSSでホバーのコードを組む必要がないということです。

しかし、ホバーの演出をもっと変更したい場合は、CSSでコードで組んだ方が幅が広がるようです。

より凝ったホバーエフェクトにしたい方はぜひCSSも勉強して見てください❗️

もしこの記事が役に立ったらブックマークしてくれたら嬉しいです🤗