aタグを親要素いっぱいに適用する方法！3選！疑似要素がすごい | 福岡のホームページ制作はマリオ君にお任せ

本日はホームぺージ制作でリンクを張る際に使用するaタグを親要素いっぱいに適用する方法をご紹介させていただきます。

凄く簡単な方法2つと、少し中級者向けの疑似要素を使ったテクニックの計3個のやり方をご説明させていただきます。

aタグに横幅やパディング（内側の余白）の命令をＣＳＳでしているのに思うようにサイズが変わらなかったりはみ出でてしまうと悩んでいる方や、パソコンでは親要素全体にリンクを張ってスマホでは文字だけにリンクを張りたい（リンクする範囲を変更したい）と思っているワンランク上のテクニックを使用したい中級者様向けの記事となっております。

aタグはインライン要素

簡単にaタグの説明をさせていただきます。

サイト内の別のページにリンクをするときに使用したり、外部のホームページにリンクするときに使用するaタグですが、ほんの少しだけよく使うdivタグやpタグや見出しのh1～6タグとは違いがあります。

aタグは先ほどよく使うその他のタグdivタグとか（ブロック要素）とは違いインライン要素となります。なにが違うかというと、横幅が100％でなかったり、改行されないなどの違いがあります。

インライン要素に直接横幅を指定したり、パディング（内側の余白）を指定してもうまく動いてくれません。横幅がきかなかったり、パディングを入れたら囲っている要素をはみ出たりと・・・。

それではどうすればいいの下記にてご説明させていただきます。

その1：ブロック要素にする

aタグを親要素いっぱいに適用する方法の簡単なやりかたその1はインライン要素であるaタグをブロック要素にする方法です。

まずはインライン要素のまま横幅とパディング（内側の余白を入れた状態がこちら。
わかりやすく親要素にあたるdivにクラスoyayousoが適用し、中にaタグが入っています。

HTML

<div class="oyayouso">
	
	<a href="">aタグに囲われいる文字</a>
	
</div>

CSS
はこちら

.oyayouso{

	width: 300px;
	background: #DDD;
}
a{
	background: #F00;
	padding: 20px;
	width: 300px;
	color: #FFF;
}

上記の設定だとこんな感じになります。

赤色の部分はaタグでネズミ色の部分が親要素であるdivになっています。

aタグにはoyayousoと同じ横幅width300pxが入っていますが、親要素のねずみ色より小さいので適用されていないのがわかりますね。

またパディングはきいていますが親要素からはみ出ておかしな感じになっています。

ではこれを親要素であるdiv.oyayousoぴったりにするにはどうするのかというと

ずばりaタグをブロック要素にすればすべて解決です。

簡単ですね。
こんな感じ

.oyayouso{

	width: 300px;
	background: #DDD;
}
a{
	background: #F00;
	padding: 20px;
	color: #FFF;
	display: block;
		
}

aタグにdisplay: blockを入れるだけです。（aタグのwidthは不要になったので消しました）

これでブロック要素になり横幅もいっぱいに広がり、はみ出ていたパディングもはみでなくなりました。

aタグが親要素の横幅いっぱい（親要素の横幅300px）まで広がってoyayousonoねずみ色が見えなくなりました。
成功ですね。

aタグをブロック要素にすればいつも通り！！

ちなみに少し変わったやり方でいうと
ブロックにする方法とは別にフレックスを適用しても同じ感じになります。
こんなかんじのCSS

a{
	background: #F00;
	padding: 20px;
	color: #FFF;
	display: flex;
			
}

aタグをフレックスにしてもできちゃう

フレックスがでてきたのですこし脱線して親要素に高さがあってその親要素の上下左右いっぱいにしてかつ中央寄せにする方法はこんな感じ

a{
	background: #F00;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
	

上下中央よせの定番のflex、align-items: center、justify-content: centerをいれてあとは親要素の高さ一杯にするためのheight: 100%をいれたら完成です。下記の画像は親要素に高さ300pxを入れています。

その2：aタグで囲む

続いてはテクニックでも何でもないですが、そもそも要素そのものをaタグで囲ってしまうのもひとつのやり方です。

HTML5はaタグで要素を囲っても問題ないようなので文字だけにaタグを使用するのではなく要素を囲ってしまえば簡単に大きなエリアでリンクを張ることができます。

先ほどのHTMLは

<div class="oyayouso">
	
	<a href="">aタグに囲われいる文字</a>
	
</div>

でしたが
逆にしてaタグで囲ってしまえばOKです。
こんな感じ

<a href="">
	<div class="oyayouso"></div>
</a>

簡単ですね。

少し発想を変えるだけで簡単にaタグを親要素いっぱいにすることができました。

そもそもaタグで囲っちゃう

その3：中級編・PCとスマホでリンク範囲を変える！疑似要素

最後はパソコンで見た時とスマホで見た時のリンク範囲を変える方法です。

これ使わないようで以外に最新情報の日付やちょっとしたボタンに使用したりして地味に実戦で使うテクニックです。

文字だけでリンク範囲を変えるというとすごく簡単な感じがしますが、少しだけ頭を使わなければいけません。

それではやっていきます。
まずは詳しく見るだけにリンクをしたい時の
HTMLとCSSはこんな感じ

HTML

<div class="hako">
	<p><img src="img/keshiki.jpg" alt=""></p>
	<p class="copy">
	文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
	</p>
	<a href=""><p class="btn">詳しく見る</p></a>
</div>	

CSS

.hako{

	width: 300px;
	padding: 20px;
	border:2px solid #222;
	
}
		
.copy{
    padding: 20px 0;
}		

.btn{

    background: #32B488;
    padding: 10px 20px;
    text-align: center;
    color: #FFF;
    border-radius: 30px;
}
a{
	text-decoration: none;
	
}

通常の書き方ですね。
リンクをしたい詳しく見るをaタグで囲っている通常の書き方です。

これを詳しく見るだけでなく全部を囲っているdiv（クラス名hako)すべてにリンクをしたい場合は疑似要素を使います。

リンクを張りたい要素(今回は.hakoが適用されたdiv)にposition: relativeを適用してaタグに縦横100％の疑似要素をposition: absoluteで設定したらOKです。

aタグで使用する疑似要素もリンクとしてみなされるのでそれを利用したテクニックです。

HTMLはそのままでCSSはこちら

.hako{

	width: 300px;
	padding: 20px;
	border:2px solid #222;
	position: relative;
	
}
		
.copy{
    padding: 20px 0;
}		

.btn{

    background: #32B488;
    padding: 10px 20px;
    text-align: center;
    color: #FFF;
    border-radius: 30px;
}
a{
	text-decoration: none;
	
}
a::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;

}		

上記CSSで.hakoが適用されたdivすべてがリンク要素になりました。
これをメディアクエリなどを使用してPCとスマホで使い分ければOKです。

リンクの要素の範囲を変える場合は、上記の様に疑似要素を使って対応が可能です。

下記はPC（768px以上）なら要素全部にリンク、スマホ（768px以下）なら詳しく見るだけにリンクをするCSSです。

.hako{

	width: 300px;
	padding: 20px;
	border:2px solid #222;
	position: relative;
	
}
		
.copy{
    padding: 20px 0;
}		

.btn{

    background: #32B488;
    padding: 10px 20px;
    text-align: center;
    color: #FFF;
    border-radius: 30px;
}
a{
	text-decoration: none;
	
}
a::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;

}		

		
@media screen and (max-width: 768px) {

	a::before{
		display: none;

	}		
}

768px以下になったら疑似要素をdisplay: noneで消しています。

一度覚えてしまえば簡単ですね。

リンクの範囲を変える時は疑似要素で

まとめ

いかがでしたでしょうか？

いまさらそんな当たり前なこと言うなよっていう内容でしたが、初めのうちは意外に躓きやすいポイントでしたので今回記事にさせていただきました。

またアブソリュートを使ってリンクの範囲を変える方法はちょっとこだわったUIのホームページ制作には欠かせませんので是非試してみてください。

それではまた。