【縮小してランダムで紹介するインラインフレーム2とナビゲーションの組み合わせ例】 [一覧に戻る]
|
||||
|
||||
|
ソースコード:
<table border="0" cellpadding="0" cellspacing="0">
<tbody> <tr> <td> <table border="1" cellpadding="5" cellspacing="1" style="text-align: center;" width="100%"> <tbody> <tr> <th bgcolor="#e6e6ff" scope="row" style="line-height: 100%; padding: 3px;"> <p><a href="http://www.webring.ne.jp/ring/diyfreakring/" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="DIYが好きな人や興味がある人を歓迎します。">DIYフリークの集い <br /> <font size="-3">(ウェブリング)</font></a> </p> </th> <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/prev" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="前のリンクサイトを開きます">前へ</a> </td> <td bgcolor="#9ce159" title="現在開いているページのタイトルです">貴方のサイト名欄 </td> <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/next" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="次のリンクサイトを開きます">次へ</a> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table border="1" cellpadding="5" cellspacing="1" style="text-align: center;" width="100%"> <tbody> <tr> <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/random" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="ランダムにリンクサイトを開きます">ランダムに飛ぶ</a> </td> <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/list" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="リングに登録しているサイトを一覧表示します">リンク一覧</a> </td> <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/join" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="リングに登録したい方はこちらをクリック!">参加を希望する</a> </td> <td><a href="http://diyfreakring.mac-in.net/faq.html" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="よくありがちな問答集です">Q&A</a> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td colspan="2"> <p>ウェブリング<strong>『DIYフリークの集い』</strong>の中から、ランダムでふたつ紹介します(ここと同じサイトが偶然表示される可能性もあります)。 </p> <p>※右クリックで「このフレームを新規ウインドウで開く」を選択すると、原寸大の表示になります。 </p> </td> </tr> <tr> <td> <div style="width:100%;overflow:scroll;-webkit-overflow-scrolling:touch;border:solid 1px;"> <iframe height="600" name="sample" src="http://www.webring.ne.jp/ring/diyfreakring/777/random" style="transform:scale(0.25);-moz-transform:scale(0.25);-webkit-transform:scale(0.25);-o-transform:scale(0.25);-ms-transform:scale(0.25);transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;border:solid 1px;margin-bottom:-450px;margin-right:-300%;width:400%;">この部分はインラインフレームを使用しています。 </iframe> </div> </td> <td> <div style="width:100%;overflow:scroll;-webkit-overflow-scrolling:touch;border:solid 1px;"> <iframe height="600" name="sample" src="http://www.webring.ne.jp/ring/diyfreakring/777/random" style="transform:scale(0.25);-moz-transform:scale(0.25);-webkit-transform:scale(0.25);-o-transform:scale(0.25);-ms-transform:scale(0.25);transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;border:solid 1px;margin-bottom:-450px;margin-right:-300%;width:400%;">この部分はインラインフレームを使用しています。 </iframe> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> |
[一覧に戻る]