aタグを親要素のサイズに合わせるやり方と、aタグをbutton状にする調整法まとめ

Pocket
LINEで送る

初歩的なことなのですが毎回忘れてググるので、ちゃんとメモとしてアウトプットします。

aタグについておさらい

  • aタグはデフォルトの状態ではinline要素である
  • HTML5からはaタグでdivpといったブロック要素を囲んでもOK

XHTML時代にaタグでdivを囲んで、温厚なコーダーチームのリーダーを「囲むなって言いましたよね!!😡」とキレさせてしまったのも遠い昔、もう囲んでも怒られないんですね。
ちなみに、aタグでaタグを囲む、aタグでformを囲むのはNGです。

aタグを親要素のサイズに合わせる方法

aタグはデフォルトの状態ではinline要素であるため、CSSwidthheightといったサイズ指定をしても効きません。
なので、まずaタグにdisplay:block;あるいはdisplay:inline-block;を当てる必要があります。
親要素のサイズに合わせる場合、display:block;の方が混乱しないかと思います。

listの親要素と子要素リンク

example01-02: 普通のlistとaタグリンク

<ul class="example01-02">
  <li><a href="#">テキストリンクその1</a></li>
  <li><a href="#">テキストリンクその2</a></li>
  <li><a href="#">テキストリンクその3</a></li>
</ul>
ul.example01-02 { 
  list-style: none;
  padding-left: 0;
}
ul.example01-02 li {
  width: 300px;
  background: #877666;
  padding: 8px 20px;
  margin-bottom: 5px;
}
ul.example01-02 li a { 
  color:#fff;
}
Demo

もちろんリストのaタグ内のみがリンク範囲です。ここで使用している親テーマのunderstrapはデフォルトでaタグをhoverで半透明になります。

example01-03: aタグをblock要素にした

ul.example01-03 { 
  list-style: none;
  padding-left: 0;
}
ul.example01-02 li {
  width: 300px;
  background: #877666;
  padding: 8px 20px;
  margin-bottom: 5px;
}
ul.example01-02 li a { 
  display: block;
  height: 100%;  color:#fff;
}
Demo

aタグにdisplay: block; height: 100%;を設定したことで、親要素のliタグ内全域にリンク範囲が広がって……ませんね。

paddingの指定をli側にかけていたのが原因でした。

example01-04: paddingをaタグの方に付ける

ul.example01-04 { 
  list-style: none;
  padding-left: 0;
}
ul.example01-04 li {
  width: 300px;
  margin-bottom: 5px;
}
ul.example01-04 li a {
  display: block;
  height: 100%;
  background: #877666;
  padding: 8px 20px;
  color:#fff;
}
Demo

aタグの方にpaddingの指定を持ってきたついでに、backgroundの指定も移動させています。liaのどっちにbackgroundの指定を付けるかは、デザインや構成にも寄ったりするので、適時調整します。

example01-05: fontawesomeのアイコンをiタグで設置

さきほどのexample01-04にfontawesomeのアイコンを設置してみます。
<i class="fa fa-chevron-right"></i>を入れるだけです。fa-chevron-rightがアイコンの種類になります。
Freeでもたくさんの種類があります。

<ul class="example01-04">
  <li><a href="#"><i class="fa fa-chevron-right"></i>テキストリンクその1</a></li>
  <li><a href="#"><i class="fa fa-chevron-right"></i>テキストリンクその2</a></li>
  <li><a href="#"><i class="fa fa-chevron-right"></i>テキストリンクその3</a></li>
</ul>
Demo

そのままだとアイコンのサイズが大きい場合があるので、別途cssで該当箇所にfont-size:0.9em;など設定します。

example01-06: fontawesomeのアイコンをbefore要素で設置

基本的にexample01-04と同じhtmlとcssですが、before要素を追加します。

ul.example01-06 { 
  list-style: none;
  padding-left: 0;
}
ul.example01-06 li {
  width: 300px;
  margin-bottom: 5px;
}
ul.example01-06 li a {
  display: block;
  height: 100%;
  background: #877666;
  padding: 8px 20px;
  color:#fff;
}
ul.example01-06 li a:before {
  content: "\f14a";
  font-family: FontAwesome;
  margin-right: 3px;
}
Demo

beforeで指定したcontent: "\f14a";がアイコンの種類になります。


fontawesomeのサイトで使いたいアイコンをクリックすると、必要なコードがわかります。

divの親要素と子要素リンク

example01: デフォルト

<div class="example01">
  <a href="#">リンクです</a>
</div>
div.example01 { 
 width:300px;
 height:80px;
  background:#877666; 
}
div.example01 a { 
  color:#fff;
}
Demo

aタグに何も指定していないので、普通にaタグ内のみクリックできるようになっています。

example01-01: aタグをblock要素にして親要素のサイズに合わせる

<div class="example01">
  <a href="#" class="example01-01">リンクです</a>
</div>
div.example01 { 
 width:300px;
 height:80px;
 border:1px solid #877666;
}
a.example01-01 { 
  display: block;
  height: 100%;
}
Demo

aタグにdisplay:block; height:100%;が指定されたことで、親要素いっぱいにリンク範囲が広がりました(display:block;なのでwidth:100%;の指定は必要ない)。

テキストの位置を上下左右中央にしたい場合、親要素にtext-align:center;aタグに親要素の高さであるline-height:80px;を当てると真ん中になります。
詳しくは後述の「example02-08: height指定とline-height指定」をご参照ください。

親要素がカード状のとき(作成中)

カードの画像

カードのタイトル

ダミーテキストダミーテキスト

ボタン

↑がBootstrapのコンポーネントのカード、↓が自分で作ったカード。

プロフィール画像

やなぎ

札幌のWEB制作会社勤務。
WordPress修行中。
副業でイラスト書いたりしてます。

お問い合わせはこちらから→

こういうのも全体をクリックできるようにしたい時ありますよね。上記の例ではpタグ内にaタグが指定されていますが、外に移動させます。

この投稿ページ上だと、勝手にコードが書き換わってしまってうまく検証できないので、Demoページへ移動します(作成中)。

aタグをbutton状にする方法

buttonタグで設置するのが面倒くさいときもあるじゃないですか。aタグがbutton状になってくれれば、用が足りるのです。

デフォルトのaタグリンク

<a href="yanagi's memo">yanagi's memoへのリンク</a>
Demo

テキストリンク

example02-01: aタグにpaddingをつける

<a href="#" class="example02-01">テキストリンク</a>
a.example02-01 { 
  padding: 8px 20px; 
  background: #877666; 
  color:#fff; 
}
Demo

テキストリンク

分かりやすくするためbackgroundを指定しましたが、基本的にはaタグにpaddingを付けるだけです。

バリエーション展開

アレンジの仕方で以下のようにバリエーションが増えます(ざっくり解説なので、詳しくはChromeの「検証」等で見てみてください)。

example02-02: border-radiusでちょっと角丸

a.example02-02 {
  padding: 8px 20px; 
  background: #877666;
  color:#fff;
  border-radius: 5px;
}
Demo

テキストリンク

example02-03: border-radiusの数値を大きくするとまん丸の角丸

a.example02-03 {
  padding: 8px 20px; 
  background: #877666;
  color:#fff;
  border-radius: 50rem;
}
Demo

テキストリンク

example02-04: box-shadowでシャドウ

a.example02-04 {
  padding: 8px 20px; 
  background: #877666;
  color:#fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
Demo

テキストリンク

example02-05: hover時にopacityで半透明に

a.example02-05 {
  padding: 8px 20px; 
  background: #877666;
  color:#fff;
}
a.example02-05:hover, /*マウスオーバー時*/
a.example02-05:active, /*クリックした時*/
a.example02-05:focus /*クリックやタブで選択した時*/ {
  opacity: 0.4;
}
Demo

テキストリンク

understrapではデフォルトでこの処理がかかっているので、ここでは透過率を上げて差を出してみました。

example02-06: transitionを指定すると変化がほわっとしささる

前述のexample02-05だと一瞬で変化しますが、追加で変化の時間指定することでじんわり変化することになります。

a.example02-06 {
  padding: 8px 20px; 
  background: #877666;
  color:#fff;
  transition: 0.3s all;
}
a.example02-06:hover,
a.example02-06:active, 
a.example02-06:focus {
  opacity: 0.4;
}
Demo

テキストリンク

display:inline-block;登場

display:inline-block;を指定することで、サイズ指定やtransformの指定が効くようになります。

example02-07: width指定

a.example02-07 {
  display: inline-block;
  width: 300px;
  text-align: center;
  padding: 8px 20px; 
  background: #877666;
  color:#fff;
}
Demo

テキストリンク

example02-08: height指定とline-height指定

a.example02-08 {
  display: inline-block;
  height: 80px;
  line-height: 80px;
  text-align: center;
  padding: 0 20px; 
  background: #877666;
  color:#fff;
}
Demo

テキストリンク

テキストが1行で収まる場合、heightline-heightの数値を同じにすることで、縦の中央に文字が位置します(padding-toppadding-bottomは0に戻す)。

example02-09: display:flex; と align-items:center;

a.example02-09 {
  display: flex;
  align-items: center;
  width: 300px;
  height: 160px;
  text-align: center;
  padding: 0 20px; 
  background: #877666;
  color:#fff;
}
a.example02-09 span {
  flex: 1;
}
Demo


テキストリンク
テキストリンク


テキストが2行以上になる場合、positiontransformを使うやり方もあるんですが、ここではFlexboxで実装しています。
display:flex;はblock要素なので、width指定しないとデフォルトで横幅100%になります。
親要素にdisplay:flex; align-items:center;、子要素をspanで囲んでflex:1;を指定しています。

example02-10: hover時にtransformでちょっと動かす(transition付き)

a.example02-10 {
  display: inline-block;
  padding: 8px 20px; 
  background: #877666;
  color:#fff;
  transition: 0.3s all;
}
a.example02-10:hover,
a.example02-10:active, 
a.example02-10:focus {
  transform: translate(0, -3px);
}
Demo

テキストリンク

example02-11: bootstrapの場合

classでbtn(基本的な指定)とbtn-primary(背景色の指定)を付けます。角丸とかサイズとかバリエーションがありますがここでは省略します。

<a href="#" class="btn btn-primary">テキストリンク</a>
Demo

テキストリンク

fontawesomeでアイコンを付けたい

前述の
example01-05: fontawesomeのアイコンをiタグで設置
example01-06: fontawesomeのアイコンをbefore要素で設置
を参考にしてください。

Pocket
LINEで送る

back to top