【CSS】CSSを使ってaタグでボタンを作る方法。

f:id:Kawan0116:20190924125345j:plain

かわんです。

今回はaタグでボタンを作る方法です。まずはHTMLから・・・。

<p class="button"><a href="#">詳細を見る</a></p>

なんて事はないHTMLです。クラス名はお好みで。今回は「button」にしています。分かりやすい名前でいいです。自分が分かればそれで・・・。

チームでコーディングを行うなら共通の理解が必要ですね。僕は1人でWebサイトを作っているで、自分が分かりやすい名前にしています。

次にCSSです。

.button a {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
width: 100%;
font-size: 10px;
}

ボタンのデザインをしています。この辺はお好みです。widthを変えるとボタンの幅を変えることが出来ます。僕の場合はボックス内のいっぱいで表示させたいので「width:100%」と指定しています。

なお、CSS用のファイルを作っています。なので、CSSのパスを間違うとCSSは上手く効きません。ま、書くまでもないことかもですが、念の為(笑)。

注意点

HTMLとCSSをいじるのでバックアップしてから試して下さい。また、これは僕の環境でOKな感じです。

もし上手くいかなかったらごめんなさい。他サイト様の記事をご確認下さい。

あと、自己責任でお願いします。

さいごに

ということで、色々と書いてみました。

今回はそんなに難しくないモノです。慣れている人なら、5分ほどでできるのではないかと・・・。

buttonタグがありますが、僕は使いません。理由は何となくです(笑)。

おしまい。