ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート

Webページやスマホアプリを読み込む際に、ローディングのアニメーションを表示するのをよく見かけます。しかし、最近ではFacebookやSlackなどでインターフェイスプレビューとして、表示される予定のコンテンツをプレースフォルダーで先に表示しています。

表示される予定のコンテンツとして利用できる画像や見出しやテキストなどをプレースフォルダーで表示できる軽量のスタイルシートを紹介します。
そのまま使用してもよし、カスタマイズもCSSベースで簡単にできます。

サイトのキャプチャサイトのキャプチャ

mocka -GitHub

mockaのデモ

デモページでは、mockaでスタイルしたコンテンツを確認できます。

デモのキャプチャ

デモページ

mockaの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして、記述します。

CSSの中身はわずか、500bytesなので、HTMLに直接記述してもよいですね。

Step 2: HTML

ダミー画像、ダミーテキストを配置したい箇所に、HTMLを記述します。

  • .mocka-container
    ダミーのコンテナ
  • .mocka-media
    ダミーの画像
  • .mocka-heading
    ダミーの見出し
  • .mocka-text
    ダミーのテキスト

カスタマイズ

スタイルシートは非常にシンプルなので、スタイルを簡単に変更できます。

sponsors

top of page

©2018 coliss