たぶん、おそらく、そのように

天使になれますか

01 02 03 04 05
06 07 08 09 10

旅人のパレット

01 02 03 04 05
06 07 08 09 10

ひみつの銀河

01 02 03 04 05
06 07 08 09 10

リクエスト内容

ユナさん
背景色白の画像なしのシンプルでかわいいページ

注意書き

タイトル：enamel

リンク文字や章分けをしたい場合はページを作る際に「一覧表示でのタイトルの左右」項目内に改行タグや要素タグを入れてレイアウトを組んでください。

レイアウト

名前変換 ― 文章ページ

HTML

HEAD

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
}

body {
    text-align: justify;
    font-size: 11px;
    font-family: 'Amiri', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ＭＳ 明朝", serif;
    line-height: 1.75;
}

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

.logo::before,
.logo::after {
    display: block;
    content: '';
    width: 1px;
    height: 30px;
    border-left: 1px dashed #ccc;
    margin: 0 auto;
}

.logo {
    text-align: center;
    font-family: "Hannari", serif;
}

.logo .fa {
    color: pink;
    font-size: 17px;
    margin-top: 8px;
}

.logo p {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 3px;
    line-height: 1.7;
    padding-bottom: 15px;
    text-transform: uppercase;
}

.logo h1 {
    line-height: 1.4;
    font-size: 30px;
}

.logo h1::before,
.logo h1::after {
    display: block;
    content: '\f21e';
    font-family: 'FontAwesome';
    font-size: 13px;
    margin-top: 7px;
    color: #FCBAD3;
}

.main {
    max-width: 500px;
    width: 80%;
    margin: 0 auto;
}

.main h2 {
    font-family: "Hannari", serif;
    text-align: center;
    color: #333333;
    font-size: 18px;
}

.main h2::after {
    display: block;
    content: '\f21e';
    font-family: 'FontAwesome';
    font-size: 17px;
    margin-top: 7px;
    color: #A6E3E9;    
}

.main h3 {
    margin: 30px 0 5px;
    font-size: 13px;
    letter-spacing: 2px;
}

.main section {
    max-width: 180px;
    margin: 60px auto;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.main section p {
    letter-spacing: 0.5px;
}

.main section:first-child {
    margin-top: 20px;
}

.main section:nth-child(even) a:nth-child(even),
.main section:nth-child(even) h2::after {
    color: #FCBAD3;
}

.main section:nth-child(odd) a:nth-child(odd) {
    color: #A6E3E9;
}

.main section::after {
    position: absolute;
    left: 50%;
    display: block;
    content: '';
    width: 1px;
    height: 30px;
    border-left: 1px dashed #ccc;
    margin: 25px auto 20px; 
}

.main .list {
    text-align: center;
    margin: 15px 0;
}

.main .list a {
    margin: 2px 5px;
    font-size: 14px;
}

.name h3 {
    font-size: 12px;
    margin-top: 20px;
}

.name input {
    font-family: 'Amiri', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ＭＳ 明朝", serif;
    font-size: 11px;
    display: block;
    width: 100%;
    border-radius: 4px;
    border: none;
    background: #F4F4F4;
    box-sizing: border-box;
    padding: 5px 2px;
    color: #333;
    letter-spacing: 0.8px;
}

.name input[type=text] {
    height: 24px;
}

.name input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #69d0da;
    color: #fff;
    margin: 20px 0;
}

.page {
    margin-top: 40px;
}

.page a {
    color: #69d0da;
}

.page::after,
.char::before {
    left: 50%;
    display: block;
    content: '';
    width: 1px;
    height: 30px;
    border-left: 1px dashed #ccc;
    margin: 15px auto 20px; 
}

.char {
    max-width: 400px;
    width: 80%;
    margin: 0 auto;
}

.char p {
    margin-bottom: 20px;
    font-size: 13px;
}
</style>

たぶんおそらくそのように

天使になれますか

旅人のパレット

ひみつの銀河

リクエスト内容

注意書き

レイアウト

HTML

HEAD

たぶん
おそらく
そのように