CSS「-webkit-line-clamp」を使用して複数行にも対応した三点リーダー(…)を実装する
ブログなどの記事を一覧ページにも表示する場合、一行だと短すぎるけど全部出すのは長すぎる。…
不動産関連の採用サイトの改修に携わった際に使用した背景画像へのリンクの実装方法をメモ。
背景画像を一枚絵で設定している箇所に部分的にリンクを貼りたいとの要望があったのでCSS「position」プロパティで対応。
<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>
#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%; }