タイトル

テキストテキストテキスト｡テキストテキストテキスト｡テキストテキストテキスト｡

リンクカードをHTMLとCSSでデザインしました｡デザインのみです｡テキストやURLは手作業が必要です｡さっそく､HTMLから｡

<div class="card-wrap">

<div class="card">

<div class="text">
  <h4>タイトル</h4>
  <p>テキストテキストテキスト｡テキストテキストテキスト｡テキストテキストテキスト｡</p>
</div>

<figure><img src="images/cloud.JPG" alt="画像"></figure>
<a href="https://rounin-samurai.com/"></a>
</div>
</div>

card-wrapで全体を囲んでいます｡cardの中に､テキストと画像がいます｡簡単なHTMLです｡リンクカードをクリックすると､当サイトのトップページに行きます｡aタグの部分にURLを書いています｡

SCSS

.card-wrap{
container-type: inline-size;
}

.card{
position: relative;
padding: 1rem;
display: flex;
width: 90%;
justify-content: space-between;
border: 1px solid #0067bb;
border-radius: 20px;
figure img{
width: 100px;
height: 100%;
object-fit: cover;
}
a{
position: absolute;
inset: 0;
}
h4{
margin: 0;
padding: 0;
font-size: 1rem;
}
.text{
width: 100%;
position: relative;
ul{
position: absolute;
top: 30px;
bottom: 0;
}
}

p{
margin: 0;
padding: 0;
font-size: 0.8rem;
position: absolute;
bottom: 0;
padding-right: 0.5rem;
top: 20px;
}

&:hover{
transition: 0.3s;
opacity: 0.5;
border: 1px solid red;
}
}

//-----------------コンテナクエリ--------------------------

@container (min-width:400px) {

.card{
width: 90%;
ul{
font-size: 0.9rem;
.title{
font-size: 1rem;
}
}
figure img{
width: 200px;
text-align: right;
}
p{
bottom: 0;
top: inherit;
}
}

}

card-wrapにcontainer-type:inline-sizeを書き､コンテナクエリを使えるようにします｡そのあと､書いていきます｡詳しい説明ははぶきますが､大まかに言うと､リンクカードのSCSS､リンクカード全体にリンクを張るため､cardにposition: relative､aにposition: absoluteとinset: 0を書くだけですね｡

デザインのみ

今回はデザインのみです｡URLやテキストを自動で入力できる訳ではありません｡ここは手作業です｡これが手間ですね｡当サイトは､自作のリンクカードを使っています｡テキストやURLは手作業ですね｡めんどくさいですが､リンクをリッチなデザインにしたいので､そうしています｡

今後も使いたい｡

さいごに

リンクカードはそれがあるだけでいい感じになります｡もし､こだわりたいと思ったら､お試しあれ｡バックアップを取ってからにしましょう｡対応は自己責任でお願いします｡