簡易リンク集の作成方法
以前仕事中によく使われていたので、bak&紹介します
リンク集.htm
<html>
<head>
<title>◆□■◇リンク集</title>
<script language="JavaScript">
<!--
function rsz1() {
alert("ブラウザの最適サイズを自動調整にしようと思ったが、未対応")
//alert(window.outerWidth);
//alert(window.outerHeight);
//window.resizeTo(1226, 714);
//window.outerWidth=1226;
//window.outerHeight=714;
}
-->
</script>
</head>
<body class="divBody">
<table style="width:100%;border:0px;margin:0px 0px;padding:0px 0px;">
<tr>
<td style="width:12%;font-size:10;">2019/11/01～随時更新中</td>
<td style="width:28%;font-size:10;color:white;"><marquee behavior="scroll" bgcolor="red">最優先</marquee></td>
<td style="width:28%;font-size:10;color:red;"><marquee behavior="scroll" bgcolor="yellow">優先</marquee></td>
<td style="width:28%;font-size:10;color:white;"><marquee behavior="scroll" bgcolor="green">★★★ 勤務表：毎月10日、20日に注意</marquee></td>
<td = style="width:4%;text-align:right;">
<input style="font-size:1;" type="button" value="..." onclick="rsz1();" title="リサイズ"/>
</td>
</tr>
</table>
<hr>
<div class="divContents">
<span class="spanPartTitle">◆□Shareサーバー:ABC</span>
<table class="tbl">
<tr>
<th class="th_doing"> 作業標題1 </th>
<td class="td1">
<a href="link1" target="_blank" title="link1_title">linkComment1</a><br>
<!-- 折り畳み展開ポインタ START -->
<br>
<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼【詳細スケジュール】</a>
</div>
<!-- 折り畳み展開ポインタ END -->
<!-- 折り畳まれ部分 START -->
<div id="open" style="display:none;clear:both;">
<pre>
１．
２．
３．
４．
５．
６．
・・・
１００．
</pre>
</div>
<!-- 折り畳まれ部分 END -->
</td>
<td class="td2">link備考1</td>
</tr>
</table>
<span class="spanPartTitle">■◇ローカル資料</span>
<table class="tbl">
<tr>
<th class="th"> 標題2 </th>
<td class="td1">
<a href="link2" >linkComment2</a><br>
</td>
<td class="td2">link備考2</td>
</tr>
</table>
<table class="tbl">
<tr>
<th class="th_done"> 標題3 </th>
<td class="td1">
<a href="link2" >linkComment2</a><br>
</td>
<td class="td2">link備考2</td>
</tr>
</table>
</div>
<hr>
<div style="text-align:right;font-size:10;">@個人作業用。効率的に</div>
</body>
<style>
.divBody {
background-color : #CCCCCC;
}
.tbl{
width:90%;
}
.th{
background-color:#AAAAAA;
color:white;
width: 30%;
text-align: left;
font-size:13;
padding: 0.5em 0 0.5em 1em;
}
.th_doing{
background-color:#000000;
color : #3CB371;
width: 30%;
text-align: left;
valign: middle;
font-size:13;
padding: 0.5em 0 0.5em 1em;
}
.th_done{
background-color:#3CB371;
color : #000000;
width: 30%;
text-align: left;
valign: middle;
font-size:13;
padding: 0.5em 0 0.5em 1em;
}
.td1{
background-color:#AAAAAA;
width: 60%;
font-size:12;
padding: 0.5em 0.5em 0.5em 0.5em;
}
.td2{
background-color:#AAAAAA;
width: 10%;
font-size:10;
text-align: left;
valign: top;
}
.divContents{
background-color:#BBBBBB;
height:520px;
overflow-x:hidden;
overflow-y:scroll;
padding:5px;
boder:0px solid #000;
}
.spanPartTitle{
font-size:22;
}
</style>
</html>
備考
※ブラウザはIEを推薦。
※ブラウザの最適サイズをJsで自動調整にさせようと思ったが、良い方法をまだ