jQuery plugin要素のスライド
- Coda-Slider
- AnythingSlider〔HTMLコンテンツをスライドショー表示〕
- bxSlider〔コンテンツスライダー、フェード切替、ティッカー〕
- Easy Slider 1.5〔画像やコンテンツのスライド〕
- jQuery pageSlide〔ページ全体を左へスライド〕
- jQuery.ImageSwitch〔画像を様々な方法でスライドアニメーション切替表示〕
- Simple Toggle with CSS & jQuery〔シンプルな要素の表示切替〕
- Supersized〔自動的に背景画像をブラウザサイズに合わせてリサイズして、スライドショーする〕
- toggleElements〔HTML要素の表示切替〕
jQuery.ImageSwitch
画像を様々な方法でスライドアニメーション切替表示
2009/3/28
jQuery.ImageSwitch
jQueryを使用して、様々なスライドアニメーション効果を付けて画像をダイナミックに切替表示するjQueryプラグイン。
Fade In/Out、Fly In、Flip In/Out、Scroll In/Out、Single/Double Doorの9タイプのサンプルが掲載されています。 このタイプをパラメータのTypeに指定し、NewImageにアニメーションを付ける画像を指定します。 その他、EffectOriginalの有無、アニメーション速度(デフォルトは1000)を指定可能です。

<!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>jQuery.ImageSwitch | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/Groject.ImageSwitch.js"></script> <script type="text/javascript"> var ImgIdx = 0; var pics=[ "http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg", "http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg" ]; /* 画像の先読み */ function PreloadImg(){ var img = new Image(); img.src=pics[0]; img.src=pics[1]; img.src=pics[2]; img.src=pics[3]; } $(function(){ PreloadImg(); $(".SlashEff ul li").click(function(){ $(".Slash").ImageSwitch({ Type:$(this).attr("rel"), NewImage:pics[ImgIdx], Direction:"DownTop", EffectOriginal:false }); ImgIdx++; if(ImgIdx>3) ImgIdx = 0; }); }); </script> <!-- CSS --> <style type="text/css"> .SplashFrame { width:500px; height:375px; margin:0; padding:0; border:1px solid #000; } .SlashEff { width:500px; height:62px; margin:20px 0; padding:0; } .SlashEff ul { list-style:none; margin:0; padding:0; overflow:hiddne; } .SlashEff ul li { margin:0; padding:0; float:left; list-style-:none; width:25%; cursor:pointer; text-align:center; color:blue; text-decoration:underline; } .SlashEff ul li:hover { text-decoration:none; } </style> </head> <body> <h1><a href='http://www.hieu.co.uk/ImageSwitch/'>jQuery.ImageSwitch</a> | 設置サンプル</h1> <!-- CODE --> <div class="SplashFrame"> <img src="http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg" alt="イルミネーション@サザンテラス" class="Slash"/> </div> <div class="SlashEff cf"> <ul> <li class="TryFadeIn" rel="FadeIn">Fade in</li> <li class="TryFlyIn" rel="FlyIn">Fly in</li> <li class="TryFlyOut" rel="FlyOut">Fly out</li> <li class="TryFlipIn" rel="FlipIn">Flip in</li> <li class="TryFlipOut" rel="FlipOut">Flip out</li> <li class="TryScroll" rel="ScrollIn">Scroll in</li> <li class="TryScroll" rel="ScrollOut">Scroll out</li> <li class="TrySingleDoor" rel="SingleDoor">Single Door</li> <li class="TryDoubleDoor" rel="DoubleDoor">Double Door</li> </ul> </div> <!-- / CODE --> </body> </html>
Simple Toggle with CSS & jQuery
シンプルな要素の表示切替
2009/3/21
Simple Toggle with CSS & jQuery
jQueryを使用して、HTML要素をスムーズにスライドしながら表示・非表示切替する方法が掲載されています。 指定した要素をクリックした時に要素の表示・非表示時のCSSのクラス名を切り替えています。

<!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>Simple Toggle with CSS & jQuery | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".toggle_container").hide(); $("h2.trigger").toggle(function(){ $(this).addClass("active"); }, function () { $(this).removeClass("active"); }); $("h2.trigger").click(function(){ $(this).next(".toggle_container").slideToggle("slow,"); }); }); </script> <!-- CSS --> <style type="text/css"> #wrap { width:500px; } h2.trigger { float:left; width:450px; height:46px; margin:0 0 5px 0; padding:0 0 0 50px; background:url(/content/img/ajax/simple_toggle/h2_trigger_a.gif) no-repeat; line-height:46px; font-size:1.5em; font-weight:normal; } h2.trigger a { display:block; color:#fff; text-decoration:none; } h2.trigger a:hover { color:#ccc; } h2.active {background-position:left bottom;} .toggle_container { width:500px; margin:0 0 5px 0; padding:0; border-top:1px solid #d6d6d6; background:#f0f0f0 url(/content/img/ajax/simple_toggle/toggle_block_stretch.gif) repeat-y left top; overflow:hidden; clear:both; } .toggle_container .block { padding:10px 20px 0 20px; background:url(/content/img/ajax/simple_toggle/toggle_block_btm.gif) no-repeat left bottom; } .toggle_container .block p { margin:5px 0;padding:5px 0; } .toggle_container h3 { margin:0 0 15px 0; padding:0 0 10px 0; border-bottom:1px dashed #ccc; font-size:1.2em; } .toggle_container img { float:left; margin:0 15px 15px 0; padding:5px; border:1px solid #ccc; background:#ddd; } </style> </head> <body> <div id="wrap"> <h1><a href='http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/'>Simple Toggle with CSS & jQuery</a> | 設置サンプル</h1> <!-- CODE --> <div class="cf"> <h2 class="trigger"><a href="#">アボガドダイニング Platinum Lounge@麻布十番</a></h2> <div class="toggle_container"> <div class="block"> <h3>おすすめMENU</h3> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" width="100" height="75" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a> <h4>アボガド シーザーサラダ</h4> <p>よくわからないけどちゃんとアボガド入りです!クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p> </div> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a> <h4>アボガド刺</h4> <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw</p> </div> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ(トマトソース)@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_t.jpg" width="100" height="75" alt="ベーコンとアボカドのピザ(トマトソース)@アボガドダイニング Platinum Lounge" /></a> <h4>ベーコンとアボカドのピザ(トマトソース)</h4> <p>めちゃくちゃおいしかったアボカドのピザ!ピザ生地はクリスピータイプでさくさく!</p> </div> </div> </div><!-- .toggle_container --> <h2 class="trigger"><a href="#">高庵TOKYO@新宿三丁目</a></h2> <div class="toggle_container"> <div class="block"> <h3>おすすめMENU</h3> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3105515562/" title="白レバー串みそ焼き@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a_t.jpg" width="100" height="75" alt="白レバー串みそ焼き@高庵" /></a> <h4>白レバー串みそ焼き</h4> <p>白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうwフォアグラステーキより美味しいかも!?</p> </div> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3104684027/" title="白子の雲丹のせ炙り@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_t.jpg" width="100" height="75" alt="白子の雲丹のせ炙り@高庵" /></a> <h4>白子の雲丹のせ炙り</h4> <p>白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ!口に入れるとじゅわーっとうまみが広がります。あー幸せ!</p> </div> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3104683957/" title="自家製さつま揚げ二種@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_t.jpg" width="100" height="75" alt="自家製さつま揚げ二種@高庵" /></a> <h4>自家製さつま揚げ二種</h4> <p>黒いのはしいたけじゃありませんwさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます!</p> </div> </div> </div><!-- .toggle_container --> <h2 class="trigger"><a href="#">小鳥屋@中目黒</a></h2> <div class="toggle_container"> <div class="block"> <h3>おすすめMENU</h3> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3031535599/" title="レバ刺@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_t.jpg" width="100" height="75" alt="レバ刺@鳥小屋" /></a> <h4>レバ刺</h4> <p>びっくりするぐらい美味しいレバ刺!鮮度抜群!味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう!いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい!!</p> </div> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3031535573/" title="明太子玉子焼き@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_t.jpg" width="100" height="75" alt="明太子玉子焼き@鳥小屋" /></a> <h4>明太子玉子焼き</h4> <p>玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味!玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした!</p> </div> <div class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_t.jpg" width="100" height="75" alt="モツ鍋@鳥小屋" /></a> <h4>モツ鍋</h4> <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわw</p> </div> </div> </div><!-- .toggle_container --> </div> <!-- / CODE --> </div> </body> </html>
Supersized
自動的に背景画像をブラウザサイズに合わせてリサイズして、スライドショーする
2009/3/8
Supersized - Full Screen Background/Slideshow jQuery Plugin
自動的に背景画像をブラウザサイズに合わせてリサイズし、スライドショーすることができるjQueryプラグイン。
画像の比率を維持しつつ、ブラウザサイズいっぱいに画像をリサイズします。 余白ができることはなく、スクロールバーが表示されることもありません。
スライドショーの始まりとなるa要素にactiveslideクラスを指定します。 スライドショー開始時の幅・高さ、最小サイズ、スライドの間隔などはパラメータで指定可能です。

<!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>Supersized | 設置サンプル</title> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/supersized.1.0.js"></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 1024, startheight: 768, minsize: .50, slideshow: 1, slideinterval: 5000 }; $('#supersize').supersized(); }); </script> <!-- CSS --> <style type="text/css"> * { margin:0; padding:0; } html { /* for IE */ overflow-x:hidden; overflow-y:hidden; } body { overflow:hidden;/* スクロールバーを除去するために必要 */ } img{ border:none; } #content{ position:absolute; bottom:5%; width:100%; height:60px; margin:0px auto; background-color:#262626; border-top:3px solid #4f4f4f; border-bottom:3px solid #4f4f4f; line-height:60px; text-align:center; } #content, #content a { font-weight:bold; font-size:13px; color:#fff; } /* Supersize Plugin Styles */ #supersize img, #supersize a { width:100%; height:100%; display:none; } #supersize .activeslide, #supersize .activeslide img { display:inline; } </style> </head> <body> <!-- CODE --> <div id="supersize"> <a class="activeslide" href="http://www.flickr.com/photos/22559849@N06/3142429603/" title="イルミネーション@サザンテラス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3214/3142429603_9f5899513e_o.jpg" alt="イルミネーション@サザンテラス" /></a> <a href="http://www.flickr.com/photos/22559849@N06/3142386073/" title="Starbucks Coffee 新宿サザンテラス店 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3244/3142386073_2997e55c5e_o.jpg" alt="Starbucks Coffee 新宿サザンテラス店 " /></a> <a href="http://www.flickr.com/photos/22559849@N06/3143248598/" title="イルミネーション@サザンテラス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3089/3143248598_ef0dfe425e_o.jpg" alt="イルミネーション@サザンテラス" /></a> </div> <div id="content"> <a href='http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/'>Supersized - Full Screen Background/Slideshow jQuery Plugin</a> | 設置サンプル </div> <!-- / CODE --> </body> </html>
toggleElements
HTML要素の表示切替
2009/3/21
toggleElements
HTML要素の表示・非表示切替を簡単に実装できるjQueryプラグイン。
リスト要素、div要素など指定したHTML要素を簡単に切り替えることができます。 入れ子にしたリスト要素にも表示・非表示切替を適用することができます。 指定した要素のtitle属性の値が切替リンクとして配置されます。
オプションで、切替速度(fxSpeed)、スライドアニメーション速度(fxAnimation)などを指定することができます。 また、要素が表示された時、非表示なった時、クリックされた時にコールバック関数を受け取ることもできます。
オプション | 値 |
---|---|
fxAnimation | 「slide」、「show」、「fade」のいずれか(デフォルト「slide」) |
fxSpeed | 「slow」、「normal」、「fast」またはミリ秒(デフォルト「normal」= 1000) |
className | このクラス名を使用。(デフォルト「toggler」。CSSファイルのtoggleElements.css参照。) |
removeTitle | HTML要素のtitle属性を削除するかの有無。真偽値で指定。(デフォルト「TRUE」 |
showTitle | 切替リンクにtitle属性を追加するかの有無。真偽値で指定。(デフォルト(FALSE) |
onClick | コールバック関数。 この関数は切替リンク上でクリックされた時に呼ばれます。クリックをキャンセルするにはFALSEを帰してください。 |
onHide | コールバック関数。 この関数はコンテンツが非表示なった時に呼ばれます。 |
onShow | コールバック関数。 この関数はコンテンツが表示された時に呼ばれます。 |

<!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>toggleElements | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/toggleelements/jquery.toggleElements.js"></script> <script type="text/javascript"> $(function(){ $('div#exp1').toggleElements( ); $('ul#exp2').toggleElements( ); $('img#exp3').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('ul#exp4').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('div#exp5').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('ul#exp6').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } ); $('div#exp7').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } ); $('ul#exp8').toggleElements( { fxAnimation:'show', fxSpeed:'fast', className:'none' } ); $('fieldset#exp9').toggleElements( { fxAnimation:'show', fxSpeed:1000, className:'toggler', onClick:doOnClick, onHide:doOnHide, onShow:doOnShow } ); $('div#exp10').toggleElements( ); }); function doOnClick() { alert('callback: onClick'); } function doOnHide() { alert('callback: onHide'); } function doOnShow() { alert('callback: onShow'); } </script> <!-- CSS --> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/toggleelements/toggleElements.css" /> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/toggleelements/toggleElements2.css" /> <style type="text/css"> #wrap { width:578px; } #exp1 img, #exp5 img, #exp10 img { float:left; margin-right:30px; margin-bottom:10px; } #exp2, #exp4, #exp6 { padding:5px 10px 5px 30px; } </style> </head> <body> <div id="wrap"> <h1><a href='http://jquery.andreaseberhard.de/toggleElements/'>toggleElements</a> | 設置サンプル</h1> <!-- CODE --> <div id="exp1" title="例1:画像+テキストがあるdiv要素の表示切替"> <p class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a> 麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw </p> </div> <ul id="exp2" title="例2:リスト要素の表示切替"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> <img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="アボガド刺" id="exp3" title="例3:異なるクラスのある画像" /> <ul id="exp4" title="例4:異なるクラスのあるリスト要素の表示切替"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> <div id="exp5" title="例5:異なるクラスと入れ子のリスト要素の表示切替"> <p class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a> 麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw </p> <ul id="exp6" title="例6:リスト要素"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> <div id="exp7" title="例7:入れ子のリスト要素"> <ul> <li>項目1</li> <li>項目2 <ul id="exp8" title="例8:リスト要素"> <li>項目2-1</li> <li>項目2-2</li> <li>項目2-3</li> </ul> </li> </ul> </div> </div> <fieldset id="exp9" title="例9:コールバック付きのfieldset要素の表示切替"> <legend>Lorem Ipsum</legend> <p><label for="foo"><input id="foo" name="foo" /></label><input type="submit" value="submit" /></p> </fieldset> <div id="exp10" class="opened" title="例10:'opened'クラスを追加"> <p class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a> 麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw </p> </div> <!-- / CODE --> </div> </body> </html>