hint-css1

今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ「Hint.css」のご紹介！

HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。

そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！


使い方！

利用方法はシンプルで、GitHubからファイルをダウンロードするか、以下のCDN経由でCSSライブラリを取得します。

https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.0.0/hint.min.css


HTMLの骨組みはこんな感じになるでしょう。

// index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hint.cssサンプル</title>
        <link rel="stylesheet" href="css/hint.min.css">
    </head>
    <body>
    </body>
</html>

基本的な準備はこれだけです！

あとは、通常のHTML要素に専用のクラス名を追記するだけで、ポップアップ表示が可能になります。


実際に試してみよう！

それでは、実際に文字テキストにポップアップ表示を組み込んでみたいと思います。

まず、サンプルとして「spanタグ」に専用のクラス名を付けてみたのがコチラ！

// index.html

<body>
    <p>こんにちは、<span class="hint--bottom">みなさん</span></p>
</body>

このように、クラス名へ「hint--」から始まる専用のキーワードを入れるだけで実現できるわけです。

ただし、このままだと何の情報もないポップアップ表示になってしまうので、好きなテキストを「data-hint」属性に追記します。

// index.html

<body>
    <p>こんにちは、<span class="hint--bottom" data-hint="お元気ですか？">みなさん</span></p>
</body>

この例では、「お元気ですか？」というテキストを表示することになります。


そして「index.html」をブラウザで確認すると、しっかりとポップアップが機能しているのが分かります！

hintcss-gifsample


さまざまなサンプルを試そう！

先ほどの例で、簡単にポップアップを表示することができました。

「Hint.css」では、他にも多彩なパターンの表示ができるように、あらかじめいくつかのクラス名が用意されています。

例えば、先ほどの「hint--bottom」というクラス名は、「hint--top」「hint--left」「hint--right」のように記載することで、ポップアップ表示の方向を変化させることができます。

hint-css3


また、「hint-error」「hint--success」「hint--info」のように記載すると、Bootstrapのように背景カラーも変更することができます。

以下に、サンプルを用意しているので、ぜひマウスオーバーして確認してみてください！

See the Pen http://codepen.io/webhacck/pen/VeXNxJ/'>「Hint.css」サンプル by webhacck (http://codepen.io/webhacck'>@webhacck) on http://codepen.io'>CodePen.

このサンプルで分かるように、スマホの場合は「マウスオーバー」という操作が無いので、リンクやボタンに「Hint.css」を使うことで、タップによるポップアップ表示が可能となるわけです。


このように、ほとんど覚えることもなく簡単に導入できることから、自分のブログやWebサービスのチュートリアルなどにも応用できるのではないでしょうか。

ご興味ある方は、ぜひ一度チェックしてみてはどうでしょうか？

・「Hint.css」公式サイト

タグ ：
Web制作
効率化
学習