Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

「ホバー注釈」の作り方 / CSS (hover Annotation)

 

 ホバー注釈❶--- デフォルト

 
 

 

 

 

 ホバー注釈❷  --- (ボタン風/ 影(box-shadow) )

 
 
 

 ホバー注釈❸ --- ( 吹き出し + アニメーション (@keyframe ) )

See the Pen dXMWrd by Kazuma Tojo (@Kazumax) on CodePen.

 
 
 

文中に挿入する場合 

 

See the Pen 注釈-文中挿入 by Kazuma Tojo (@Kazumax) on CodePen.

 

 
 
早速試してみたい人は、そのままw3schoolsさんのオンライン・htmlエディターを使ってみるのもいいかもしれません。僕はよくお世話になっています✨
オンラインエディタは幾つか試してみましたが、w3schoolさんのものが1番安定している感じでした。また使いやすい!✨
    

   [via]Tryit Editor v3.0 -W3Schools.com

f:id:DDramonQ:20160613213047j:plain

 

 

作った理由

なぜ欲しかったかというと、注釈*1 ←コレの際、いちいちページ下部までジャンプというのは動きが大きく、「流れが少し中断されるから、余り望ましくないなぁ」と思っていたのです。
 
後で知ったのですが、通常の注釈の場合、注釈の数字に"カーソルOn"した際には、注釈文が右下に小さく表示されるのですね(′ʘ⌄ʘ‵) 普段はタブレットメインなので、全然知りませんでした😅w
 
せっかくHTMLで文章を読み書きするのなら、その特性を存分に活用しないとですね(๑˃ꇴ˂๑)و ̑̑
(また後日、このCSSのコードを載せておきまする_(( _๑´ω`)_🌟)
 

*1:Test

Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️