初歩的なことなのですが毎回忘れてググるので、ちゃんとメモとしてアウトプットします。
目次
aタグについておさらい
aタグはデフォルトの状態ではinline要素であるHTML5からはaタグでdivやpといったblock要素を囲んでもOK（※）
XHTML時代にaタグでdivを囲んで、温厚なコーダーチームのリーダーを「囲むなって言いましたよね！！😡 」とキレさせてしまったのも遠い昔、もう囲んでも怒られないんですね。
ちなみに、aタグでaタグを囲む（入れ子）、aタグでformを囲むのはNGです。
aタグでdivやpなどブロック要素を囲む場合は、aタグをinline要素のままではなく、CSSでdisplay:inline-block;あるいはdisplay:block;を当ててblock要素に変えておくと不具合発生防止になります。
aタグを親要素のサイズに合わせる方法
前述した内容の繰り返しにもなりますが、aタグはデフォルトの状態ではinline要素であるため、CSSでwidthやheightといったサイズ指定をしても効きません。
なので、まずaタグにdisplay:block;、display:inline-block;を当ててblock要素にする必要があります。
また、aタグにdisplay:flex;を当てて、親要素のサイズに合わせつつ、子要素の配置を指定する方法もあります。この場合、HTMLの構造がシンプルになっていいですね。
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タグ内のみがリンク範囲です。
このブログで使用しているWordpressの親テーマunderstrapはデフォルトでaタグをhoverで半透明になります。
example01-03: aタグをblock要素にした
ul.example01-03 {
list-style: none;
padding-left: 0;
}
ul.example01-03 li {
width: 300px;
background: #877666;
padding: 8px 20px;
margin-bottom: 5px;
}
ul.example01-03 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の指定も移動させています。liとaのどっちにbackgroundの指定を付けるかは、デザインや構成にも寄ったりするので、適時調整します。
example01-05: Font Awesomeのアイコンをiタグで設置
さきほどのexample01-04にFont Awesomeのアイコンを設置してみます。
この記事ではFont Awesomeを使える状態になっている前提で進めます。また、ここでの記述はFont Awesome 4のやり方となっております。
Font Awesomeに関して詳細は以下の記事をご覧ください。
<i class="fa fa-chevron-right"></i>を入れるだけです。fa-chevron-rightがアイコンの種類になります。
<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;など設定します。
Font Awesome 4で使用できるアイコンを探すときは下記チートシートが便利です。
使用したいアイコンの「copy」をクリックし、タブを開きます。
HTMLタグで使用するときは、「HTML Tag」（hoverでタグが表示されます）をクリックすることで、タグをコピーすることができます。
そのコピーしたタグをペーストしてタグを貼れば表示されます。
追記201126:Font Awesome5の画面を貼っておりました。。修正しました！
example01-06: Font Awesomeのアイコンをbefore要素で設置
基本的にexample01-04と同じhtmlとcssですが、before要素を追加します。
この記事ではFont Awesomeを使える状態になっている前提で進めます。また、ここでの記述はFont Awesome 4のやり方となっております。
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: "\f105";
font-family: FontAwesome;
margin-right: 3px;
}Demo
beforeで指定したcontent: "\f105";がアイコンの種類になります。
example01-07: Font Awesomeのアイコンを右寄せで配置
example01-06のaにposition:relative;、a:beforeにposition:absolute;を指定して、あとはa:beforeの方の位置を調整します。
ul.example01-07 {
list-style: none;
padding-left: 0;
}
ul.example01-07 li {
width: 300px;
margin-bottom: 5px;
}
ul.example01-07 li a {
position: relative;
display: block;
height: 100%;
background: #877666;
padding: 8px 20px;
color:#fff;
}
ul.example01-07 li a:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
content: "\f105";
font-family: FontAwesome;
margin-left: 3px;
}Demo
example01-08 & 09: 画像アイコンをbefore要素で設置
矢印アイコンだってデザイン調整して独自のものを配置したい！そんな場合、example01-07のa:beforeにbackgroundで画像アイコンを指定します。
あとはテキストのpadding、画像アイコンのサイズをwidthとheightで指定します。
ul.example01-08 {
list-style: none;
padding-left: 0;
}
ul.example01-08 li {
width: 300px;
margin-bottom: 5px;
}
ul.example01-08 li a {
position: relative;
display: block;
height: 100%;
background: #877666;
padding: 8px 20px 8px 45px;
color:#fff;
}
ul.example01-08 li a:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
content: "";
background: url("/images/bnr_blog_arrow.svg") no-repeat;
width: 24px;
height: 24px;
}Demo
example01-09は画像アイコンを右寄せにする場合です。下記CSSはexample01-08との変更点のみ。
ul.example01-09 li a {
padding: 8px 45px 8px 20px;
}
ul.example01-09 li a:before {
right: 10px;
}Demo
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指定」をご参照ください。
aタグをbutton状にする方法
buttonタグで設置するのが面倒くさいときもあるじゃないですか。aタグがbutton状になってくれれば、用が足りるのです。
デフォルトのaタグリンク
<a href="#">テキストリンク</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行で収まる場合、heightとline-heightの数値を同じにすることで、縦の中央に文字が位置します（padding-topとpadding-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行以上になる場合、positionとtransformを使うやり方もあるんですが、ここでは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
Font Awesomeでアイコンを付けたい
前述の
example01-05: Font Awesomeのアイコンをiタグで設置
example01-06: Font Awesomeのアイコンをbefore要素で設置
を参考にしてください。
親要素がカード状のとき
ブログやメディアサイトで使いたいのが、カード状のパネル全体をクリッカブルにする方法。
aタグの位置によってやり方は色々ありますが、ここではaタグがカードの中の要素の一つの場合のやり方です。
aタグでカード全体を囲む場合は、display: block;やdisplay: inline-block;で試してみてください。
example03-01: カード（パネル）の場合
まずは普通の状態のカード。↓はこのブログの一覧ページ右側にある自分で作ったカードです。
Demo
<div class="box prof" style="width: 300px; border:1px solid #ddd;">
<p class="icatch"><img src="http://ponsyon.com/wp/wp-content/uploads/2019/07/bg.jpg" alt=""></p>
<p class="circle_icon"><img src="http://ponsyon.com/wp/wp-content/uploads/2019/07/profile.jpg" alt="プロフィール画像"></p>
<p class="name">やなぎ</p>
<p class="txt">札幌のWEB制作会社勤務。<br />
WordPress修行中。<br />
副業でイラスト書いたりしてます。</p>
<p class="txt"><a href="https://ponsyon.com/wp/contact">お問い合わせはこちらから→</a></p>
</div>（Wordpressの投稿ページはpタグを容赦無く突っ込んでくる仕様なので、↑のソースは無駄にpタグがいますが無視してください。）
上記の例ではテキストのお問い合わせはこちらから→の部分だけがaタグでクリック範囲に指定されています。
このクリック範囲を親要素全体に広げるために、親要素にposition: relative;を、aタグにposition: absolute;をかけtop: 0; left: 0; right: 0; bottom:0;で親要素ぴったりに引き伸ばします。
ここでは親要素に.example03-01を付加して、CSSで調整しています。
div.example03-01 {
position: relative;
transition: 0.3s all;
}
div.example03-01:hover,
div.example03-01:active,
div.example03-01:focus {
opacity: 0.7;
box-shadow:0px 1px 8px 4px #eaeaea;
}
div.example03-01 a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}Demo
分かりやすくするために、hoverエフェクトでopacity: 0.7; box-shadow:0px 1px 8px 4px #eaeaea;をかけてみています。
また、全体がクリッカブルになったので、aタグ内のテキストは削除しています。この辺りはケースバイケースですね。
example03-02: bootstrapの場合
↓がBootstrapのカードコンポーネントです。
<div class="card mb-3" style="width: 300px;">
<img class="card-img-top" src="http://ponsyon.com/wp/wp-content/uploads/2019/07/bg.jpg" alt="カードの画像">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">ダミーテキストダミーテキスト</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>Demo
投稿ページは一々pタグが付加されてしまうので、若干表示が崩れていますが、脳内でpタグ外してご覧ください。
上記の例はデフォルトの状態なのでボタンの箇所のみがクリッカブルエリアですが、ここではカード全体をクリッカブルにしたい。
簡単なんです。
aタグのclassにstretched-linkを追加するだけです。
<div class="card mb-3" style="width: 300px;">
<img class="card-img-top" src="http://ponsyon.com/wp/wp-content/uploads/2019/07/bg.jpg" alt="カードの画像">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">ダミーテキストダミーテキスト</p>
<a href="#" class="btn btn-primary stretched-link">ボタン</a>
</div>
</div>Demo
カード全域がクリッカブルになりました。
Bootstrapのコンポーネントである.cardにposition: relative;が付加されており、そこを基準に擬似要素が覆い被さる形となります。
この場合、ボタンは必要ない場合が多いので、その場合はaタグのclassからbtn btn-primaryと「ボタン」というテキストを外してしまいましょう。
hoverエフェクトをうまく使えば（半透明にしたり、shadowを活用したり）すれば、雰囲気も出ますね。
以下の例は、親要素へのhoverでopacity: 0.7; box-shadow:0px 1px 8px 4px #eaeaea;をかけてみています。