macrat/LC.html

## LC.html
<!doctype html>

<html>
<head>
<title>LinuxClub</title>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1.0">
<style>
body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
header {
	padding: 1em 0 1em 5%;
	background-color: skyblue;
	color: white;
}
header > a {
	font-size: 270%;
	display: block;
	color: white;
	text-decoration: none;
}
nav > span {
	display: none;
}
nav a {
	font-size: 130%;
	line-height: 1.5em;
	color: white;
}
nav ul {
	margin: 0;
}
body > div {
	overflow: auto;
}
main {
	padding: 1em 1em .5em;
	max-width: 80em;
	margin: auto;
}
@media screen and (min-height: 30em) and (min-width: 50em) {
	body {
		display: flex;
		flex-direction: column;
		position: fixed;
		overflow: hidden;
	}
}
@media screen and (min-width: 50em) {
	nav ul {
		list-style: none;
		padding: 0;
	}
	nav li {
		display: inline;
	}
	nav li:after {
		content: " |";
		font-size: 120%;
	}
	nav li:last-child:after {
		content: "";
	}
}
@media screen and (max-width: 50em) {
	nav > span {
		display: block;
		position: absolute;
		top: .5em;
		right: .5em;
		font-size: 200%;
		font-weight: bold;
	}
	nav > span:hover {
		padding-left: 10em;
		padding-bottom: 5em;
	}
	header li {
		overflow: hidden;
		z-index: 1;
		height: 0;
		opacity: 0;
		transition: .3s;
	}
	header:hover li {
		overflow: visible;
		height: 30px;
		opacity: 1;
	}
}
footer {
	text-align: right;
	font-style: italic;
}

p:first-letter {
	margin-left: 1em;
}

table {
	border-collapse: collapse;
}
th, td {
	border: 1px solid gray;
	padding: .3em .5em;
}
</style>
</head>

<body>
	<header>
		<a href="">LinuxClub</a>

		<nav>
			<span>三</span>
			<ul>
				<li><a href="">活動内容</a></li>
				<li><a href="">活動実績</a></li>
				<li><a href="">メンバー紹介</a></li>
				<li><a href="">ダウンロード</a></li>
				<li><a href="">お問い合わせ</a></li>
			</ul>
		</nav>
	</header>

	<div>
		<main>
			<article>
				<h1>LinuxClubとは</h1>

				<p>LinuxClubは、東京工科大学公認のプログラミングサークルです。Webサイト制作、サーバ構築、スマートフォンアプリ開発、ネットワークセキュリティ解析など、幅広く取り扱っています。</p>
				<p>現在は主にWebサイト制作の講習会や、各メンバーが個人で制作したものの発表会等を行っています。</p>
				<p>毎週火曜日と金曜日の放課後に、大学内でも選りすぐりの天才ハッカー達が集い、IT業界の最新動向について語り合ったり、技術情報を交換したり、密かにプロジェクトを遂行したりしています。</p>
				<p>少しでも興味のある方は、こちらでお問い合わせいただくか、一度ふらっと足を運んで見て下さい。</p>

				<section>
					<h2>活動日程</h2>
					<table>
					<tr><th>活動日</th><td>毎週火曜・金曜</td></tr>
					<tr><th>場所</th><td>火曜：講実402<br>金曜：講実306</td></tr>
					<tr><th>時間</th><td>5時限目終了後</td></tr>
					</table>
				</section>
			</article>

			<aside>
				<br><br>
				<script>
					var l = 64;
					for(var i=0; i<l; i++){
						document.write("this is test content (" + Math.round(i/(l-1)*100) + "%)<br>")
					}
				</script>
			</aside>
		</main>

		<footer><small>Copyright (c) 2016 <a href="" onclick="alert('そんなものはない。');return false;">Next LC WebSite</a> All rights reserved.</small></footer>
	</div>
</body>
</html>
	<!doctype html>

	<html>
	<head>
	<title>LinuxClub</title>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1.0">
	<style>
	body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	header {
	padding: 1em 0 1em 5%;
	background-color: skyblue;
	color: white;
	}
	header > a {
	font-size: 270%;
	display: block;
	color: white;
	text-decoration: none;
	}
	nav > span {
	display: none;
	}
	nav a {
	font-size: 130%;
	line-height: 1.5em;
	color: white;
	}
	nav ul {
	margin: 0;
	}
	body > div {
	overflow: auto;
	}
	main {
	padding: 1em 1em .5em;
	max-width: 80em;
	margin: auto;
	}
	@media screen and (min-height: 30em) and (min-width: 50em) {
	body {
	display: flex;
	flex-direction: column;
	position: fixed;
	overflow: hidden;
	}
	}
	@media screen and (min-width: 50em) {
	nav ul {
	list-style: none;
	padding: 0;
	}
	nav li {
	display: inline;
	}
	nav li:after {
	content: " \|";
	font-size: 120%;
	}
	nav li:last-child:after {
	content: "";
	}
	}
	@media screen and (max-width: 50em) {
	nav > span {
	display: block;
	position: absolute;
	top: .5em;
	right: .5em;
	font-size: 200%;
	font-weight: bold;
	}
	nav > span:hover {
	padding-left: 10em;
	padding-bottom: 5em;
	}
	header li {
	overflow: hidden;
	z-index: 1;
	height: 0;
	opacity: 0;
	transition: .3s;
	}
	header:hover li {
	overflow: visible;
	height: 30px;
	opacity: 1;
	}
	}
	footer {
	text-align: right;
	font-style: italic;
	}

	p:first-letter {
	margin-left: 1em;
	}

	table {
	border-collapse: collapse;
	}
	th, td {
	border: 1px solid gray;
	padding: .3em .5em;
	}
	</style>
	</head>

	<body>
	<header>
	<a href="">LinuxClub</a>

	<nav>
	<span>三</span>
	<ul>
	<li><a href="">活動内容</a></li>
	<li><a href="">活動実績</a></li>
	<li><a href="">メンバー紹介</a></li>
	<li><a href="">ダウンロード</a></li>
	<li><a href="">お問い合わせ</a></li>
	</ul>
	</nav>
	</header>

	<div>
	<main>
	<article>
	<h1>LinuxClubとは</h1>

	<p>LinuxClubは、東京工科大学公認のプログラミングサークルです。Webサイト制作、サーバ構築、スマートフォンアプリ開発、ネットワークセキュリティ解析など、幅広く取り扱っています。</p>
	<p>現在は主にWebサイト制作の講習会や、各メンバーが個人で制作したものの発表会等を行っています。</p>
	<p>毎週火曜日と金曜日の放課後に、大学内でも選りすぐりの天才ハッカー達が集い、IT業界の最新動向について語り合ったり、技術情報を交換したり、密かにプロジェクトを遂行したりしています。</p>
	<p>少しでも興味のある方は、こちらでお問い合わせいただくか、一度ふらっと足を運んで見て下さい。</p>

	<section>
	<h2>活動日程</h2>
	<table>
	<tr><th>活動日</th><td>毎週火曜・金曜</td></tr>
	<tr><th>場所</th><td>火曜：講実402<br>金曜：講実306</td></tr>
	<tr><th>時間</th><td>5時限目終了後</td></tr>
	</table>
	</section>
	</article>

	<aside>
	<br><br>
	<script>
	var l = 64;
	for(var i=0; i<l; i++){
	document.write("this is test content (" + Math.round(i/(l-1)*100) + "%)<br>")
	}
	</script>
	</aside>
	</main>

	<footer><small>Copyright (c) 2016 <a href="" onclick="alert('そんなものはない。');return false;">Next LC WebSite</a> All rights reserved.</small></footer>
	</div>
	</body>
	</html>