ウェブページに欠かせないボタン.なにかとあればボタンで考えがちなきょうこの頃.
HTMLには2種類のボタンがある.buttonタグとinput type=”button”である.これらはしばしば中央に寄せたくなる.検索してみると,次のようにするとよいと書かれている.
divで囲い,divに text-align:center; とスタイリングする.
もちろんこれで実現できるのだから有無をいわせない.すばらしい記事である.もう数えきれない開発者たちがこの記事のとおりdivでbuttonをラップしてインライン要素のセンタリングを紐づけてきた.
ここでなぜdivを増やさなければ実装できないままなのだろうという疑問がわく.
buttonに直接text-align:center;を紐づければよいではないか.
しかし,W3Cがそう策定しない正当な理由がある.
そもそもbuttonは次のように使うことが多い.
・異なるページへリンクするとき
・データを送信するとき
・切り替えるとき
つまり,buttonそれ自体では,これといって機能を持てず,ぺこぺこと押すだけの要素だ.buttonは他のタグによって機能を加えられて初めて有用な部品になる.
この「加える」という操作には,タグをタグでラップすることが必要だ.リンクさせるならaタグで,送信するならformタグで,切り替えるならJavaScriptなどでイベントを書くのが一般的である.
よって,buttonを使うときはほぼ必ず,別のタグでラップする.
ここで当初の疑問に戻ってみる.
なぜbuttonを中央寄せにするにはdivタグで囲わなければならないのか.
次のような答えが導ける.
aタグやformタグにtext-align:center;を紐づければよいのではないか.
やってみる.
<form action="#" class="button_form_center">
<input type="button" value="中央に来るformボタン">
</form>
<a href="#" class="button_a_center">
<button>中央に来るaボタン</button>
</a>
CSSは以下のとおり.
.button_form_center{ text-align: center; }
.button_a_center{ text-align: center; display: block;}
上記でbuttonはいずれも中央に来る.aタグではdisplay:block;にしなければならなかったが,formタグではtext-align:center;のみで中央に来た.
以上から,divタグで囲わなくても,aタグやformタグにスタイルを紐づければよいことがわかった.divの増殖を抑えることができそうだ.