エイロネイア

Information

注意事項

動作確認はWindows, iOSでのみ行っております。使用ブラウザはMicrosoft Edge, Google Chrome, Safariです。素人が趣味で作成しているものであり、環境によってはレイアウト崩れや不具合など起こる可能性がございますので、あらかじめご了承ください。またテンプレートの内容は予告なく修正される場合が御座います。再配布・自作発言はご遠慮いただいておりますが、各環境に応じての改変は自由ですので、お好きなように中身を書き換えてご利用ください。改変のサポートやコードの仕様に関するご質問にはお答えいたしかねます。リンクや配布元明記、使用報告などは強制しておりませんが、していただけると大変嬉しいです。

Main

テキストサンプル

僕たちの主張というのは、僕たちは決して自分から間違ったことをしないというものか、あるいは、間違ったことをやるべき時とやってはいけない時があるというものか、どっちなんだろうか。言い換えると、間違ったことは常に悪くて不名誉なことなのかどうか、ということだ。昔こういうことを議論していて、僕たちはこの点で意見の一致を見たね。それとも、その意見はわずかな日数でもって捨てられてしまったのかね。僕たちは、こんなに年寄りで、しかもお互い長いことあんなに真剣に議論していながら、発見したのは、僕たちが子供と何の変わりもないということに過ぎなかったのか。それとも、多くの人の意見があっても、あるいは結果の善し悪しにかかわらず、僕たちは、不正は常に悪いことであり、不正な行動は不名誉をもたらすものだと主張するのだろうか。僕たちはそうすべきなのか。(プラトン著『クリトン』より／引用元）

リストサンプル

フォームサンプル

SourceCode

コピーボックス

背景画像は[はだし]様よりお借りしております。こちらのリンクより飛んでいただき、直接素材のダウンロードをお願いいたします。素材の使用方法等については先方の規約に従ってください。基本的に自動改行はしない前提で作成しています。また注意事項にも記載の通り、フッターのリンクについては記載必須という訳ではございませんので、適宜修正してご使用ください。
HEAD内

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap" rel="stylesheet">

/* ナビゲーション */
nav {
	width: 210px;
	margin: 0 auto;
}
nav ul {
	display: flex;
	justify-content: space-around;
}
nav ul li {
	list-style-type: none;
	border: 1px dashed #1b3333;
}
nav ul li a {  
	display: block;
	width: 100%;
	padding: 5px 7px;
	color: #1b3333;
	font-size: 12px;
	border-bottom: none;
}
nav ul li a:hover {
	background-color: #9B9B8B;
	color: #fff;
}

/* リスト */
section ul {
	padding-left: 10px;
	list-style-position: inside;
}
section ul li {
	padding-left: 1px;
	list-style-type: square;
}

/* 大見出し */
h1 {
	margin: 30px auto;
	font-size: 30px;
	text-align: center;
	letter-spacing: 5px;
}

/* 中見出し */
h2 {
	margin: 10px auto;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
h2::before {
	border-top: 1px dashed #1b3333;
	content: "";
	flex-grow: 9;
}
h2::after {
	border-top: 1px dashed #1b3333;
	content: "";
	flex-grow: 1;
}
h2::after {
	margin-left: 15px; 
}
h2::before {
	margin-right: 15px; 
}

/* 小見出し */
h3 {
	margin: 15px auto 5px;
	font-size: 13px;
}

/* リンク */
a {
	color: #1b3333;
	text-decoration: none;
	border-bottom: 1px dashed #0e121a;
}
a:hover {
	background: #9B9B8B;
	color: #fff;
}

/* フォーム */
form {
	display: block;
}
input[type="text"],textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-box-shadow: none;
	appearance: none;
	padding: 5px 5px;
	margin: 5px 0;
	box-shadow: none;
	background: #F5F5DC;
	color: #1b3333;
	border: 1px dashed #0e121a;
	border-radius: 0;
	font-size: 10px;
	width: 300px;
	max-width: 90%;
	height: 100px;
}
input[type="submit"]{
	display: block;
	width: auto;
	padding: 3px 5px;
	margin: 0;
	background: #F5F5DC;
	color: #1b3333;
	border: 1px dashed #0e121a;
	border-radius: 0;
	font-size: 10px;
	font-weight: 150;
	letter-spacing: 3px;
	line-height: 250%;
}

/* フッター */
footer {
	text-align: center;
	color: #1b3333;
	margin-top: 20px;
	font-size: 11px;
	opacity: 0.6;
}

</style>

HTML内

<main>
	<div class="wrap"> 
		<div class="transparent">
			<h1>エイロネイア</h1>
			<nav>
				<ul>
					<li><a href="#info">info</a></li>
					<li><a href="#main">main</a></li>
					<li><a href="#code">code</a> </li>
				</ul>
			</nav>
		</div>
	</div>

<section id="main">
		<div class="band">
			<div class="wrap">
				<h2 class="head-border">Main</h2>
				<h3>テキストサンプル</h3>
僕たちの主張というのは、僕たちは決して自分から間違ったことをしないというものか、あるいは、間違ったことをやるべき時とやってはいけない時があるというものか、どっちなんだろうか。言い換えると、間違ったことは常に悪くて不名誉なことなのかどうか、ということだ。昔こういうことを議論していて、僕たちはこの点で意見の一致を見たね。それとも、その意見はわずかな日数でもって捨てられてしまったのかね。僕たちは、こんなに年寄りで、しかもお互い長いことあんなに真剣に議論していながら、発見したのは、僕たちが子供と何の変わりもないということに過ぎなかったのか。それとも、多くの人の意見があっても、あるいは結果の善し悪しにかかわらず、僕たちは、不正は常に悪いことであり、不正な行動は不名誉をもたらすものだと主張するのだろうか。僕たちはそうすべきなのか。(プラトン著『クリトン』より／<a href= "https://www.aozora.gr.jp/cards/000915/card4333.html">引用元</a>）
				<h3>リストサンプル</h3>
					<ul>
						<li><a href="#">リンク</a></li>
						<li><a href="#">リンク</a></li>
						<li><a href="#">リンク</a></li>
					</ul>
				<h3>フォームサンプル</h3>
					<form action="プログラム機能のURL" method="post">
						<textarea id="message" name="message"></textarea>
						<input type="submit" value="送信">
					</form>
			</div>
		</div>
	</section>
</main>

<footer>
Template by <a href="https://alicex.jp/vaidurya/">毘瑠璃.</a>
</footer>