WordPress整体院
主にwordpressのカスタマイズやトラブル対策
  1. ホーム
  2. > HTML/CSS
  3. > テーブルでセル全体をリンクする方法(上下中央揃えやセルの高さの変化にも対応版)
HTML/CSS
2019.07.09.

テーブルでセル全体をリンクする方法(上下中央揃えやセルの高さの変化にも対応版)

テーブルのセル内にテキストリンクを設置したときに、リンクテキストだけでなくセル全体がクリックできるようにしたいことってありますよね。

セル全体をクリック範囲にする方法は検索すると山ほど出てくるのですが、僕の検索の仕方が悪いのか

  • セルの高さに合わせて調整が必要
  • 上下中央揃えのことを考えていない

というように汎用性がイマイチな方法ばかりでした。「もうちょっと何とかならんのか?」と考えたのでその方法をご紹介します。

スポンサーリンク

やりたいこと

リンクを設置したtdにclass="cell-class"を指定するだけで高さが変わっても上下中央+セル全体がリンクになります。

テキストだけがリンク! セル全体がリンクだぞ!
改行を入れて2行分
の高さになったセル
上下中央+セル全体がリンク
改行を入れて
3行文になっても
自動的に対応
上下中央+セル全体がリンク

HTMLとCSSのソース

<table>
<tbody>
	<tr>
		<td>
			<a href="https://alive-website.com/notebook">テキストだけがリンク!</a>
		</td>
		<td class="cell-link">
			<a href="https://alive-website.com/notebook">セル全体がリンクだぞ!</a>
		</td>
	</tr>
	<tr>
		<td>
			改行を入れて2行分
			の高さになったセル
		</td>
		<td class="cell-link">
		<a href="https://alive-website.com/notebook">上下中央+セル全体がリンク</a>
		</td>
	</tr>
	<tr>
		<td>
			改行を入れて
			3行文になっても
			自動的に対応
		</td>
		<td class="cell-link">
			<a href="https://alive-website.com/notebook">上下中央+セル全体がリンク</a>
		</td>
	</tr>
</tbody>
</table>
.cell-link {
	padding: 0;
	height: 0;
}
.cell-link a{
	height: 100%;
	padding: 2px 5px;
	display: flex;
	align-items: center;
}

CSSの解説

まず、.cell-link の方から説明していきます。これはthやtdといったセル要素に適用されます。

多くのテーマやテンプレートではthやtdタグには余白が設定されているケースが多いのでそれを0にします。そうしないとクリック範囲がセル内一杯に広がりません。最初からpaddingがないテーマでは不要です。

2行目のheight:0;がこの記事の超重要ポイントです。

セル範囲を広げるにはaタグにdisplay:blockやdisplay:flexを指定しますが、なぜかtdやthタグの高さを数値指定しないとaタグの高さがセル内一杯に広がりません。さらに100%とかはダメでpxを使った具体的な数値で指定する必要があります。

thやtdタグに高さを指定しない場合、aタグのline-heightやpaddingを調整して高さをセルに合わせれば対応できまが、それを毎回やるのは面倒くさいですよね。

一方で、セルの高さを毎回数値設定するのも面倒くさいです。

幸いなことに、

  • セルの高さにどんな数であれ数値さえ指定しておけばa要素はセル内一杯に広がる
  • セルの高さは内容によって強制的に広がる

という仕様のようなので、セルの高さに任意の数値を設定しておけばOKとなります。

できるだけ汎用性を高くすることを考えると、セル内にどんなに小さなものが来ても対応できるように0としました。

次にaタグのスタイルです。

ネットで調べるとdisplay:blockとしている記事が非常に多いのですがこれだと上下中央揃えが効きません。paddingやline-heightで調整できないこともないですが汎用性がなく面倒くさいです。

この解決方法は簡単でaタグをflexboxにするだけです。そうすると中のテキストは子要素になるのでalign-items:centerが効きます。

さらに、これだけだと高さがテキストの高さになってしまうので、上下一杯に広がるようにheight:100%を指定します。

あとは余白を適当に設定すれば完成。

これで、どんなサイズにも対応できるセル一杯のリンクエリアになります。

簡単にできてユーザービリティも高いので是非使ってみてください。

スポンサーリンク
デジ部長 デジ部長 HTML/CSS

コメント

この記事へのコメントはありません。

コメントをどうぞ

返信をキャンセルする。

メールアドレスが公開されることはありません。

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

≪前の投稿
PHPでHEXをHSLに変換する
次の投稿≫
URLにパラメータとアンカーを併記したい場合の記述法

プロフィール

HN:デジ部長
整体院とパーソナルトレーニングをやっていますが、WordPressをいじっていたらそちらの方が楽しくなり、知り合いのサイト作成やテーマ作りなどをボチボチとやっています。
このブログはそのときの覚え書きなどが主な目的でやってます。

よく読まれている記事

  • Facebookページの管理者を削除する方法(2017年3月版)
  • テーブルでセル全体をリンクする方法(上下中央揃えやセルの高さの変化にも対応版)
  • ついにExcelでCSVファイルをUTF-8で保存出来るようになった!
  • MacのTimeMachineが遅い原因はカスペルスキーだった。そして解決策はこうだ!
  • WordPressでnextpageを使って分割した記事のページネーションのカスタマイズ法
  • WordPressでカテゴリIDを所得する時にはまった件

カテゴリー

  • HTML/CSS
  • javascript
  • Mac
  • PHP
  • PPC広告
  • SEO
  • WordPress
  • カスタマイズ
  • サイト管理関係
  • テーマ開発
  • パソコン全般
  • プラグイン
  • 思った事

トップ
Copyright© 2019-2022 WordPress整体院 all right reserved