此方は非公式二次創作を扱うサイトです。
ご理解のない方はブラウザバック推奨。
詳しくは1stに。

コンテンツ名

スマホ1カラム

見出し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>