Sweet Chocolate

information

あまいひとときをあなたに……

Sweet Chocolateは期間限定サイトです。
良識を守ってお楽しみください。

サイト名：Sweet Chocolate
管理人：天井千代子

main contents

長文サンプル
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

source code

自動改行「しない」で作成。

おまけ→ 小説ページ

HEAD

body{
color: #40241E;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:0.85em;
line-height:1.8;
background-color: #A6652D;
background-image: linear-gradient(#A67A54 2px, transparent 2px), linear-gradient(to right, #A67A54 2px, #A6652D 2px);
background-size: 40px 60px;
background-repeat: repeat;
}
a{color:#A6652D}
a:hover{color:#D9B777}

.wrp{
width:90%;
max-width:500px;
margin: 15px auto;
}

.text{
width:90%;
max-width:800px;
margin: 15px auto;}

header{
font-family: 'Twinkle Star', 'Yomogi', cursive;
font-size: 1.2em;
}
header a{color:#D9B777}
header a:hover{color:#D9C8A9}

.menu{text-align: center;
font-size: 1.2em;}

li {
display: inline-block;
}
li:not(:first-child)::before {
font-family: "Font Awesome 5 Free";
content: '　\f004　';
font-weight: 900;
color:#E73562;
font-size:0.3em;
position: relative;
display: inline-block;
vertical-align: middle;}

.box{
background:
linear-gradient(45deg,  transparent 10px, #D9C8A9 10px),
linear-gradient(315deg, transparent 10px, #D9C8A9 10px),
linear-gradient(225deg, transparent 10px, #D9C8A9 10px),
linear-gradient(135deg, transparent 10px, #D9C8A9 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 15px;
margin: 15px;}

h1{font-weight: bold;
color:#F2D5EA;
font-family: 'Twinkle Star', 'Yomogi', cursive;
font-size: 2em;
line-height: 1.4;
display: inline-block;
text-align: right;}
h1:before{
font-family: "Font Awesome 5 Free";
content: '\f004　\f004　\f004';
font-weight: 900;
color:#E73562;
font-size:0.3em;
padding:5px;
display: inline-block;
vertical-align: middle;}

h2{font-family: 'Twinkle Star', 'Yomogi', cursive;
position: relative;
padding: 0 65px;
text-align: center;
}

h2:before {
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
content: '';
background: #40241E;
}

h2 span {
position: relative;
padding: 0 1em;
background: #D9C8A9;
}

em{
background:linear-gradient(transparent 75%, #F2D5EA 75%);
}

p{
margin: 1em;
}

p span{
font-weight: bold;
display: inline-block;
vertical-align: middle;
}
p span:before{
font-family: "Font Awesome 5 Free";
content: '\f004';
font-weight: 900;
color:#E73562;
font-size:0.3em;
padding:3px;
display: inline-block;
vertical-align: middle;
}

section{
margin-bottom: 2em;
}

.atgk{
width: 90%;
border: 3px double #40241E;
margin: 1.5em auto;
}

textarea, input{
width: 90%;
border: 1px solid #D9B777;
background: #fff;
}

footer{
text-align: center;
}
</style>

BODY

<div class="wrp">
<header>
<h1>Sweet Chocolate</h1>
<div class="menu"><ul>
<li><a href="#info">info</a></li>
<li><a href="#main">main</a></li>
<li><a href="#bkm">kiss</a></li>
</ul></div>
</header>
<div class="box">
<section>
<h2 id="info"><span>information</span></h2>
<p>あまいひとときをあなたに……</p>
<p>Sweet Chocolateは期間限定サイトです。<br><em>良識を守って</em>お楽しみください。</p>
<p>サイト名：Sweet Chocolate<br>管理人：天井千代子</p>
</section>
<section>
<h2 id="main"><span>main contents</span></h2>
<p><span>Long</span><br>
<a href="">長編タイトル</a>　○○○○<br>
<a href="">長編タイトル</a>　○○○○<br>
</p>
<p><span>短編</span><br>
<a href="">短編タイトル</a>　○○○○<br>
<a href="">短編タイトル</a>　○○○○<br>
</p>
<p><span>長文サンプル</span><br>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
</p>
</section>
<section>
<h2 id="bkm"><span>bookmark</span></h2>
<p><span>love</span><br>
<a href="">サイト名</a>　○○○○<br>
<a href="">サイト名</a>　○○○○<br>
</p>
<p><span>Thanks</span><br>
<a href="https://aqua.lovesick.jp/box/">水色小箱</a>　テンプレート<br>
<a href="">サイト名</a>　○○○○<br>
</p>
</section>
<footer>
<a href="">Back</a>
</footer>
</div>
</div>

BODY（小説）