スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS3で簡単なツールチップを作成する方法

CSS3で簡単なツールチップを作成する方法

投稿日:2013年6月6日   レベル:-    ソフトウェア:CSS3

このチュートリアルではCSS3で簡単なツールチップを作成する方法について紹介します。


Step1:はじめに

ツールチップは画像やテキスト上にカーソルを持ってくるだけで、ユーザーに追加の情報を与えることができる素晴らしい方法です。
例えば、デザインの邪魔になること無く、画像の短い説明文やリンク用の長い記述を表示したり、あるいは、サイト訪問者の満足度を高めるような役立つ情報を盛り込むことができます。

Step2:リンクの設定

ここでは、HTMLとCSSを使った簡単なツールチップでハイパーリンクのtitleタグを表示する方法をご紹介します。

まずはリンクの簡単なマークアップを作成することから始めましょう。
ツールチップのコンテンツとなるタイトルを作成し、クラスを指定してください。

<a title="このツールチップの説明を記入します" class="tooltip"a>CSS3 Tooltip</aa>

次のステップではツールチップのクラスの基本的なスタイルを指定します。

.tooltip{
display: inline;
position: relative;
}

このままではツールチップはrelativeのポジションを使って、リンクと一列に並んでいるだけです。




Step3:デザインの設定

次にツールチップの本体を角丸ボックスにして、リンクの上にフロートするように配置したいと思います。

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

ここではマウスオーバーした際に要素を指定する:hoverセレクタを使って、リンクを指定し、:afterセレクタで選択した要素の後にコンテンツを挿入します。
背景色には黒を80%の不透明度で設定し、RGBAのカラーコードをサポートしていないブラウザ用にはダークグレーの背景色を用意しました。

わずかに丸みがかった角はborder-radiusの特性を使用し、テキストの色は白にしました。
最後に、ツールチップボックスをリンクの左に合わせ、少しpaddingを加えました。

Step4:contentプロパティの設定

スタイルや配置に続いて、contentプロパティも設定しました。

content: attr(title);

このプロパティを使えば、文字列、メディアファイル、要素の属性といった任意の内容を挿入できますが、ここではリンクのtitle 属性を挿入しました。

Step5:調整

これで、リンクの上にマウスを持ってくると、ツールチップが現れ、リンクタイトルとして設定したテキストを表示します。
しかし一つ問題があります。
このままではtitleの情報が2度表示されています。
これは、一つはツールチップによるもの、もう一つはブラウザによるものです。
これを修正するために、HTMLに少し変更を加えます。

<a href="#" title="This is some information for our tooltip."a><span title="More"a>CSS3 Tooltip</spana>

ここでやったのは、リンクテキストを独自のtitle属性を持ったspanタグで囲んだということです。
これで、リンクの上にカーソルが来るとspanタグに記述されたtitleがブラウザには表示されます。

最後に、スタイルの仕上げとして、ツールチップの底に矢印を加えます。
これは :before セレクタとborder スタイルによって実現します。

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

矢印の効果にはborderのハックを使います。左右のborderを透明にして、borderの幅を整えるのです。
また、矢印がツールチップボックスの底に来るように配置しました。

Step6:完成

これで終わりです。
カーソルを合わせることで要素のtitleタグが現れる簡単なツールチップです。
画像のaltタグにも使えますし、お好きな場所にテキストがポップアップするようにCSSに記述することも可能です。

引用:Web Design Library  翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング