【block要素に変更】aタグで基本のボタンを作る【day87】

HTML/CSS
2020.08.07

プログラミング独学day87のアウトプットは？

今日は

・【block要素に変更】aタグで基本のボタンを作る・

をアウトプットします！

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜2時に独学しています！

わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

【block要素に変更】aタグで基本のボタンを作る

今日は、<a>で作るボタンについてのアウトプットです。

クリ★スタさん（@cresta_design）のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)

上記の模写で作ったボタンを<a>で実装していきます。

<button>タグと<a>タグどちらを使うべき？

こちらのボタン。

もともと模写では<button>タグを使っていましたが、先生のコードレビューで<a>タグで良いのでは？というアドバイスがありました。

コードレビューについてはこちらです↓

【for初心者】コードレビュー前のセルフチェックリスト【day84】
プログラミング独学day84のアウトプットは？ 今日は ・【for初心者】コードレビュー前のセルフチェック をアウトプットします！ こんにちは。プログラミングでweb制作ができるようになりたいharuです。 2歳0歳の育児をしながら、22時...
happy-making.com
2020.08.06

 

<button>でも<a>でも、どちらも同じ見た目のボタンを作ることは可能ですが、

  • クリックで他のページへ飛ぶようにしたい👉<a>
  • クリックでJavaScriptを動かしたい👉<button>
  • フォームの送信・リセット👉<button>引用：CODE KICHEN buttonタグ より

調べてみると、「基本のボタンは<a>タグで作る」のが一般的という意見が多かったです。

 

<a>タグで作ると、音声読み上げのサイトではボタンとして認識されないという注意点はあります。

HTMLとCSSでボタンを作成する方法｜buttonタグやsubmit、linkでの作り方も
「ボタンってどうやってつくるの？」 「どうやったらいいボタンができるの？」 Webサイトでも、スマートフォンアプリでもよく見かけるボタンは、簡単に作成が可能です。そのため、制作に慣れた人も、「ボタン」について更に学ぶ知識 ...
creive.me

 

追記(2020.8.8)：

ツイートにあるように、

・role=”button”を付けることでボタンとして認識される(音声読み上げでも認知)
・tabindex=”0″ でキーボード操作でもフォーカスが当たるようになる

 

普段は<a>タグを使ってボタンの実装をおこなっていこうと思います。

 

<a>タグで基本のボタンを作る

実際に<a>タグでボタンを作っていきます。

HTML

コードレビューから、

・基本のボタンはbtnクラス
・色や中央揃えは、別クラスで対応するようにしています。

CSS

こちらのボタンが完成します

<a>タグでボタンを作るときの注意点

<a>タグでボタンを作るときは、inline要素であることに注意が必要です。

inline要素だと、

・widthやheightの指定ができない
・上下のmarginの指定もできない

そのため、たとえば下図のようなボタンとテキストの間に余白を入れることができません。
（スタイルは、paddingを使ってボタンの厚みを出している状態）

 

これをinline-block要素にするとmarginが効き、スタイルもwidthとheightを使うことができます。

 

marginが効かないだけでなく、上下の要素とボタンが重なってしまうこともあります。
<a>タグでボタンを作るなら、block要素にするのもセットです！

 

もう一つ例を出します。

ボタンの上のmargin:80pxが、ボタンと重なってしまい80pxも余白をとれていません。

これも、inline-blockに変更することで、正しくmarginを取ることができました↓

 

このように<a>‪タグでボタンを作る時はインライン要素に注意が必要です。
詳しくは、こちらがわかりやすかったです。

「aタグ（アンカータグ）だけでボタンを作りたい！」CSSの設定で高さと幅のあるボタンをaタグのみで作る方法
今回は意外と知らない人も居るaタグ（アンカータグ）だけで高さと幅のあるボタンの作り方をご紹介します。divタグで囲う必要はなく、スタイルの設定だけでaタグをボタンっぽく表示させます。
incloop.com

 

インラインブロック要素を中央揃えにする

今回は、<a>タグ（インライン要素）をインラインブロック要素に変更して、ボタンを作りました。

その<a>を囲った<div>に対して、text-align: center;

を使います。

最初の例でいうと、

<a>を囲っている<div class=”btn–center”>に対してtext-align:centerを記述します。

インライン要素を左寄せ・中央寄せ・右寄せする方法 - CSSテクニック - acky.info
text-alignを使ってインライン要素を左寄せ・中央寄せ・右寄せする方法を説明しています。
www.acky.info

 

ちなみに、<div>は本来ブロック要素なので、中央寄せにする場合はmargin:0 auto;を使います。

 

あとがき

<a>タグで作るボタンに慣れていきたいと思います。
また、スタイルをつけるとき、なぜかいつもpaddingを使っていました；
ブロック要素でwidth,heightを設定する方が楽だし一般的なようです。
今日は以上です。

 

Thanks：師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

スポンサーリンク