Sea Flower

About

基本的にPC・タブレットでは「info」と「main」の2カラム編成になります
このページのように1カラムで使うことも可能です

PCから見た場合は下のようになります

ヘッダー画像はパブリックドメインの写真を加工しています。
↓こちらからお持ち帰りください

Source Code

自動改行「しない」で作成。

HEAD

<style type="text/css"> *{ margin:0; padding:0; } img{ display:block; } ul{ list-style-type:none; } body{ font-size:14px; line-height:1.6; } a{ color:#9cf; text-decoration:none; } a:hover{ color:#39f; } #wrap{ width:750px; margin:0 auto; } header{ background-image:url(★ヘッダーの画像URL★); background-repeat:no-repeat; background-size:contain; color:#fff; text-align:right; height:0; padding:100px 25px 100px; } h1{ font-size:40px; } nav ul{ display:flex; justify-content:space-between; text-align:center; } nav a{ background-color:#9cf; display:block; width:245px; color:#fff; text-decoration:none; padding:10px 0; } nav a:hover{ background-color:#39f; color:#fff; } #contents{ display:flex; margin:10px 0 20px; } #info{ width:280px; padding:10px; } #main{ width:430px; padding:10px; } h2{ font-size:24px; color:#39f; } h3{ font-size:18px; border-bottom:dotted 2px #ccc; padding-top:10px; } h4{ font-size:16px; color:#39f; padding-top:5px; } p{ padding:5px; } .news span{ font-weight:bold; padding:0 10px; } table{ margin:5px 0; } th{ color:#fff; background-color:#9cf; font-weight:normal; text-align:right; padding:5px; } td{ padding-left:5px; } .yoko li{ display:inline; } .yoko li:not(:last-child):after{ content:"／"; padding-left:3px; } .tate li{ padding:3px 0; } .tate span{ font-size:12px; padding-left:10px; } footer{ background-color:#9cf; color:#fff; text-align:center; padding:10px; } footer a{ color:#fff; } .novel h1{ background-color:#6cf; color:#fff; font-size:24px; padding:15px 0 10px; margin-bottom:10px; text-align:center; } .novel p{ font-size:16px; line-height:1.8; } .atgk{ font-size:14px; border:1px solid #666; margin:10px; padding:10px; } /*****ここからタブレット*************************************/ @media (min-width:640px) and (max-width:960px){ body{ font-size:16px; } #wrap{ width:100%; max-width:750px; } header{ padding:10% 25px 17%; } nav a{ width:32vw; max-width:245px; } #info{ width:35%; max-width:280px; } #main{ width:60%; max-width:430px; } } /*****ここからモバイル*************************************/ @media (max-width:639px){ body{ font-size:16px; line-height:1.7; } #wrap{ width:100%; } header{ padding:7% 5px 20%; } h1{ font-size:30px; } nav a{ width:32vw; } #contents{ display:block; } #info, #main{ width:96%; padding:2%; margin:10px auto; } h3{ font-size:20px; } h4{ font-size:18px; } table{ width:80%; margin:0 auto; } th{ text-align:center; display:block; } td{ text-align:center; display:block; padding:5px; } ul{ padding-bottom:10px; } footer{ font-size:14px; } } </style>

BODY - メインページ

<div id="wrap"> <header> <h1>Sea Flower</h1> <p>https://sea-flower.co.jp</p> </header> <nav> <ul> <li><a href="#info">Info</a></li> <li><a href="#main">Main</a></li> <li><a href="#">Clap</a></li> </ul> </nav> <div id="contents"> <section id="info"> <h2>Infomation</h2> <p>このサイトは個人による小説掲載サイトです。<br> サイト内の画像・文章等の無断転載は禁止です。<br> リンク文字は<a href="#">こう</a>なって、強調は<strong>こう</strong>なります。<br> レスポンシブ対応。</p> <h3>更新履歴</h3> <ul class="news"> <li><span>2025/8/01</span>更新内容をここに書く</li> <li><span>2025/7/24</span>小説更新</li> <li><span>2025/7/23</span>サイト作成</li> </ul> <h3>Link</h3> <p>当サイトはリンクフリー・アンリンクフリーです。</p> <table> <tr> <th>サイト名</th> <td>Sea Flower</td> </tr> <tr> <th>URL</th> <td>https://sea-flower.co.jp</td> </tr><tr> <th>管理人</th> <td>海野 花子</td> </tr> </table> <aside> <h4>Bookmark</h4> <ul class="yoko"> <li><a href="#" target="_blank">リンク先１</a></li> <li><a href="#" target="_blank">リンク先２</a></li> <li><a href="#" target="_blank">リンク先３</a></li> </ul> </aside> </section> <section id="main"> <h2>Main Contents</h2> <article> <h3>長編</h3> <h4>長編タイトル</h4> <ul class="yoko"> <li><a href="#">01</a></li> <li><a href="#">02</a></li> <li><a href="#">03</a></li> <li><a href="#">04</a></li> <li><a href="#">05</a></li> </ul> <h4>長編タイトル２</h4> <ul class="yoko"> <li><a href="#">01</a></li> <li><a href="#">02</a></li> <li><a href="#">03</a></li> <li><a href="#">04</a></li> <li><a href="#">05</a></li> </ul> </article> <article> <h3>短編</h3> <ul class="tate"> <li><a href="novel.html">短編01</a><span>本文ページ見本</span></li> <li><a href="#">短編02</a><span>××</span></li> <li><a href="#">短編03</a><span>△△</span></li> <li><a href="#">短編04</a><span>○○</span></li> <li><a href="#">短編05</a><span>△△</span></li> </ul> <h4>短編横並びver</h4> <ul class="yoko"> <li><a href="#">短編01</a></li> <li><a href="#">短編02</a></li> <li><a href="#">短編03</a></li> <li><a href="#">短編04</a></li> <li><a href="#">短編05</a></li> </ul> </article> </section> </div><!--#contents--> <footer> <p><a href="https://aqua.lovesick.jp/box/" target="_blank">Designed</a></p> </footer> </div><!--#wrap-->

BODY - 小説ページ

<div id="wrap"> <section class="novel"> <h1>小説のタイトル</h1> <article> <p> 　本文</p> <p class="atgk">あとがき</p> </article> </section> <footer> <p><a href="">Back</a></p> </footer> </div><!--#wrap-->