此処は一次、二次創作サイトです。
ジャンルは様々に創作、夢小説や夢絵をかいています。
初めての方は【説明】を一読ください。

深海のクリスタリア

夢小説、夢絵、最強主、男装、転生、などのドリーム設定でよくある言葉に少しでも拒否反応が出た場合は速やかにブラウザバックされることを推奨します。

トップ画像は自作です。
作成者のサイトトップ画像とほぼ同じものです。
サイトの素材→円窓素材→初夏より保存してお使いください。
直リンクはご遠慮ください。

トップにメインコンテンツ等を置く想定で作成しておりますが、お好きなように改装してください。
PCのことを考えると表示量は多めのほうが見てくれはいいと思うけれど、少ない量でも左のボックスと同じ高さは保持されるはずなのでがっつり書かなくても大丈夫なはずです。

見出し1

見出し2

見出し3

見出し4(日本語タイトル向け？)

更新履歴サンプル

更新履歴用のボックスです。
ここに色々書けます。
↓
スクロールテストです。
スクロールテストです。
スクロールテストです。
スクロールテストです。
スクロールテストです。

フォームサンプル

▼ラジオボタン
サンプルサンプル

▼チェックボックス
sample-checkbox1

sample-checkbox2

sample-checkbox3

▼セレクトボックス

※ダミーですので実際に送信することは出来ません。

1スクロールテストです。
2スクロールテストです。
3スクロールテストです。
4スクロールテストです。
5スクロールテストです。
6スクロールテストです。
7スクロールテストです。
8スクロールテストです。
9スクロールテストです。
10スクロールテストです。
11スクロールテストです。
12スクロールテストです。
13スクロールテストです。
14スクロールテストです。
15スクロールテストです。
16スクロールテストです。
17スクロールテストです。
18スクロールテストです。
19スクロールテストです。
20スクロールテストです。

コピー用box

CSS

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

/* 全体の設定 */
html, body {
   height: 100%;
}

body {
   background-color: #fff;
   color: #303030;
   overflow-wrap: break-word;
   word-wrap: break-word;
   text-align: center;
   line-height: 1.2em;
   font-family:"Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
}

.wrap { 
   width:100%;
}
@media screen and (min-width:768px) {
.wrap {
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
}

/* 見出し */
h1{
   color: #030303;
   margin-bottom:0.5em;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;}

h1:first-letter {
   color: #192f60;
}

h2{
   border-bottom:1px solid #030303;
   margin-bottom:0.5em;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;}

h2:first-letter {
   margin-right: 0.1em;
   font-size: 140%;
}

h3 {
   padding: 0.2em 0.2em 0.2em;
   border-left: 6px solid #192f60;
   margin-bottom: 0.2em;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
}

h4 {
   margin-top: 1.2em;
   margin-bottom: 0px;
   font-size:140%;
   font-family: "衡山毛筆フォント" 
}

/* main部分 */
@media screen and (max-width:767px) {
.main { 
   width:100%;
}
}
@media screen and (min-width:768px) {
.main {
    padding-bottom: 70px;
}
}

/* 左(スマホでは上)のボックスの指定 */
.left_box {
   background-color: #192f60;
   color: #fff;
   text-align: center;
   padding: 15px;
}
@media screen and (min-width:768px) {
.left_box {
   float : left;
   width: 38%;
   height: 100%;
}
}
.left_box p {
   text-align: left;
}
.left_box p a:link,
.left_box p a:visited{
   color: #fff;
   text-decoration: none;
   border-bottom: 1px dashed;
}
.left_box p a:hover,
.left_box p a:active{
   color: #fff;
   text-decoration: none;
   border-bottom: 1px dashed;
}

/* トップ画像 */
.top_img {
   display: block;
   margin: 0 auto;
   margin-left: auto;
   margin-right: auto;
   background: url('画像url');
   background-size: cover;
}
/* 横幅1279pxまでの画像の大きさ */
@media screen and (max-width:1279px) {
.top_img {
   width: 200px;
   height: 200px;
}
}
/* 横1280px以上でトップ画像の大きさを変えてトップ画像の横に説明文 */
@media screen and (min-width:1280px) {
.top_img {
   width: 320px;
   height: 320px;
   float: left;
}
p.yoko {
   width: auto;
   height: 320px;
   display: table-cell;
   vertical-align: middle;
}
}

/* メニュー部分 */
.menu {
   clear:both;
   text-align: center;
   padding-top: 1em;
}
a.button {
   display: inline-block;
   width: 45px;
   height: 45px;
   font-size: 30px;
   text-decoration: none;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   text-align: center;
   background-color: #192f60;
   color: #fff;
   border: solid 2px #fff;
   padding: 5px;
   margin: 5px;
}

a.button:hover,
a.button:active {
   background-color: #fff;
   color: #192f60;
}
a.button span{
   display: block;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
   font-size: 12px;
   margin-top: 0;
	}

/* 右(スマホでは下)のボックスの指定 */
.right_box {
   background-color: #fff;
   color: #303030;
   text-align: left;
   padding: 0 15px;
}
.right_box a:link,
.right_box a:visited{
   color: #192f60;
   text-decoration: none;
   border-bottom: 1px dashed;
}
.right_box a:hover,
.right_box a:active{
   color: #192f60;
   text-decoration: none;
   border-bottom: 1px dashed;
}

/* 768px以上の媒体での下スペースとスクロールの設定 */
@media screen and (min-width:768px) {
.sp {
    padding-bottom: 70px;
}
.scroll {
   height: 100%;
   overflow: auto;
}
}

/* 横並び(float)解除用の指定 */
@media screen and (min-width:768px) {
.clear { 
clear:both;
}
}

/* ヘッダー */
#header>.icon {
   margin: 0 auto;
   padding: 35px 0 0;
   display: block;
   width: 26px;
   height: 20px;
   line-height: 55px;
   background: #192f60;
   color: #FFF;
   text-align: center;
   -webkit-border-bottom-right-radius: 22px;
   -webkit-border-bottom-left-radius: 22px;
   -moz-border-radius-bottomright: 22px;
   -moz-border-radius-bottomleft: 22px;
   border-bottom-right-radius: 22px;
   border-bottom-left-radius:
22px;
}
#header>.title {
   margin: 10px auto;
   display: block;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
   font-size: 1.2em;
   color: #192f60;
   text-align: center;
}

/* フッター */
#footer {
   clear:both;
   width: 100%;
   background-color: #303030;
   color: #fff;
   text-align: center;
}
@media screen and (max-width:767px) {
#footer {
    padding: 5px 0;
}
}
@media screen and (min-width:768px) {
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70px;
}
}
#footer a:link,
#footer a:visited{
   color: #fff;
   text-decoration: none;
   border-bottom: 1px dashed;
}
#footer a:hover,
#footer a:active{
   color: #fff;
   text-decoration: none;
   border-bottom: 1px dashed;
}

/* 更新履歴用box */
.update {
   max-width: 300px;
   height: 40px;
   overflow: auto;
   border-style: dashed none;
   background-color: 
   border-color: #192f60;
}

/* 画像サイズを画面に合わせて表示する設定 */
img {
    max-width: 100%;
    height: auto;
}

/* テキストエリアやボタンの設定 */
/* 小さいテキストエリア */
input[type="text"]{
   width: 10em;
   margin: 2px;
   padding: 3px;
   border:1px solid #192f60;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
}

/* submitボタン */
input[type="submit"]{
   width: auto;
   height: auto;
   margin: 1px 1px;
   padding: 1px;
   color: #000000;
   border: 1px solid #192f60;
   background: #ffffff;
   font-size: small;
   font-family: serif;
   word-break: break-all;
   -webkit-box-shadow: none;
   border-radius: 5px;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
}
input[type="submit"]:hover{
   background: #9fb7d4;
   color: #fff;}

/* 大きいテキストエリア */
textarea {
   max-width: 25em;
   height: 7em;
   margin: 2px;
   padding: 3px;
   border:1px solid #192f60;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
}

/* 大小のテキストエリアをフォーカス時に背景色変える */
input[type="text"]:focus,
textarea:focus {
   background: #9fb7d4;
}

/* ラジオボタン */
input[type="radio"]{
  -webkit-appearance: none;
  width:15px;
  height:15px;
  border:1px solid #ccc;
  border-radius:15px;
  background:transparent;
  opacity:0.5;
}
input[type="radio"]:checked{
  background:#9fb7d4;
  opacity:1;
}

/* チェックボックス */
input[type="checkbox"]{
   -webkit-appearance: none;
   width:17px;
   height:17px;
   border: 1px solid #ccc;
   border-radius:2px;
   background:transparent;
   opacity:0.5;
}
input[type="checkbox"]:checked {
   background:#9fb7d4;
   opacity:1;
}

/* セレクトボックス */
select{
   width: 15em;
   outline:none;
   text-indent: 0.01px;
   text-overflow: '';
   background: none transparent;
   vertical-align: middle;
   font-size: inherit;
   color: inherit;
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   border:1px solid #192f60;
   font-family: "Roboto Slab" , Garamond , "Times New Roman" , "XANO明朝" , serif;
}
select option{
   background-color: #fff;
   color: #030303;
}
select::-ms-expand {
   display: none;
}
select:-moz-focusring { 
   color: transparent; 
   text-shadow: 0 0 0 #828c9a;
}
</style>

body

<div class="wrap">
<div class="main">
  <div class="left_box scroll">
<div class="top_img"></div>
<p class="yoko">
此処にHPの説明等。<br>
此方は◯◯サイトです。とか。<br>
3～4行くらいが綺麗に見えるかもしれません。</p>
<div class="menu">
<a href="#" class="button"><i class="fa fa-fw fa-home"></i><span>とっぷ</span></a>
<a href="#" class="button"><i class="fa fa-fw fa-question"></i><span>説明</span></a>
<a href="#" class="button"><i class="fa fa-fw fa-book"></i><span>日記</span></a>
<a href="#" class="button"><i class="fa fa-fw fa-bookmark"></i><span>繋がり</span></a>
</div><p class="sp"></p>
  </div>

<div class="right_box scroll">

<div id="header"><span class="icon"><i class="fa fa-home"></i></span><span class="title">Home</span></div>

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4(日本語タイトル向け？)</h4>
<br>
<h3>更新履歴サンプル</h3>
<div class="update">更新履歴用のボックスです。<br>
ここに色々書けます。<br>
↓<br>
スクロールテストです。<br>
スクロールテストです。<br>
スクロールテストです。<br>
スクロールテストです。<br>
スクロールテストです。</div>
<p>
<h4>フォームサンプル</h4>
<input type="text"><br>
<input type="text"><br>
<textarea>フォームサンプルです。
選択した時に背景色が変わります。</textarea></p>
<p>
▼ラジオボタン<br>
<input type="radio" name="example" value="サンプル">サンプル
<input type="radio" name="example" value="サンプル" checked>サンプル
</p>
<p>
▼チェックボックス<br>
<input type="checkbox"><label>sample-checkbox1</label></p>
<p><input type="checkbox"><label>sample-checkbox2</label></p>
<p><input type="checkbox"><label>sample-checkbox3</label></p>
<p>
▼セレクトボックス<br>
<select name="" id="">
<option value="">SELECT.01</option>
<option value="">SELECT.02</option>
<option value="">SELECT.03</option>
</select>
<form><input type='submit' value='submit'></form>
※ダミーですので実際に送信することは出来ません。
</p>
<p>
文章を書く時は<p>～</p>の間で書きます。
</p>
<p class="sp"></p>
</div>
</div>
</div>