Search

mootoolsベースツールチップ

  1. MooFirm〔画像の上にフィルムをかけるようなフェード効果きのツールチップ〕
  2. Mootools - Product Highlights!〔画像をダイナミックにツールチップ表示〕
  3. MooTools 1.2 Tooltips: Customize Your Tips〔ユニークなツールチップ〕
  4. Mootools Docs - Plugin/Tips〔半透明の角丸ツールチップ、scriptaculous.js使用〕

MooFirm
画像の上にフィルムをかけるようなフェード効果きのツールチップ

unknown

MooFilm v0.55

Firefox 2、Safari 3、IE 6、IE 7、Opera 9
MIT
［CSS］moofilm.css
［JS］mootools.js v1.2、mootools.moofilm.55.js

画像の上にフィルムをかけるようなフェード効果付きでツールチップを表示するJSライブラリ。

設置イメージ設置イメージ
HEAD 
<link rel="stylesheet" href="moofilm.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="mootools-1.2-core-yc.js" charset="utf-8"></script>
<script type="text/javascript" src="mootools.moofilm.55.js" charset="utf-8"></script>
<script type="text/javascript">
  window.addEvent('domready', function() {
    var credits = new MooFilm();
  });
</script>
<style type="text/css">
  #demo { margin:0; padding:0; list-style:none; background-color:#000; overflow:hidden; }
  #demo li { margin:0; padding:0; display:inline; height:1px; }
  #demo li a { display:block; margin:10px 0 10px 10px; float:left; }
  .use_film img { width:133px; height:100px; }
</style>
HTML 
<ul id="demo">
  <li>
    <a class="use_film" href="画像のリンク先" target="_blank" title="タイトル">
      <img src="画像URL" alt="" /><div class="use_credits">テキスト</div>
    </a>
    <a class="use_film" href="画像のリンク先" target="_blank" title="タイトル">
      <img src="画像URL" alt="" /><div class="use_credits">テキスト</div>
    </a>
    ・・・
  </li>
</ul>
MooFilmの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>MooFilm v0.55 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css">
        <link rel="stylesheet" href="/content/lib/moofilm/moofilm.css" type="text/css" media="screen" />
        <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-core-yc.js"></script>
        <script type="text/javascript" src="/content/lib/moofilm/mootools.moofilm.55.js"></script>
        <script type="text/javascript">
            window.addEvent('domready', function() {
                   var credits = new MooFilm();
            });
        </script>
        <style type="text/css">
            #demo { margin:0; padding:0; list-style:none; background-color:#000; overflow:hidden; }
            #demo li { margin:0; padding:0; display:inline; height:1px; }
            #demo li a { display:block; margin:10px 0 10px 10px; float:left; }
            #demo li a img { width:133px; height:100px; }
        </style>
    </head>
    <body>
        <h1><a href='http://openwb.de/scripts/moofilm/'>MooFilm v0.55</a> | 設置サンプル</h1>
        <p>▼画像にマウスオーバーするとツールチップが表示されます。</p>
        <ul id="demo">
            <li>
                <a class="use_film" href="http://www.flickr.com/photos/22559849@N06/2973155055" target="_blank" title="Doughnuts">
                    <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" alt="" />
                    <div class="use_credits">by PJ</div>
                </a>
            </li>
            <li>
                <a class="use_film" href="http://www.flickr.com/photos/22559849@N06/2971768652/" target="_blank" title="Giottoのケーキ">
                    <img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda_m.jpg" alt="" />
                    <div class="use_credits">by PJ</div>
                </a>
            </li>
            <li>
                <a class="use_film" href="http://www.flickr.com/photos/22559849@N06/2974008614/" target="_blank" title="くまさんケーキ">
                    <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="" />
                    <div class="use_credits">by PJ</div>
                </a>
            </li>
        </ul>
    </body>
</html>

Mootools - Product Highlights!
画像をダイナミックにツールチップ表示

unknown

Mootools - Product Highlights!

MIT
mootools.js v1.2、mootools-more.js v1.2

mootools.jsを使用して、画像をダイナミックにツールチップ表示する方法が掲載されています。 元画像とサムネイル画像は、それぞれ別ブロックにグループ化して記述します。 元画像とサムネイル画像を関連付けるために、対応する画像同士のimg要素のalt属性に同じ名前を指定する必要があります。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="mootools-1.2-core-yc.js" type="text/javascript"></script>
<script src="mootools-1.2-more.js" type="text/javascript"></script>
<script type="text/javascript">
  window.addEvent('domready', function() {
    var myPages=$$('.page');
    var myBubbles=$$('.bubble');
    myBubbles.setStyle('opacity', 0);
    $('bubbleWrap').setStyle('visibility','visible')
    myPages.each(function(el, i) {
      el.set('morph', {link:'cancel'});
      el.addEvents({
        'mouseenter':function(){ myBubbles[i].morph({'opacity':1,'margin-top':'-15px'}); },
        'mouseleave':function(){ myBubbles[i].morph({'opacity':0,'margin-top':0}); }
      });
    });
  });
</script>
<!-- CSS -->
<style type="text/css">
  #siteWrap { width:318px; height:315px; position:relative; background:#000; margin-bottom:1em; overflow:hidden; }
  #pageWrap { position:absolute; z-index:5; top:240px; left:0; }
  #psdPage { margin-right:0; float:left; cursor:pointer; }
  #netPage { margin-right:0; float:left; cursor:pointer; }
  #audioPage { float:left; cursor:pointer; }
  #bubbleWrap { position:absolute; z-index:10; left:0; top:15px; }
  .bubble { position:absolute; }
  .bubble img { width:318px; height:240px; display:block; }
  .clear { clear:both; }
  .page { width:106px; height:75px; display:block;}
  .page img { width:100%; }
</style>
HTML 
<div id="siteWrap">
  <!-- 元画像表示領域 -->>
  <div id="bubbleWrap" style="visibility: hidden;">
    <div class="bubble"><img src="元画像URL" alt="DOUGHNUTS" /></div>
    <div class="bubble"><img src="元画像URL" alt="CAKE" /></div>
    <div class="bubble"><img src="元画像URL" alt="CAFEEAT" /></div>
    ・・・
  </div>
  <!-- サムネイル表示領域 -->>
  <div id="pageWrap">
    <div class="page" id="psdPage"><a href="#"><img src="サムネイル画像URL" alt="DOUGHNUTS" /></a></div>
    <div class="page" id="netPage"><a href="#"><img src="サムネイル画像URL" alt="CAKE" /></a></div>
    <div class="page" id="audioPage"><a href="#"><img src="サムネイル画像URL" alt="CAFEEAT" /></a></div>
    ・・・
  </div>
</div>
UniTipの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Mootools - Product Highlights! | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="/content/lib/mootools/mootools-1.2-core-yc.js" type="text/javascript"></script>
        <script src="/content/lib/mootools/mootools-1.2-more.js" type="text/javascript"></script>
        <script type="text/javascript">
            window.addEvent('domready', function() {
                /* Create variables (in this case two arrays) representing our bubbles and pages */
                var myPages=$$('.page');
                var myBubbles=$$('.bubble');
                /* Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container    */
                myBubbles.setStyle('opacity', 0);
                $('bubbleWrap').setStyle('visibility','visible')
                /* Add our events to the pages */
                myPages.each(function(el, i) {
                    el.set('morph', {link:'cancel'});
                    el.addEvents({
                        'mouseenter':function(){ myBubbles[i].morph({'opacity':1,'margin-top':'-15px'}); },
                        'mouseleave':function(){ myBubbles[i].morph({'opacity':0,'margin-top':0}); }
                    });
                });
            });
        </script>
        <style type="text/css">
            #siteWrap { width:318px; height:315px; position:relative; background:#000; margin-bottom:1em; overflow:hidden; }
            #pageWrap { position:absolute; z-index:5; top:240px; left:0; }
            #psdPage { margin-right:0; float:left; cursor:pointer; }
            #netPage { margin-right:0; float:left; cursor:pointer; }
            #audioPage { float:left; cursor:pointer; }
            #bubbleWrap { position:absolute; z-index:10; left:0; top:15px; }
            .bubble { position:absolute; }
            .bubble img { width:318px; height:240px; display:block; }
            .clear { clear:both; }
            .page { width:106px; height:75px; display:block;}
            .page img { width:100%; }
        </style>
    </head>
    <body>
        <h1><a href='http://nettuts.com/javascript-ajax/create-a-simple-powerful-product-highlighter-with-mootools/'>Mootools - Product Highlights!</a> | 設置サンプル</h1>
        <div id="siteWrap">
            <div id="bubbleWrap" style="visibility: hidden;">
                <div class="bubble"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="DOUGHNUTS" /></div>
                <div class="bubble"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="CAKE" /></div>
                <div class="bubble"><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="CAFEEAT" /></div>
            </div>
            <div id="pageWrap">
                <div class="page" id="psdPage"><a href="#"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_t.jpg" alt="DOUGHNUTS" /></a></div>
                <div class="page" id="netPage"><a href="#"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" alt="CAKE" /></a></div>
                <div class="page" id="audioPage"><a href="#"><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_t.jpg" alt="CAFEEAT" /></a></div>
            </div>
        </div>
        <p>▲サムネイル画像にマウスオーバーすると拡大画像が表示されます。</p>
    </body>
</html>

MooTools 1.2 Tooltips: Customize Your Tips
ユニークなツールチップ

unknown

MooTools 1.2 Tooltips: Customize Your Tips

mootools.js v1.2、mootools-more.js v1.2

mootools.jsを使用したツールチップのカスタマイズ方法が掲載されています。 ツールチップ部分のCSSを変更して、画像を変えるだけでユニークなツールチップを表示することができます。 ツールチップの内容にはHTML文を指定することができます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="mootools-1.2-core-yc.js" charset="utf-8"></script>
<script type="text/javascript" src="mootools-1.2-more.js" charset="utf-8"></script>
<script type="text/javascript">
  window.addEvent('domready', function() {
    var myTips = new Tips($$('.tipz'), {className:'tooltip',
      initialize: function(){ this.tip.setStyle('opacity', 0); },
      onShow: function () { this.tip.fade('in'); },
      onHide: function() { this.tip.fade('out'); }
    });
  });
</script>
<!-- CSS -->
<style type="text/css">
  /* MooTools 1.2 Tooltips: Customize Your Tips */
  .tip { width:298px; background:transparent url("/content/lib/mootools/tip-text.gif") repeat-y 0 0; }
  .tip-top { background:transparent url("/content/lib/mootools/tip-top.gif") no-repeat 0 0; width:298px; height:15px; }
  .tip-title { color:#e95e25; font-weight:bold; margin:0 10px 0 15px; }
  .tip-text { color:#000; padding:10px 10px 10px 15px; }
  .tip-bottom { background:transparent url("/content/lib/mootools/tip-bottom.gif") no-repeat left bottom; width:298px; height:85px; }
</style>
HTML 
<!-- リンク -->
<a href="リンク先URL" class="tipz" title="タイトル" rel="ツールチップの内容">タイトル</a>
<!-- 画像 -->
<img class="tipz" title="タイトル" rel="ツールチップの内容" src="画像URL" alt="" /></p>
MooTools 1.2 Tooltips: Customize Your Tipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>MooTools 1.2 Tooltips: Customize Your Tips | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css">
        <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-core-yc.js"></script>
        <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-more.js"></script>
        <script type="text/javascript">
            window.addEvent('domready', function() {
                var myTips = new Tips($$('.tipz'), {className: 'tooltip',
                    initialize: function(){ this.tip.setStyle('opacity', 0); },
                    onShow: function () { this.tip.fade('in'); },
                    onHide: function() { this.tip.fade('out'); }
                });
            });
        </script>
        <style type="text/css">
            /* MooTools 1.2 Tooltips: Customize Your Tips */
            .tip { width:298px; background:transparent url("/content/lib/mootools/tip-text.gif") repeat-y 0 0; }
            .tip-top { background:transparent url("/content/lib/mootools/tip-top.gif") no-repeat 0 0; width:298px; height:15px; }
            .tip-title { color:#e95e25; font-weight:bold; margin:0 10px 0 15px; }
            .tip-text { color:#000; padding:10px 10px 10px 15px; }
            .tip-bottom { background:transparent url("/content/lib/mootools/tip-bottom.gif") no-repeat left bottom; width:298px; height:85px; }
        </style>
    </head>
    <body>
        <h1><a href='http://davidwalsh.name/mootools-12-tooltips-customize'>MooTools 1.2 Tooltips: Customize Your Tips</a> | 設置サンプル</h1>
        <p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
            <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
            <dl>
                <dt>Ajax</dt>
                    <dd>
                        <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tipz" title="XMLHttpRequest" rel="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tipz" title="DHTML" rel="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                        <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                        <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tipz" title="出典" rel="<img src='/content/img/ajax/wikipedia.png' style='margin:0 5px 5px 5px;' align='left' alt='' />ウィキペディア フリー百科事典<br>http://ja.wikipedia.org/wiki/Ajax">出典: フリー百科事典『ウィキペディア（Wikipedia）』</a></cite>
                    </dd>
            </dl>
        </blockquote>
        <p>▼画像にマウスオーバーするとツールチップが表示されます。</p>
        <p><img class="tipz" title="クリスピー・クリーム・ドーナツ" rel="新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん<strong>「クリスピー・クリーム・ドーナツ」</strong>。ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ" src="/content/img/pic1-thumb.png" alt="" /></p>
    </body>
</html>

Mootools Docs - Plugin/Tips
半透明の角丸ツールチップ、scriptaculous.js使用

unknown

Mootools Docs - Plugin/Tips

MIT
mootools-1.2-core-yc.js、mootools-1.2-more.js

mootools.jsを使用した半透明の角丸ツールチップ。 要素にマウスオーバーした時にツールチップを表示するには、InterfaceのTipsクラスを使用します。 

<a href='#' class='tipz' title='タイトル' rel='ツールチップの内容'>リンクテキスト</a>
設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="mootools-1.2-core-yc.js" charset="utf-8"></script>
<script type="text/javascript" src="mootools-1.2-more.js" charset="utf-8"></script>
<script type="text/javascript">
  window.addEvent('domready', function() {
    var myTips = new Tips($$('.tipz'), {className: 'tooltip',
      initialize: function(){ this.tip.setStyle('opacity', 0); },
      onShow: function () { this.tip.fade('in'); },
      onHide: function() { this.tip.fade('out'); }
    });
  });
</script>
<!-- CSS -->
<style type="text/css">
  /* mootools - tooltip */
  .tooltip { width:200px; color:#fff; }
  .tip-title { font-weight: bold; color: #9fd4ff; padding:10px 10px 5px 10px; background:url("/content/lib/mootools/bg.png") top left; }
  .tip-text { color:#fff; font-size:.9em; padding:5px 10px 10px 10px; background:url("/content/lib/mootools/bg.png") bottom right; }
  .tip-title a, .tip-text a { color:#fff; text-decoration: none; }
</style>
HTML 
<!-- リンク -->
<a href="リンク先URL" class="tipz" title="タイトル" rel="ツールチップの内容">タイトル</a>
<!-- 画像 -->
<img class="tipz" title="タイトル" rel="ツールチップの内容" src="画像URL" alt="" />
Mootools Docs - Plugin/Tipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Mootools Docs - Plugin/Tips | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css">
        <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-core-yc.js"></script>
        <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-more.js"></script>
        <script type="text/javascript">
            window.addEvent('domready', function() {
                var myTips = new Tips($$('.tipz'), {className: 'tooltip',
                    initialize: function(){
                        this.tip.setStyle('opacity', 0);
                    },
                    onShow: function () {
                        this.tip.fade('in');
                    },
                    onHide: function() {
                        this.tip.fade('out');
                    }
                });
            });
        </script>
        <style type="text/css">
            /* mootools - tooltip */
            .tooltip { width:200px; color:#fff; }
            .tip-title { font-weight: bold; color: #9fd4ff; padding:10px 10px 5px 10px; background:url("/content/lib/mootools/bg.png") top left; }
            .tip-text { color:#fff; font-size:.9em; padding:5px 10px 10px 10px; background:url("/content/lib/mootools/bg.png") bottom right; }
            .tip-title a, .tip-text a { color:#fff; text-decoration: none; }
        </style>
    </head>
    <body>
        <h1><a href='http://mootools.net/docs/Plugins/Tips'>Mootools Docs - Plugin/Tips</a> | 設置サンプル</h1>
        <p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
            <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
            <dl>
                <dt>Ajax</dt>
                    <dd>
                        <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tipz" title="XMLHttpRequest" rel="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tipz" title="DHTML" rel="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                        <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                        <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tipz" title="出典" rel="<img src='/content/img/ajax/wikipedia.png' style='margin:0 5px 5px 5px;' align='left' alt='' />ウィキペディア フリー百科事典<br>http://ja.wikipedia.org/wiki/Ajax');">出典: フリー百科事典『ウィキペディア（Wikipedia）』</a></cite>
                    </dd>
            </dl>
        </blockquote>
        <p>▼画像にマウスオーバーするとツールチップが表示されます。</p>
        <p><img class="tipz" title="クリスピー・クリーム・ドーナツ" rel="新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん<strong>「クリスピー・クリーム・ドーナツ」</strong>。ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ" src="/content/img/pic1-thumb.png" alt="クリスピー・クリーム・ドーナッツ" /></p>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women