CSS「position」を使って背景画像にリンクを設置

不動産関連の採用サイトの改修に携わった際に使用した背景画像へのリンクの実装方法をメモ。
背景画像を一枚絵で設定している箇所に部分的にリンクを貼りたいとの要望があったのでCSS「position」プロパティで対応。

HTML

<section id="chart">
    	<figure>
		<div class="pc_img"><img src="画像リンク" alt=""></div>
		<div class="sp_img"><img src="画像リンク" alt=""></div>
		<ul class="links">
			<li><a href="リンク先URL" target="_blank" title="リンク先1"></a></li>
			<li><a href="リンク先URL" target="_blank" title="リンク先2"></a></li>
			<li><a href="リンク先URL" target="_blank" title="リンク先3"></a></li>
		</ul>
	</figure>
</section>

CSS

#chart figure{
	background: #f2eeeb;
	padding: 120px 0;
	text-align: center;
	position: relative; }
#chart figure .pc_img{
	width: 1080px;
	margin: 0 auto; }
#chart figure .pc_img img{
	width: 100%; }
#chart figure .sp_img{
	display: none; }
#chart figure .links{
	position: absolute;
	width: 1080px;
	top: 1120px;
	left: 0;
	right: 0;
	margin: auto; }
#chart figure .links li a{
	width: 530px;
	height: 50px;
	display: block;
	margin: 0 0 20px 550px; }

/* 以下はスマホ */

#chart{
	padding: 0 0 70px; }
#chart figure{
	background: #f2eeeb;
	padding: 60px 5%;
	position: relative; }
#chart figure .pc_img{
	display: none; }
#chart figure img{
	width: 100%; }
#chart figure .links{
	width: 90vw;
	position: absolute;
	top: -webkit-calc((90vw * 0.15 * 44) + 60px);
	top: calc((90vw * 0.15 * 44) + 60px);
	left: 5vw; }
#chart figure .links li a{
	width: 13.6vw;
	width: 15%;
	height: -webkit-calc(90vw * 0.15 * 9);
	height: calc(90vw * 0.15 * 9);
	display: block; }
#chart figure .links li:nth-of-type(1) a{
	position: absolute;
	right: 0; }
#chart figure .links li:nth-of-type(2) a{
	position: absolute;
	right: 19.1vw;
	right: 17%; }
#chart figure .links li:nth-of-type(3) a{
	position: absolute;
	right: 38.2vw;
	right: 34%; }

• 株式会社ジェクトワン – 組織図 – 会社紹介 –