Webページ作成の際のダミー画像を可愛らしい子猫にしてくれるplacekitten

この記事は、2011年7月20日初出のものを2019年にリライトしました。

webページを作る際、画像のサイズは決めてあるもの、どの画像にするか未定というケースがしばしばあり、「横440px 縦150px」などと書いたダミーの画像を貼っておくことがあります。しかしこの状態でクライアントに見せてもパッとしない。そんなときに可愛い子猫の写真をダミー画像として用意してくれるのがplacekittenというwebサービス。

使い方は簡単、横444px、縦150pxの画像なら、imgタグのsrcに" https://placekitten.com/444/150 "のように、横サイズ、縦サイズを順に記述するだけで、そのサイズで表示してくれます。また、" https://placekitten.com/g/444/150 "のように「/g」のディレクトリを挟めば、モノクロ画像で表示してくれます。

placekitten:https://placekitten.com/

placekitten
dummy images

CSSソース

<table class="t670">
  <tr>
    <td colspan="2" width="444">
      <img src="https://placekitten.com/444/150" alt="" height="150" width="444" border="0">
    </td>
    <td  width="207">
      <img src="https://placekitten.com/207/150" alt="" height="150" width="207" border="0">
    </td>
  </tr>
  <tr>
    <td width="230">
      <img src="https://placekitten.com/g/230/100" alt="" height="100" width="230" border="0">
    </td>
    <td width="210">
      <div align="center" style="font-size:24px;color:#999;font-family: serif;line-height:1.6;">
placekitten <span style="font-size:18px;">の</span><br>dummy images</div>
    </td>
    <td rowspan="2" width="207">
      <img src="https://placekitten.com/207/224"  alt="" height="224" width="207" border="0">
    </td>
  </tr>
  <tr>
    <td colspan="2" width="444">
      <img src="https://placekitten.com/440/120" alt="" height="120" width="440" border="0">
    </td>
  </tr>
</table>

 

 

 

 

 

 

 

inserted by FC2 system