HTMLにおける画面遷移の方法には、formタグを使うものとaタグの属性でhref=””を設定する方法があるが、用途の違いを調べました。
formタグを使う場合
<form action="http//yamamoto.arkoak.com" method="get"> 次のページ </form>
このように記述することで、formタグでくくった中にあるinputタグの値を次のページに引き渡すことができます。また、method属性の値をpostに設定することで、URLに引き渡す値を表示させずに渡すことが可能です。
Aタグ(アンカータグ)を使う場合
<a href="http//yamamoto.arkoak.com"> 次のページ </a>
アンカータグを使う場合このように記述します。値をリンク先に渡したい場合は、URLの最後に?a=1&b=100などと変数名と値を書くことで、formタグ同様に値を渡すことはできます。
ここで本題であるが、訳あってinputタグのsubmitを使わずにアンカータグにクラス設定をすることで、ボタンにリンクを貼らなくてはいけなくなりました。そのままアンカータグにクラスを指定すれば、同じようなボタンができると考えていたが、なかなか上手くいかなかったので、その解決手法を調べました。
・HTML
<a href="http//yamamoto.arkoak.com" class="btn-link"> ページ先頭へ </a>
・CSS
.btn-link { text-align: center; background: #ccc; border:2px solid #333; width: 120px; height: 50px; font-size: 18px; color: #000; }
このようなスタイルシートで示したボタンにリンクを張りたい場合、アンカータグを使うと下のボタンのように下線が出てきたり、文字が上によってしまいます。下線はスタイルシートでtext-decorationプロパティにnoneを設定することで、解消されます。
ページ先頭へ
まず、paddingを使って余白を調節することを考えました。
padding-top: 20px;
一見上手く行ったように見えるが、ボタンが縦にのびてしまっています。どうすればいいか悩んだあげくマージンを負に設定して隙間を埋めることにしました。上下中央はとりあえずあきらめます。
.btn-link { display: block; text-decoration: none; padding-top: 20px; margin-top: -20px; }
上手く表示されていないかも知れませんが、chromeではちゃんと表示されることを確認しました。とりあえず、このボタンで妥協します。