CSS @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap'); *{margin: 0; padding: 0;} body{ color:#505050; font-size: 13px; font-family: "Shippori Mincho", serif; line-height: 2.1em; letter-spacing: 0.2rem; margin: 0; -webkit-text-size-adjust: 100%; } section{ height: 100vh; height: 100dvh; width: 100vw; display: flex; justify-content: center; align-items: center; } /* リンク */ a { color:#505050; text-decoration:none; } a:visited{ color:#404040; } a:hover{ color:#eee; } mark{ background-color:#eee; } /* 本文 */ .box { width: 850px; height: 750px; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; column-width: 25em; column-rule: solid 1px #ddd; column-gap: 2rem; padding-right: 15px; overflow-x:scroll; text-align: left; } /* メディアクエリ */ @media screen and (max-width:758px){ .box{ width: 85%; height: 600px; column-width: 20em; column-gap: 30px; overflow-x: scroll; justify-content: center; text-align: left; padding:0 10px 0 10px; } } HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wifht=device-width,initial-scale=1"> <title>タイトル</title> <link rel="stylesheet" href="CSSファイル"> </head> <body> <section> <div class="box"> <p>ここに本文を入れてください</p> </div> </section> </body> </html> 戻