/home/web6047/www/cgi-bin/prj/20180623-javascript／htmlタブ/

このファイル: /home/web6047/www/cgi-bin/prj/20180623-javascript／htmlタブ/_使用手順.txt

1 18/06/24(日) 01:09:28
2
3 「HTMLタブ」
4
5 ホームページをタグ打ちで製作している人向けに、JavaScriptによる「タブ」のしくみを作りました。
6 タブのしくみを自身のページで手軽に使いたいときに、手軽に導入できます。
7
8 タブのしくみを作った後も、いつも使っているホームページエディターで開いて編集ができます。
9 （その際は、タブの内容が縦方向に並んだ状態）
10
11
12 ＊＊＊使用手順 1～8まで
13
14 1.
15 適当なHTMLファイルを用意する。
16 たとえば、以下のようにタブ分けしたい文書があるとします。
17
18 <BODY>
19 タブ分けしたい部分１<BR>
20 タブ分けしたい部分２<BR>
21 タブ分けしたい部分３<BR>
22 </BODY>
23
24
25 2.
26 タブで分けたいものをDIVでくくります。
27 （以降、これらのDIVを、説明のために「いくつかのDIV」といいます）
28
29 <BODY>
30 <DIV>
31 タブ分けしたい部分１<BR>
32 </DIV>
33 <DIV>
34 タブ分けしたい部分２<BR>
35 </DIV>
36 <DIV>
37 タブ分けしたい部分３<BR>
38 </DIV>
39 </BODY>
40
41
42 3.
43 「いくつかのDIV」のすべてをさらに上からDIVでくくり、そのくくりのDIVのclassをtabholderにします。
44 （以降、説明のためにその外側のDIVを「tabholderのDIV」といいます）
45
46 <BODY>
47 <DIV class="tabholder">
48 <DIV>
49 タブ分けしたい部分１<BR>
50 </DIV>
51 <DIV>
52 タブ分けしたい部分２<BR>
53 </DIV>
54 <DIV>
55 タブ分けしたい部分３<BR>
56 </DIV>
57 </DIV>
58 </BODY>
59
60
61 4.
62 javascript.htmlのSCRIPTタグの内容（、 と書かれた部分）を<HEAD></HEAD>タグ内へコピー＆貼り付けします。
63
64
65 5.
66 下記のスタイルを<HEAD></HEAD>タグ内へコピー＆貼り付けします。
67
68 <STYLE>
69 .tabholder>* { /*「いくつかのdiv」*/
70 background-color : white; /*背景色がないと文書同士が透けて重なる*/
71 border : solid 2px #555; /*線がないと境界がわからない*/
72 padding :.5em;
73 background-color : #f5f5f5;
74 }
75 </STYLE>
76
77 6.
78 以上でブラウザで開くと、タブで操作できる状態になっていると思うので、確認してください。
79 タブをクリックすると切り替わります。
80 だいぶ味気ないですが、後の手順で装飾します。
81
82 7.
83 「いくつかのDIV」にtitle属性を設定するとタブのタイトルになります。
84 下記のようにtitle属性を「いくつかのDIV」に挿入してみてください。
85
86 <BODY>
87 <DIV class="tabholder">
88 <DIV title="テスト１">
89 タブ分けしたい部分１<BR>
90 </DIV>
91 <DIV title="テスト２">
92 タブ分けしたい部分２<BR>
93 </DIV>
94 <DIV title="テスト３">
95 タブ分けしたい部分３<BR>
96 </DIV>
97 </DIV>
98 </BODY>
99
100
101 8.
102 「いくつかのDIV」ごとにボーダー、背景色等スタイルを設定できます。
103 （つまり、タブごとに別々のスタイルを設定できます）
104 下記のようにstyle属性を「いくつかのDIV」に挿入してみてください。
105
106 <BODY>
107 <DIV class="tabholder">
108 <DIV title="テスト１" style="border:solid 1px black; background-color:lightblue;">
109 タブ分けしたい部分１<BR>
110 </DIV>
111 <DIV title="テスト２" style="border:solid 3px red; background-color:lightgreen;">
112 タブ分けしたい部分２<BR>
113 </DIV>
114 <DIV title="テスト３">
115 タブ分けしたい部分３<BR>
116 </DIV>
117 </DIV>
118 </BODY>
119
120 すると、タブ別にスタイルを設定できているのが分かると思います。
121
122
123 また、次のようなスタイルの指定を参考にしてください。
124
125 <STYLE>
126 .tabholder { /*全体*/
127 width : 80%; /*幅*/
128 }
129
130 .tabholder>*>.tab { /*タブパーツ*/
131 font-size : 12px; /*文字の大きさ*/
132 padding : .5em; /*余白*/
133 border-radius : .5em .5em 0 0; /*タブらしく角を丸め*/
134 box-shadow : -.1em .1em 0em #ccc inset; /*内影*/
135 }
136 .tabholder>*>.tab:hover { /*タブパーツ　マウスが乗ったとき*/
137 background-color : cyan; /*（これは効かない？？）*/
138 color : blue; /**/
139 }
140 .tabholder>* { /*「いくつかのdiv」*/
141 background-color : white; /*背景色がないと文書同士が透けて重なる*/
142 border : solid 2px black; /*線がないと境界がわからない*/
143 padding : 1em; /*余白*/
144 border-radius : .3em; /*角を丸め*/
145 box-shadow : .05em .1em .0em #888, /*影*/
146 -.2em -.2em .0em #aaa inset;/*内影*/
147 }
148
149 #tabs1 * {
150 box-shadow : none;
151 }
152 </STYLE>
153
154
155
156 下記のような指定はNGです。
157 面倒でなければ実際に試してみてください。
158
159 .tabholder>*>.tab {
160 border : solid 1px black;
161 /*
162 NGの理由：
163 スクリプトが「いくつかのDIV」の設定をタブ部分へ複写するので
164 ここでのborder設定は反映されません。
165 */
166
167 margin-right : 1em;
168 /*
169 NGの理由：
170 タブ同士の間隔はCSSで変更できません。
171 スクリプトのtabbuild()の　//タブの横の並び　の部分で指定できます。
172 */
173
174 box-shadow : .5em .5em .5em black;
175 /*
176 NGの理由：
177 タブ部分に外向きの影を付けてもあまりきれいになりません。
178 */
179 }
180
181
182 以上で手順は終了です。
183
184
185 ＊＊＊問題点
186
187 ×各タブのスクロールバーは非対応です。
188
189 ×ブラウザの Edge と Internet Explorer は「タブ」の下部で、細く薄い線が入ってしまう。
190
191
192 ＊＊＊補足
193
194 ●導入後にホームページエディタで編集する際
195
196 タブを増やしたい！
197
198 「tabholderのDIV」の中に新しいDIV要素を作ります。
199 wyswyg（ウィジウィグ、見た目で編集する方式）なエディタだと、作りづらいかもしれないので、
200 ソースコード表示モードなどにして直接タグを打つと良いかもしれません。
201 その際、<DIV></DIV>よりは<DIV>ダミー</DIV>としたほうがソースコード表示モードを
202 抜けた後で編集しやすいかもしれません。
203
204
205 ●動作確認済みブラウザ
206
207 Firefox Quantum 60.0.2
208 Google Chrome 67.0
209 Microsoft Edge 42
210 Opera 53.0
211 Microsoft Internet Explorer 11.112
212
213
214 ●スクリプト実行後のHTMLの構造
215
216 <DIV class="tabholder">
217 <DIV title="タイトル１">
218 <SPAN class="tab">タイトル１</SPAN> /*←このSPANはスクリプトが自動作成*/
219 </DIV>
220 <DIV title="タイトル２">
221 <SPAN class="tab">タイトル２</SPAN> /*←このSPANはスクリプトが自動作成*/
222 </DIV>
223 <DIV title="タイトル３">
224 <SPAN class="tab">タイトル３</SPAN> /*←このSPANはスクリプトが自動作成*/
225 </DIV>
226 </DIV>
227
228
229 ●「tabholderのDIV」は下記のように複数あっても良い
230
231 <BODY>
232
233 <DIV class="tabholder">
234 <DIV>
235 タブ分けしたい部分１<BR>
236 </DIV>
237 <DIV>
238 タブ分けしたい部分２<BR>
239 </DIV>
240 <DIV>
241 タブ分けしたい部分３<BR>
242 </DIV>
243 </DIV>
244
245 <DIV class="tabholder">
246 <DIV>
247 タブ分けしたい部分１<BR>
248 </DIV>
249 <DIV>
250 タブ分けしたい部分２<BR>
251 </DIV>
252 <DIV>
253 タブ分けしたい部分３<BR>
254 </DIV>
255 </DIV>
256
257 </BODY>
258
259
260 ●スクリプト実行後のHTMLの構造　詳細
261 （18/06/24(日) 19:52:19に確認）
262
263 <BODY onload="tabinit()" onresize="tabonresizex(e)">
264 <DIV class="tabholder" style="
265 height : 各文書の最大値px;
266 position : relative;
267 margin-top : 「タブ」の高さの分px;
268 ">
269 <DIV title="タイトル１" style="
270 height : 各文書の最大値px;
271 position : absolute;
272 box-sizing : border-box;
273 z-index : クリックされたときに1または0;
274 ">
275 <SPAN class="tab" style="
276 background-color : 「いくつかのDIV」から継承;
277 border : 「いくつかのDIV」から継承;
278 position : absolute;
279 border-bottom-width : 0;
280 box-sizing : border-box;
281 top : -タブの高さ;
282 cursor : pointer;
283 white-space : nowrap;
284 left : 各タブ横に並ぶように、間隔は4px開ける;
285 " onclick="tabonclickx(e)">タイトル１</SPAN> /*←このSPANはスクリプトが自動作成*/
286 </DIV>
287
288 以下同様
289 <DIV title="タイトル２">
290 <SPAN class="tab">タイトル２</SPAN> /*←このSPANはスクリプトが自動作成*/
291 </DIV>
292 <DIV title="タイトル３">
293 <SPAN class="tab">タイトル３</SPAN> /*←このSPANはスクリプトが自動作成*/
294 </DIV>
295 </DIV>
296 </BODY>
297
298 ●全体の縦幅は、各タブの中で一番大きい縦幅に合わせています。
299
300
301 以上