文字がしっかり中心にくるおすすめリンクボタンの作り方！

WEBサイトのコーディングを初めた頃につまづいてしまっていた、文字の縦方向（上下方向）のセンタリング。

横方向（左右方向）のセンタリングであれば、ブロック要素の中でtext-alignを使ってサクッとできてしまうんですが、これが縦方向（上下方向）となった途端に急に難易度上がりませんか？

リンクボタンを作っているときによく陥ってたなーなんて思い出しながら、今日は私のおすすめの方法をご紹介したいと思います。

WEBサイトの構成やdisplay要素の状態にも左右される内容なので、そのあたりも注意しながら書いて行きましょう。

今回の完成イメージはこちら

aタグにdisplay blockを設定する

リンクボタンのベースになるaタグは初期値ではインライン要素になっているので、事前にdisplay:block ;を設定しておきます。

こうすることで、aタグの箱の大きさや形を自由に指定できるようになります。

また、display blockにすることで、文字以外の部分をクリックしてもリンク先へ飛べるようになります。

ボタンになっていても、文字しかリンクがかかってない・・・

という悲しい悩みもこれで解決できますね。

この方法は別の機会でご紹介するブログカードなどでも使える技術ですので、必須くらいの感じで設定しておきましょう。

ただ、すべてのaタグでリンクボタンのような箱にしたい訳ではないと思いますので、リンクボタン用のクラスを用意して設定して行きましょう。

ここでは.link_btnとします。

.link_btn {
  display: block;
}

リンクボタンのベースになる設定を書く

次にリンクボタンの文字サイズや横幅を設定してきましょう。

文字サイズはfont-sizeで、横幅はmax-widthとmin-widthで設定しておきます。

ここでは文字サイズを18pxにしてあります。

.link_btn {
  display: block;
  font-size: 18px;
  max-width: 350px;
  min-width: 300px;
}

横幅をmax-widthとmin-widthで設定しているのは、リンクボタンが小さくなりすぎず、大きくもなりすぎないようにするためです。

それはなぜかというと、リンクボタンはそもそもCTA（コールトゥアクション）として、WEBサイトの訪問者にクリックしてもらうために設置するものだからです。

ですので、リンクボタンの中の、文字の長さに依存しないようにしたいのです。

つまり、文字数が少なすぎてリンクボタンが小さくなるのを防ぎ、ちゃんと目立ってくれるサイズを維持したいのです。

max-widthを設定する理由は、レスポンシブ対応までを考えた設計にするためです。

max-widthを設定していないと、PC表示になったときに、ボタンが画面幅いっぱいに広がってしまいます。

大きさの幅を制限することで、サイト全体の統一感も保てますし、メンテナンスもとても楽になります。

縦方向（上下方向）と横方向（左右方向）をセンタリングする

いよいよ本題です。

横方向のセンタリングはtext-align:center ;で設定します。

縦方向のセンタリングはネットで調べると文字の上下にpaddingを設定する方法や、aタグの中に文字用のタグを作ってflex-boxなどで縦方向（上下方向）のセンタリングする方法など、色々出てきます。

どれが間違っている、というわけではないので使いやすいものを選ぶのが一番だと思いますが、私のおすすめはline-heightを使う方法です。

その理由は1行で、縦方向（上下方向）のセンタリングとリンクボタンの高さが設定できるからです。

構造もaタグのみですみますし、paddingは上下左右の余白量の設定があるので、このあとリンクボタンのデザインに変化を出したいときに扱いづらくなるためです。

.link_btn {
  display: block;
  font-size: 18px;
  max-width: 350px;
  min-width: 300px;
  text-align: center;
  line-height: 3em;
}

line-heightで設定する時のポイント

line-heightの数値をemの単位で設定するのがポイントの1つです。

emを使うことで、「リンクボタンのベースになる設定を書く」で設定した文字サイズを使って高さを設定できるようになります。

どういうことかと言うと、1em = 18pxになっているということです。

今回文字サイズは18pxに設定していて、line-heightは3emにしているので、簡単に行ってしまうと、３文字分の高さになっているということです。

しかも、line-heightは行間なので、その文字を中心にして、高さ方向にどれくらいのスペースを開けるかという数値になります。

なので、3em、つまり３文字分の高さがその文字を中心にあるという状態なので、文字の上下にはちょうど１文字分ずつのスペースが開いているということになります。

line-heightを使う理由

そして、paddingが調整しづらいと言った理由がここにあります。

例えば、固有のデザインをリンクボタンにつけるために、クラスを重ねてつけたとします。

そして、文字サイズを変えたとすると、リンクボタンの高さと上下の余白が文字サイズに合わせて自動的に変わってくれるのです。

特に強調したいリンクボタンや、逆に少し控えめなリンクボタンを設置することになってもサクッと対応できてしまいます。

デザインを整えて完成

最後にデザインを整えて完成です。

簡単に説明すると

ここでは背景をグレー、文字を白にしています。

マウスがリンクボタンに乗った時は、0.3sの速さでボタン全体の色が80%まで薄くなる様になっています。

._ds01 {
  color: #fff;/*文字の色*/
  background-color: #333;/*リンクボタンの色*/
  border-radius: 2em;/*角を丸くする*/
  transition: 0.3s;/*マウスオンした時の変化のスピード*/
  position: relative;/*矢印アイコン位置の基点になる要素として指定*/
}
._ds01::after {
  /*疑似要素のbeforeを使って表示する*/
  font-family: "Font Awesome 6 Free"; /*アイコンフォントを使う*/
  font-weight: 900; /*無料版（solid）は900に設定する*/
  content: "\f054"; /*使用したいアイコンフォントのコードを入れる*/
  position: absolute;/*矢印アイコンを基点の要素に対して自由に配置できるようにする*/
  right: 1em;/*矢印を基点の要素の右から1文字文内側に動かす*/
}
._ds01:hover {
  opacity: 0.8;/*マウスオンしたときに８０％まで要素を薄くする*/
}

これで、サンプルのリンクボタンが完成です。

固有のデザインをするために._ds01というクラスを付与しています。

付与するクラスごとにデザインを変えれば、目的に合わせて様々なデザインのリンクボタンが簡単に作れます。

ぜひ、色々試して見てくださいね。

まとめ

色々なデザインのリンクボタンを紹介しているサイトがたくさんあります。

ただ、そういったリンクボタンの仕組みや構造はすべて今回ご紹介した内容の発展形です。

今回の基礎をしっかり抑えて、コピペで作ったリンクボタンをアレンジしたり、問題が発生したときにも速やかに対処できるようになっておきましょうね。

独学に行き詰まりや限界を感じてきた方におすすめです。