サンプルページ　　　折り畳みコンテンツ０ｂ2

①　『人間は考える葦である。　-ﾊﾟｽｶﾙ。』 …さらに表示 ∇　

②　丸角箇条書きﾃｰﾌﾞﾙ”を …さらに表示 ∇　

③　丸角影付きﾃｰﾌﾞﾙ”を …さらに表示 ∇　

④　丸角影付き箇条書きﾃｰﾌﾞﾙ”を …さらに表示 ∇　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　折り畳みｺﾝﾃﾝﾂ0b2　　doc_oritatmi_b2.htm

丸角影付き、隠されたｺﾝﾃﾝﾂ・影付き（ﾃｷｽﾄ、ﾊｲﾊﾟｰﾘﾝｸ、画像、箇条書き、ﾘﾝｸﾃｰﾌﾞﾙ）を、折り畳み表示（≒概要欄）。　　CSS、ｺﾝﾃﾅ : <div>。　　ｺﾝﾃﾝﾂなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　all 対応。　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、 …さらに表示 ∇　のｸﾘｯｸで。　　　　※： PCのﾌｧｲﾙを直接表示でも可。　　　関連・詳細情報：hogehoge0c.htm、hogehoge0c1.htm、doc_oritatmi_b1.htm

< ご使用方法 >

　・　保存は doc_oritatmi_b2.htm、00154110.js、wttec.gif、hbxroom1.gif、R2.gif、sea8.jpg、sea4.jpg、hbxroom1.gif、18t_rss.png、pointer_us.gif、twitter_18x18.png、Instagram.png、youtube_18x18.png を右ｸﾘｯｸ、【名前を付けてﾘﾝｸを保存】 - <保存する場所>： ……、などで。　　※:　変わってしまった、ﾌｧｲﾙ名や、*.htm 中のﾊﾟｽは要修正。

　・　ﾍﾟｰｽﾄは、doc_oritatmi_b2.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどの ”ﾃｷｽﾄﾓｰﾄﾞで、新しいﾍﾟｰｼﾞや hogehoge.htm（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1)を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。　　　※: ﾃｷｽﾄﾓｰﾄﾞ : ｺｰﾄﾞ/HTMLﾀｸﾞ挿入/HTMLﾒﾆｭｰなど。

　･　編集 : hogehoge.htm に ﾃｷｽﾄﾓｰﾄﾞでﾍﾟｰｽﾄ 後は、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのﾃﾞｻﾞｲﾝや通常ﾓｰﾄﾞ、ﾃｷｽﾄﾓｰﾄﾞ、ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。　　下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。　

※: 外部ﾄﾞﾒｲﾝ（ｻｲﾄ）にｱｯﾌﾟﾛｰﾄの画像などの使用は、非表示に注意。　　画像の alt ﾀｸﾞは不可、ｻｲｽﾞ指定の pt などの省略は注意。　　ｽｸﾘﾌﾟﾄ構文中への改行混入に注意。

　･　ｱｯﾌﾟﾛｰﾄﾞは、hogehoge.htm と同じﾎﾙﾀﾞｰに、使用してる上記画像、*.js、をｱｯﾌﾟﾛｰﾄﾞします。　　別ﾎﾙﾀﾞｰの場合は、hogehoge.htm の該当ﾊﾟｽ注意。

　・　作動ﾃｽﾄは Edge～などで。　　更新の確認は、ﾌﾞﾗｳｻﾞｰなどのｷｬｯｼｭのｸﾘｱ後に実施。　　(1) [F5]ｷ- or Ctrl+Rｷｰを押し、最新ﾃﾞｰﾀ読み込みで。　　更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [ﾌﾟﾗｲﾊﾞｼｰ、検索、ｻｰﾋﾞｽ] - [閲覧ﾃﾞ-ﾀをｸﾘｱ] - ［ｸﾘｱ-するﾃﾞ-ﾀの選択］ - ［ｖ］閲覧の履歴 -［今すくｸﾘｱ］をｸﾘｯｸ。　　留めに、(3) ｻｰﾊﾞｰのﾌｧｲﾙを一旦削除。

(*1) ：　doc_oritatmi_b2.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

ｼﾌﾄJIS使用（削除不可）

URL前・ﾂｰﾙﾊﾞｰに表示のｱｲｺﾝﾌｧｲﾙ名（削除可）favicon_**.ico など

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent

お気に入りなど表示のﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

内余白
幅
高さ

左位置

背景色
背景画像（x削除使用）

<title>サンプルページ　　折り畳みコンテンツ０ｂ2</title>

<style type="text/css"><!--
#shadowed-border {
padding: 20px;
width: 500px;
hight: 300px;
margin: 0px auto;
position:absolute;
flote:none;
left:20px;
}
#shadowed-border .sb-inner {
background:#E6E3DF;
Xbackground-image:url('http:/　……　/whtcv.gif');
}
#shadowed-border .sb-border {
background:#fff;
}
#shadowed-border2 {
padding: 20px;
width: 500px;
hight: 300px;
margin: 0px auto;
position:absolute;
flote:none;
left:20px;
}
#shadowed-border2 .sb-inner {
background:#D9EAE6;

　====　　　この間､説明を省略｡　　　====　

(*2) ：　doc_oritatmi_b2.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

①～④ から一つ選びます。

ｺﾝﾃﾅ : <div>
　

① ﾃｷｽﾄ　CSS　吹き出し
CSSid ﾍﾟｰｼﾞ内固有　起動文字　
隠されたｺﾝﾃﾝﾂ

以下、同様。

②　丸角箇条書きﾃｰﾌﾞﾙ

③　丸角影付き箇条書きﾃｰﾌﾞﾙ

④　丸角影付き箇条書きﾃｰﾌﾞﾙ

<body>

<p>　</p>
①　『人間は考える葦である。　-ﾊﾟｽｶﾙ。』<font face="メイリオ"><DIV title="ｸﾘｯｸ → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR: #9966FF" onclick="document.all.idxxx001.style.display= document.all.idxxx001.style.display=='none' ? '' : 'none'"><b>　…さらに表示 ∇</b></DIV></font>　<DIV id=idxxx001 style="DISPLAY: none">森羅万象、why！（どのようにやるか）は普遍的に解るが、Why？（何故やるか）は個人的で解らないことが多い、とても深くて広い。　　根源的には魂の求めDNAのプログラム、思惟的な計画、一時的な思惑。

　====　　　この間､説明を省略｡　　　====

andam_msg6a.htm">”哲学者・小説家小箴言集”</a> は『人間が幸福であると言えるのは、”何かを欲する時” と、”作り出す時” だけである。　- <a target="_blank" href="https://www.google.co.jp/search?q=哲学者+アラン">アラン</a>。』　と根源的に断じてる。</DIV>
<p>　</p>

②　丸角箇条書きﾃｰﾌﾞﾙ”を<font face="メイリオ"><span title="ｸﾘｯｸ → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR: #3C0166" onclick="document.all.idxxx002.style.display= document.all.idxxx002.style.display=='none' ? '' : 'none'"><b>　…さらに表示 ∇</b></span></font>　<DIV id=idxxx002 style="DISPLAY: none">
<br/>
<div align="left" style="margin-left:10px">
<div radius="20" id="myDiv" style="background-color:#E3DFE5; background-image: url(''); border: 1px solid #D5CED3; width: 600px; height: 400px; text-align:left;">
　　　※：↓ここにHTML（ﾃｷｽﾄや画像、ﾊｲﾊﾟｰﾘﾝｸ、箇条書きなど）を記述します。<br/>
　　　<a href="https://xml-xsl.sakura.ne.jp/slideshow53/slideshow53.htm" target="_blank" title="ここをｸﾘｯｸ">スライドシュー５３</a><br/>

　====　　　この間､説明を省略｡　　　====

③　丸角影付き箇条書きﾃｰﾌﾞﾙ”を<font face="メイリオ"><span title="ｸﾘｯｸ → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR:#3C0166; BACKGROUND-COLOR:" onclick="document.all.idxxx003.style.display= document.all.idxxx003.style.display=='none' ? '' : 'none'"><b>　…さらに表示 ∇</b></span></font>　<DIV id=idxxx003 style="DISPLAY: none">　
<div id="shadowed-border2" class="sb" style="background-image: url('http://xml-xsl.sakura.ne.jp/whtsnd.gif');height:200">
<p><img border="0" src="http://xml-xsl.sakura.ne.jp/sea4.jpg"
width="105" height="81" align="right"></p>

　====　　　この間､説明を省略｡　　　====

<a href="http://www.toshiba-emi.co.jp/yuming/disco/index_j.htm" target="_blank" title="">Yuming</a>　
</div>
</DIV><p></p>

④　丸角影付き箇条書きﾃｰﾌﾞﾙ”を<font face="メイリオ"><span title="ｸﾘｯｸ → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR: #9966FF" onclick="document.all.idxxx004.style.display= document.all.idxxx004.style.display=='none' ? '' : 'none'"><b> …さらに表示 ∇</b></span></font>　<DIV id=idxxx004 style="DISPLAY: none"><br/>
<div id="shadowed-border" class="sb" style="background-image: url('http://xml-xsl.sakura.ne.jp/wttec.gif')">

<b>　　　※：↓ここにHTML（ﾃｷｽﾄや画像、ﾊｲﾊﾟｰﾘﾝｸ、箇条書きなど）を記述します。<br/>
----------------------------------------------------------------<br/>
<a href="https://xml-xsl.sakura.ne.jp/slideshow53/slideshow53.htm" target="_blank" title="ここをｸﾘｯｸ">スライドシュー５３</a><br/>
<br/>

　====　　　この間､説明を省略｡　　　====