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

HTML/CSS

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

今日は

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

をアウトプットします!

 

 

 

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

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

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

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

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

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

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

こちらのボタン。

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

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

 

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

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

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

 

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

 

追記(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>タグ(インライン要素)をインラインブロック要素に変更して、ボタンを作りました。

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

を使います。

最初の例でいうと、

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

 

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

 

あとがき

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

 

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

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

タイトルとURLをコピーしました