ウェブ家の備忘録

ウェブデザイナーの備忘録

CSS : アイコン上に文字乗せてアイコン下に説明文

HTML CSS 


<div style="text-align:center;">
<a href="https://enjoynet.co.jp/free_snsicon/icon_nanasekurumi4/">
  <p><img width="200px" src="https://enjoynet.co.jp/icon/icon_menherachan04_02.jpg"></p>
  <p style="font-size: 11px;">使わせていただいたアイコンのページ</p>
</a>
</div>



<hr>



<head>
<style>
  .section {
    text-align: center;
  }
  .parent{
    width: 33%;/*3つ分*/
    float: left;
  }
  .icon{
    position: relative;/*相対位置への配置*/
  }
  .icon p{
    position: absolute;/*絶対相対位置への配置*/
    top: 90px;/*文字位置*/
    width: 100%;
    color: white;
  }
  .txt-contents{
    display: inline-block;
    width: 80%;
    font-size: 12px;
  }
</style>



<body>
<div class="section">

<div class="parent">
  <div class="icon">
    <img width="200px" src="https://enjoynet.co.jp/icon/icon_menherachan04_38.jpg">
    <p>1つ目</p>
  </div>
  <p class="txt-contents">長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。</p>
</div>

<div class="parent">
  <div class="icon">
    <img width="200px" src="https://enjoynet.co.jp/icon/icon_menherachan04_38.jpg">
    <p>2つ目</p>
  </div>
  <p class="txt-contents">長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。</p>
</div>

<div class="parent">
  <div class="icon">
    <img width="200px" src="https://enjoynet.co.jp/icon/icon_menherachan04_38.jpg">
    <p>3つ目</p>
  </div>
  <p class="txt-contents">長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。長いtxt。</p>
</div>

</div>
</body>