かわんです。
今回は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タグがありますが、僕は使いません。理由は何となくです(笑)。
おしまい。