Fractale | ナノ

chapter 1

01 02 03 04 05
06 07 08 09 10

chapter 2

11 12 13 14 15

information

Request

水瀬さん
長編対応のファンタジーのような小説ページ

Material

846。- 記憶の海に沈ませて

改行を<br>に変換して表示しない設定にしています。改行が入ってしまうと番号の色が交互になりませんのでご注意ください。

游明朝体を使用しているためWindows環境の場合、文字が薄く感じる場合があります。

source code

HTML

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    list-style-type: none;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #fff;
}

strong {
    font-weight: bold;
}

p {
    margin-bottom: 20px;
}

body {
    line-height: 1.7;
    letter-spacing: 0.3px;
    font-size: 11px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
    word-break: break-all;
    text-align: justify;
    color: #fff;
    background-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2372beb3' fill-opacity='0.09'%3E%3Cpath d='M40 10L36.67 0h-2.11l3.33 10H20l-2.28 6.84L12.11 0H10l6.67 20H10l-2.28 6.84L2.11 10 5.44 0h-2.1L0 10l6.67 20-3.34 10h2.11l2.28-6.84L10 40h20l2.28-6.84L34.56 40h2.1l-3.33-10H40l2.28-6.84L47.89 40H50l-6.67-20L50 0h-2.1l-5.62 16.84L40 10zm1.23 10l-2.28-6.84L34 28h4.56l2.67-8zm-10.67 8l-2-6h-9.12l2 6h9.12zm-12.84-4.84L12.77 38h15.79l2.67-8H20l-2.28-6.84zM18.77 20H30l2.28 6.84L37.23 12H21.44l-2.67 8zm-7.33 2H16l-4.95 14.84L8.77 30l2.67-8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

body * {
    font-weight: 500;
}

header {
    background: url(#女の子_url#) no-repeat center top;
    background-size: 200px;
    min-height: 230px;
    margin: 40px 0 20px;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
}

header h1 {
    font-family: 'Amarante', serif;
    font-size: 40px;
    padding-top: 70px;
    text-shadow: 
        -4px -4px 5px rgba(25,159,153,1)
        ,4px 4px 10px rgba(113, 66, 120,1);
}

header h1 span {
    display: block;
    font-size: 14px;
    margin-top: -18px;
}

form {
    margin: 10px 0 0;
}

form input {
    display: inline-block;
    background: #000;
}

form input[type=text],
form input[type=submit] {
    font-size: 11px;
    color: #2C3E50;
    display: inline;
    border: none;
    margin: 0 2px;
    padding: 3px 10px;
}

form input[type=text] {
    width: 65px;
    line-height: 22px;
    height: 23px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
}

form input[type=submit] {
    width: 28px;
    height: 24px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(25,159,153,0.7);
    color: #fff;
    margin: 5px 0;
}

main {
    margin: 40px auto 15px;
    max-width: 400px;
    width: 80%;
}

main div {
    text-align: center;
}

main div a {
    font-family: 'Amarante', sans-serif;
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    margin: 0 5px 15px;
}

main div a::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #72beb3;
    position: absolute;
    top: -2px;
    z-index: -10;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

main div a:nth-child(odd)::before {
    background: #a690b0;
}

h2 {
    text-align: center;
    color: #fff;    
    font-family: 'Amarante', serif;
    font-size: 20px;
    letter-spacing: 3px;
    text-shadow: 
        0 0 2px rgba(25,159,153,1)
        ,0 3px 4px rgba(113, 66, 120,1);
    margin-bottom: 25px;
}

aside h2,
h2:nth-child(n+2) {
    margin-top: 50px;
}

h2 span {
    display: block;
    font-size: 11px;
}

h3 {
    font-size: 16px;
    font-family: 'Amarante', serif;
    letter-spacing: 1.5px;
    margin: 25px 0 5px;
}

h3 span {
    font-size: 17px;
    text-shadow: 
        0 0 1px rgba(25,159,153,1)
        ,0 3px 2px rgba(113, 66, 120,1);
    margin-right: 5px;
}

aside a {
    text-shadow: 
        0 0 1px rgba(25,159,153,1)
        ,0 3px 2px rgba(113, 66, 120,1);
    border-bottom: 1px dotted #666;
}

hr.head {
    background: url(#女の子_url#) no-repeat center 20px;
    background-size: 200px;
    border: none;
    height: 120px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-bottom: -50px;
}

.story h2 {
    font-size: 13px;
}

.story h2 span {
    margin-top: 5px;
}
</style>