▼

明滅するエチカ

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=Klee+One&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

/* ナビゲーション */
nav ul {
	display: flex;
}
nav ul li {
	list-style-type: none;
}
nav ul li a {  
	padding: 5px 7px;
	color: #1b3333;
	font-size: 15px;
	border-bottom: none;
}
nav ul li a:hover {
	background-color: #F2E6E6;
	color: #fff;
}

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

section ul li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	padding-right: 2px;
	font-weight: 900;
	color: gray;
}

/* 大見出し */
h1 {
	font-size: 25px;
	margin: 10px 0;
	letter-spacing: 5px;
}

/* 中見出し */
h2 {
	font-size: 15px;
	letter-spacing: 3px;
	padding: 5px 5px;
	margin: 20px auto;
	border-left: 7px solid #000;
	border-radius: 0 15px 15px 0;
	background: #f4f4f4;
}

/* 小見出し */
h3 {
	margin: 10px 0 5px;
	font-size: 13px;
}
.marker {
	background-image: linear-gradient(#fff 70%, #fc5185 70%);
}

/* リンク */
a {
	color: #1b3333;
	text-decoration: none;
	border-bottom: 1px dashed #0e121a;
}
a:hover {
	background: #F2E6E6;
	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: #F2E6E6;
	color: #1b3333;
	border: 1px solid #000;
	border-radius: 0;
	font-size: 10px;
	width: 300px;
	max-width: 90%;
	height: 100px;
}
input[type="submit"]{
	display: block;
	width: auto;
	padding: 2px 5px;
	margin: 0;
	background: #F2E6E6;
	color: #1b3333;
	border: 1px solid #000;
	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内

<div class="background-image">
	<div class="wrap"> 
	<h1>▼</h1>
	<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="wrap">
		<h2 class="head-border">Main</h2>
			<div class="small-wrap">
			<h3><span class="marker">テキストサンプル</span></h3>
すでに數年前、私は氣づいた、いかに多くの僞なるものを私は、若い頃、眞なるものとして認めたか、またそれを基としてその後私がその上に建てたあらゆるものがいかに疑はしいものであるか、またさればいつか私がもろもろの學問において或る確固不易なるものを確立しようと欲するならば、一生一度は斷じてすべてを根柢から覆へし、そして最初の土臺から新たに始めなくてはならない、と。しかしこれはたいへんな仕事であると思はれたので、私は十分に成熟してこの業に着手するにそれ以上適當ないかなる時も後に來ないといふ年齡に達するまで待つた。かやうなわけで長い間延ばしてきたので、いまやもし私が實行するために殘つてゐる時間をなほも思案に空費するならば、私は過ちを犯すことになるであらう。そこで、幸に今日、私の心は一切の憂ひから放たれ、獨り離れて、平穩な閑暇を得たから、いよいよ私は本氣に且つ自由に私のもろもろの意見のこの全般的顛覆に從事しよう。(デカルト著『省察』より／<a href= "https://www.aozora.gr.jp/cards/001029/card4730.html">引用元</a>）
			<h3><span class="marker">リストサンプル</span></h3>
				<ul>
					<li><a href="#">リンク</a></li>
					<li><a href="#">リンク</a></li>
					<li><a href="#">リンク</a></li>
				</ul>
			<h3><span class="marker">フォームサンプル</span></h3>
				<form action="プログラム機能のURL" method="post">
					<textarea id="message" name="message"></textarea>
					<input type="submit" value="送信">
				</form>
			</div>
	</div>
</section>

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