社内用のセミナーメモなんかに使えるHTML+CSS
たまに、参加したセミナーなんかの内容を、社内用にHTMLとして保存しておくことがあります。
で、それが結構使えるなぁと思っているので、取り急ぎ公開しておきます。
まぁ、「別にHTMLにする必要なんてなくね？」とか、「xml + xslt の方がよくね（特に目次の部分とか）？」とか、いろいろと突っ込みどころはありますが、それはそれでご容赦くださいませ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>社内用のセミナーメモなんかに使えるHTML+CSS</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 1em;
background: #555;
color: #333;
font-family:
Meiryo, "メイリオ",
"Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3",
Osaka,
"MS P Gothic", "ＭＳ Ｐゴシック",
sans-serif;
font-size: 12px;
line-height: 1.6;
}
h1 {
margin-bottom: 1em;
border-bottom: 3px solid #fff;
color: #fff;
font-size: 175%;
}
h2 {
margin: 0 0 0.5em;
border-bottom: 3px double #333;
font-size: 150%;
}
h3 {
margin: 0 0 0.5em;
border-bottom: 1px dotted #333;
font-size: 125%;
}
h4 {
margin: 0 0 0.5em;
font-size: 100%;
}
p,
ul {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
ul {
margin-left: 1.5em;
}
ol {
margin-left: 3em;
}
.section02 {
margin: 1em 0;
padding: 1em;
border: 1em solid #ccc;
background: #f3f3f3;
}
.section03,
.section04 {
margin: 1em 0;
padding: 0.5em;
border: 0.5em solid #ccc;
background: #f3f3f3;
}
.attentionA01 {
color: #b30;
font-weight: bold;
}
#index {
position: fixed;
top: 0;
right: 0;
margin: 0;
border: 0.5em solid #a6a6f7;
background: #03b;
overflow: hidden;
}
#index,
#index a {
display: block;
color: #fff;
}
#index a:hover {
background: #a6a6f7;
color: #333;
}
#index h2 {
border-bottom-color: #fff;
}
#index ol {
display: none;
}
#index:hover ol {
display: block;
}
</style>
</head>
<body id="page">
<div class="section01">
<h1>社内用のセミナーメモなんかに使えるHTML+CSS</h1>
<div class="section02" id="index">
<h2>目次</h2>
<ol>
<li><a href="#section-lv02-01">章01</a>
<ol>
<li><a href="#section-lv03-01">節01</a></li>
<li><a href="#section-lv03-02">節02</a></li>
<li><a href="#section-lv03-03">節03</a></li>
<li><a href="#page">ページの上部へ</a></li>
</ol></li>
<li><a href="#section-lv02-02">章02</a></li>
<li><a href="#section-lv02-03">章03</a></li>
<li><a href="#page">ページの上部へ</a></li>
</ol>
<!-- /.section02 --></div>
<div class="section02" id="section-lv02-01">
<h2>章01</h2>
<p>内容が入ります。</p>
<ul>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ul>
<ol>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ol>
<div class="section03" id="section-lv03-01">
<h3>節01</h3>
<p>内容が入ります。</p>
<ul>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ul>
<ol>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ol>
<!-- /.section03 --></div>
<div class="section03" id="section-lv03-02">
<h3>節01</h3>
<p>内容が入ります。</p>
<ul>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ul>
<ol>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ol>
<!-- /.section03 --></div>
<div class="section03" id="section-lv03-03">
<h3>節01</h3>
<p>内容が入ります。</p>
<ul>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ul>
<ol>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ol>
<!-- /.section03 --></div>
<!-- /.section02 --></div>
<div class="section02" id="section-lv02-02">
<h2>章01</h2>
<p>内容が入ります。</p>
<ul>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ul>
<ol>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ol>
<!-- /.section02 --></div>
<div class="section02" id="section-lv02-03">
<h2>章01</h2>
<p>内容が入ります。</p>
<ul>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ul>
<ol>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
<li>内容が入ります。</li>
</ol>
<!-- /.section02 --></div>
<!-- /.section01 --></div>
</body>
</html>
TrackBack URL :
comment