BUBBLES

REQUEST

緑畑さん
水色を中心に白を入れた淡い雰囲気のシンプルな、もしくはエレガント系の小説ページ

MATERIAL

enamelタイトル
Frame Designクラシック飾り枠4隅タイプ
青空文庫『相川おけさ』より引用

改行を<br>に変換して表示しない、また本文の改行を<br>に変換しない設定にしています。改行が入ってしまうとリンク色が交互になりません。

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

CSSにて素材の色を反転していますので、素材はそのまま使用してください。※IEでは色の反転CSS（filer）が効かないため、素材を非表示にしていますのでご了承ください。

HTML

CSS

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

input, button, textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
}

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

html::before,
html::after,
body::before,
body::after {
    position: fixed;
    display: block;
    content: '';
    width: 100px;
    height: 88px;
    -webkit-filter: invert(90%);
    -moz-filter: invert(90%);
    -o-filter: invert(90%);
    -ms-filter: invert(90%);
    filter: invert(90%);
    z-index: 10;
}

html::before {
    background: url(#フレーム素材#) no-repeat left top;
    background-size: 680px;
    top: 10px;
    left: 10px;
}

html::after {
    background: url(#フレーム素材#) no-repeat right top;
    background-size: 680px;
    top: 10px;
    right: 10px;
}

body::before {
    background: url(#フレーム素材#) no-repeat left bottom;
    background-size: 680px;
    bottom: 10px;
    left: 10px;
}

body::after {
    background: url(#フレーム素材l#) no-repeat right bottom;
    background-size: 680px;
    bottom: 10px;
    right: 10px;
}

body {
    font-family: 'David Libre', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
    font-size: 12px;
    line-height: 1.8;
    color: #555;
    text-align: justify;
    word-break: break-all;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dfeff0' fill-opacity='0.56' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.wrapper {
    width: 80%;
    max-width: 400px;
    margin: 100px auto 0;
    padding: 20px;
    background: rgba(255,255,255,0.8);
}

.wrapper:nth-child(n+2) {
    margin-top: 40px;
    margin-bottom: 50px;
}

.story article,
.wrapper:nth-child(n+2) article {
    display: block;
}

header {
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
}

.story header {
    max-width: 100%;
}

header h1 {
    font-family: 'Judson', serif;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(124, 202, 196,0.2);
    box-shadow: 0 1px 0 rgba(255,255,255,1);
}

header p {
    margin-top: 8px;
    letter-spacing: 2px;
    font-size: 10px;
}

header .lnr {
    display: block;
    font-size: 13px;
    margin: 10px 0 0;
    color: #E4DCAD;
}

article {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

article dl dt {
    float: left;
    font-size: 12px;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #b3e0dc;
    color: #fff;
    position: relative;
    top: 3px;
}

article dl dd {
    overflow: hidden;
    margin-bottom: 20px;
}

article dl dd a {
    font-size: 15px;
    letter-spacing: -1px !important;
}

article dl dd span {
    display: block;
    font-size: 10px;
    color: #cfcfcf;
    letter-spacing: 0.8px;
    line-height: 1.4;
}

article dl dt:nth-child(4n+1) {
    background: #e2e2e2;
}

article h2 {
    display: inline-block;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    color: #aaa;
    padding: 0 8px;
    letter-spacing: 1px;
    font-size: 14px;
    margin: 0 0 10px;
}

article h2:nth-child(n+2) {
    margin-top: 40px;
}

article p {
    margin-bottom: 15px;
}

article p a {
    letter-spacing: 0.5px;
    color: #8fd1cb;
    border-bottom: 1px solid #efefef;
    margin-right: 6px;
}

form {
    margin: 25px 0 15px;
}

form input[type=text],
form input[type=submit] {
    line-height: 1.8;
    font-size: 10px;
    font-family: 'David Libre', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
    color: #555;
    display: inline;
    background: #f2f2f2;
    border: none;
    padding: 3px 10px;
    border-radius: 3px;
}

form input[type=text] {
    width: 70px;
    line-height: 22px;
    height: 26px;
}

form input[type=submit] {
    width: 80px;
    height: 24px;
    margin-top: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #b3e0dc;
    border-bottom: 3px solid #a1d9d4;
    color: #fff;
}

/* IE対応 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop,
    html::before,
    html::after,
    body::before,
    body::after {
    display: none;
  }
}
</style>

INFORMATION

REQUEST

MATERIAL

HOW TO USE

SOURCE CODE

HTML

CSS