太陽風2 if
折り畳みメニュー7 if
折り畳みメニュー10 if
折り畳みメニュー11 if
折り畳みメニュー12 if
折り畳みメニュー13 if
折り畳みメニュー17 if
折り畳みメニュー19 if
折り畳みメニュー18a if
折り畳みメニュー20 if
折り畳みメニュー22 if
折り畳みメニュー26 if
折り畳みメニュー27 if
折り畳みメニュー28 if
折り畳みメニュー29 if
折り畳みメニュー32 if
折り畳みメニュー33 if
折り畳みメニュー34 if
折り畳みメニュー35 if
折り畳みメニュー37 if
折り畳みメニュー38 if
絵合わせ9b if
下メニュー if
ボタン16 if
スライドショー34 if
ズーム15 if
ツリーメニュー15 if
スプレッドシート if
スプレッドシート if
表5 -New Win
照明画像4 if
ツリーメニュー35 if
データベース15 if
ニュースインデックス if
最寄り拠点 if
ストリートビュー10 if
ドライブ シミュレーターm6 if
ルート案内 if
NASA
Reuters Photos
ロイター 写真
CNN
CNN jp
Real ガイド
Web Radio Microsoft
msn ♪Music
Apple
iTunes Charts
iTune Charts
iTunes Movie Trailers
Playboy
BIGLOBE♪□
Microsoft Wonderwall
HAPPY PLUS
Woman Excite
Fashion TV
fashionjp.net
Fashion-J.com
NAVER まとめ
以下、自由コンテンツ(HTML)を記述。
テキスト(例)。 ---------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------
ホーム へ サンプルページ Slide IFRAME slide_iframe.htm
ページ(IFRAME)をスライドさせて開く。 DHTML、jQuery。 ハイパーリンクなどのカスタマイズはテキストエディターなどで可。 all 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
デモは、右上のハイパーリンクのクリックでページを開き(IFRAMEに表示)、左枠・アイコンのクリックで閉じる、で。
< ご使用方法 >
・ ローカル(=PC)への保存は、slide iframe/をクリック開いたホルダーで、slide_iframe.htm、002584110.js 、002584110.css、handle.gif を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 変わってしまった、ファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、slide_iframe.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに
<body> 〜 </body>の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。 更新の確認は [F5]キー を押し、サーバーやブラウザーのキャッシュクリアー、最新データ読み込み(≠再アクセス)で行います。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.jsなども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わってしまったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 :
色記号5、〃6、スタイルシートリファレンス、ホームページ開設入門。 Web Development、Web開発、IE10
互換性クックブック、〃開発者向けガイド、IE
API リファレンス、IE 開発
> HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、XML、〃リファレンス、DHTML。
(*1)
: slide_iframe.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
|
HTMLの編集方法 |
(*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
シフトJIS使用(削除不可)
互換表示
ieなどに表示するアイコンファイル名(削除可)
<style type= 〜
</style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)
|
<!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" lang="en" xml:lang="en"><meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link REL="SHORTCUT ICON" href="favicon.ico">
<style type="text/css"><!--
.xxx0
{ background: #F9F8F9 url('wttec.gif');
}
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9
url('wttec.gif'); text-decoration:none;
}
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4;
text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2;
text-decoration:underline; }
font {font-size:12px;
line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
--></style>
<base target="_blank">
<title>サンプルページ Slide IFRAME</title>
<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="002584110.css" />
<script src="002584110.js">
/***********************************************
* Ajax Side Panel script- ? Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
(*2)
: slide_iframe.htm (例) 挿入先の <body> 〜
</body> の、〜
部分にペーストします。
|
HTMLの編集方法 |
(*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
URL 吹き出し サイト名
以下、同様。
右回り込みDIVの位置 サイズ 背景色 背景画像
|
<body>
<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<li><a href="http:// …… /index2.html" title="ホーム"
rel="ajaxpanel" data-loadtype="iframe">太陽風2 if</a></li>
==== この間、説明を省略。 ====
<li><a href="http://matome.naver.jp/" rel="ajaxpanel"
title="[情報をデザインする。キュレーションプラットフォーム]">NAVER まとめ</a></li>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
<p> </p>
<p> </p>
<p> </p>
<!-- ↓ 右回り込みDIVの位置設定。 -->
<!-- 絶対位置 高さ 右回り込み オーバーフロー非表示 余白上下 左右 背景色/画像 -->
<div style="position: absolute; top:0px; left:130px; height:390px;
float:right; overflow:hidden; padding:5px 10px; background: #FFFFFF
url('../wttec.gif')">
<!-- ■ ---- 位置調整のためのDIV有りは ↑ この間をコピー&ペーストします。 -->
<p>以下、自由コンテンツ(HTML)を記述。</p>
<p> テキスト(例)。 ---------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------</p>
<!-- ★ ----- 右DIVの終端、末尾に ↓ を記述します。 ---------- -->
</div>
<!-- ★ ----- 右DIVの終端、末尾に ↑ を記述します。 ---------- -->
==== この間、説明を省略。 ====
|
(*3)
: 002584110.css (例) テキストエディターで開き、編集しhogehoge.htmlと同ディレクトリーに転送・配置します。
|
*.css、*.js の編集方法 |
(*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
|
〔この列ペースト不要〕
背景色
内余白
|
.ddajaxsidepanel{ /* Main Panel Container */
position: fixed; /* keep this value as is */
top: 0; /* keep this value as is */
visibility: hidden; /* keep this value as is */
background: #ECECEF;
border-color: white;
border-left: 1px ridge #eee;
-moz-box-shadow: -10px 0 10px rgba(137,137,137, 0.8); /* CSS 3 box shadow */
-webkit-box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
-webkit-box-sizing: border-box; /* Set .ddajaxsidepanel width so that any
padding or borders are added inside this width, not in addition to */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ddajaxsidepanel .panelhandle{ /* CSS for Panel Handle DIV */
width: 24px;
height: 100%;
position: absolute;
left: -14px;
top: 0;
cursor: pointer;
background: transparent url(handle.gif) center left no-repeat; /* path to
"handle" gif */
}
.ddajaxsidepanel .contentarea{ /* CSS for main content area DIV */
height: 100%;
padding: 4px;
overflow: scroll;
}
|
< 補足 > 適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。