【全種類】コピペでできる広告エリアのデザインサンプル一覧[HTML/CSS]

<div class="t8-adarea-1">

</div>

.t8-adarea-1 {
    width: 300px;
    height: 250px;
    background: #808080;
}

<div class="t8-adarea-2">

</div>

.t8-adarea-2 {
    width: 200px;
    height: 200px;
    background: #808080;
}

<div class="t8-adarea-3">

</div>

.t8-adarea-3 {
    width: 468px;
    height: 60px;
    background: #808080;
}

<div class="t8-adarea-4">

</div>

.t8-adarea-4 {
    width: 120px;
    height: 600px;
    background: #808080;
}

<div class="t8-adarea-5">

</div>

.t8-adarea-5 {
    width: 320px;
    height: 50px;
    background: #808080;
}

<div class="t8-adarea-6">
  <a href="">商品のリンク</a>
</div>

.t8-adarea-6 a{
    font-weight: bold;
    text-decoration: underline;
}

<div class="t8-adarea-7">
  <div class="t8-adimg-7"><img src="画像のURL"></div>
  <a href="商品のリンク">商品のリンク</a>
</div>

.t8-adarea-7 {
    width: 150px;
}

.t8-adimg-7 {
    width: 150px;
    height: 150px;
    background: #808080;
}

<div class="t8-adarea-8">
<div class="t8-adimg-8">
<figure class="t8-adfigure-8">
<img src="画像のURL">
</div>
<div class="t8-adbody-8">
<a href="商品のURL">商品のリンク</a>							
<div class="t8-admeta-8">
<button class="t8-adbtn-8">Amazon</button>
<button class="t8-adbtn-8">Rakuten</button>
</div>
</div>

.t8-adarea-8 {
    display: flex;
}

.t8-adarea-8 a{
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 10px;
}

.t8-adimg-8 {
    width: 150px;
    height: 150px;
    border-radius: 20%;
    background: #808080;
}

.t8-adbody-8 {
    margin-left: 30px;
}

.t8-adbtn-8{
    width: 100px;
    margin-top: 20px;
    margin-right: 10px;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}