社内用のセミナーメモなんかに使える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", "MS Pゴシック",
			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>

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :