Webサイトのデザインを行う際などにとりあえずアテの画像が必要になることは多々あります。画像だけでなくテキストも必要でしょう。そうした時、あまり適当な文字だと実感がわきませんし、かといって作り込みすぎるのもよくありません。 そこで使ってみたいのがMockaです。Mockaはシンプルで格好良いplaceholderを提供します。

Mockaの使い方

実際に使う時のHTMLです。

<div class="mocka-container">
  <span class="mocka-media"></span>
  <span class="mocka-heading"></span>
  <span class="mocka-text"></span>
</div>

こうすると表示が次のようになります。

四角いグレーの枠ですが、なんとなくそれっぽく表示されているのが分かります。画像部分はアニメーションしながら表示されます。もちろんCSSなので大きさやカラーを変えるようなカスタマイズも可能です。

MockaはCSS製のオープンソース・ソフトウェア(MIT License)です。

Mocka - Simple, elegant content placeholder Chalarangelo/mocka: Simple, elegant content placeholder