log

日々の記録と、書くことを楽しむためのブログです

【HTML・CSS】電子書籍風の縦書き小説ページを作る

HTML/CSS

電子書籍っぽい見た目の小説ページの作り方です。
主にスマホで見られることを想定し、レスポンシブっぽい感じで作ります。

完成品
- PC表示
- スマホ表示(シミュレーション)
HTML
- ポイント
CSS
- ポイント
  - #text-content(テキスト表示エリア全体)
  - #text-content p(本文)

完成品

PC表示

縦書き文章表示（PC）

スマホ表示(シミュレーション)

縦書き文章表示（スマホ）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>タイトル</title>
</head>
<body>
    <div id="text-content">
        <h1 id="text_title">作品タイトル</h1>
        <p>
            　テキストテキストテキストテキストテキスト<br />
            　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
            　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
            　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
            　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
            　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
            　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
        </p>
    </div>
</body>
</html>

ポイント

metaタグでviewportを設定し、レスポンシブに対応します

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: serif;
    color: #333;
}

/* 表示エリア全体 */
#text-content{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    overflow: auto;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* 作品タイトル */
#text_title{
    padding-left: 5px;
    font-size:1.6em;
}

/* 本文 */
#text-content p{
    font-size: 1.2em;
    letter-spacing: 0.1em;
    line-height: 1.8em;
}

ポイント

#text-content(テキスト表示エリア全体)

width: 100%を設定します。これをしないとスマホ表示の時に下に謎の空白が出来てしまいます
writing-mode: vertical-rlを設定し、縦書き表示にします
text-orientation: uprightで英数字の向きも縦にします
overflow: autoで画面外にはみ出た部分を横スクロールで表示できるようにします

#text-content p(本文)

font-sizeをemで指定することにより、文字サイズが画面に合わせた大きさになります。しっくりくる大きさにしてください
letter-spacingを指定し、字間を調整します。お好みでどうぞ
line-heightを指定し、行間を調整します。こちらもお好みでどうぞ

フォントをGoogleFontsなどのステキなものに変更すると、さらにそれっぽくなります。