アルカーディア

about

シンプルなセットです。jQueryを使用しています。【PC版→ページトップへジャンプ】【モバイル版→ボックスが上部に到達したら中身のスクロールを開始】初心者ゆえすみませんが改変についてのご質問はご遠慮ください。

リンクと強調はこんな感じです。

main contents

クラス名novelTateで縦並び（PC版は２カラム）、novelYokoで横並び、countで話数カウント付きになります。

source&image

head

/* リセットCSS */
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

/* PC、モバイル共通設定 */

html {
 background: transparent;
 font-size: 62.5%;
}

</style>
<style type="text/css" media="screen and (min-width:1000px)">
/* PC用CSS */

/* 共通設定 */

body {
 min-height: 100vh;
 font-size: 1.3rem;
 font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
}
a {
 text-decoration: none;
 transition: 0.3s;
}
nav,h2,h3,h4 {
 font-family: 'Mukta', sans-serif;
}
ul,ol {
 list-style: none;
}
h2 {
 display: inline-block;
 padding: 0.5em 1em;
 margin: 1em 0;
 border-bottom: solid 2px #888888;
}
h3 {
 margin: 1em;
}

/* フォーム関連設定 */

input[type],textarea,button,select {
 border: none;
 font-family: inherit;
 font-size: 100%;
 letter-spacing: 0.1em;
}
.nameChange {
 padding: 2em;
 text-align: center;
}
.nameChange input[type="text"] {
 padding: 0.2em;
 margin-right: 2em;
 border: solid 1px #888888;
 width: 10em;
}
.nameChange input[type="submit"] {
 padding: 0.2em 1em;
 background: #7cb6b4;
 color: #ffffff;
}

/* 段落設定 */

p {
 padding: 0 2em;
}
section {
 margin: 2em 0;
}

/* コンテンツボックス設定 */

.box {
 display: block;
 padding: 2em 3em;
 margin: 10vh auto;
  width: 60%;
  min-width: 600px;
}
.box a {
 background: #dcedeb;
 color: #000000;
}

/* インデックス設定 */

.index {
 display: flex;
  justify-content: flex-end;
  align-items: center;
 margin: 15vh 0 25vh;
 height: 70vh;
 background: url('画像URL') center bottom / cover #7cb6b4;
}
.siteName {
 padding: 0 3em;
 text-align: right;
}
.about {
 color: #666666;
 font-size: 0.8em;
}
h1 {
 padding: 3rem 0;
 color: #333333;
 font-size: 3em;
}

/* ナビゲーション設定 */

nav {
 position: fixed;
  left: 0;
  bottom: 0;
 width: 100%;
 background: rgba(255,255,255,0.5);
 text-transform: capitalize;
}
nav ul {
 display: flex;
  justify-content: flex-end;
  align-items: center;
 padding: 1em;
}
nav li {
 padding: 0 0.3em;
 font-size: 1em;
 font-weight: bolder;
}
nav li a {
 padding: 0 0.5em;
 color: #222222;
}
nav li a:hover {
 color: #666666;
}
.small {
 font-size: 1rem;
 text-align: center;
}
li a[href="#backToTop"] {
 font-size: 1.5em;
}

/* 小説一覧部分設定 */

*[class^=novel] {
 padding: 0 2em;
 margin: 2em 0;
 line-height: 2.5em;
}
*[class^=novel] a:visited {
 color: #384545;
}
.novelTate {
 column-count: 2;
}
.novelYoko {
 display: flex;
  flex-wrap: wrap;
}
.novelYoko li {
 margin-right: 1em;
}
.count {
 counter-reset: count;
}
.count li::before {
 display: inline-block;
 counter-increment: count;
 content: counter(count) "話";
 margin-right: 1em;
 text-align: center;
}

/* 小説本文設定 */

.text {
 margin: 10vh auto;
  width: 50%;
  min-width: 500px;
 line-height: 200%;
}
.text p {
 padding: 0;
 text-indent: 1em;
}

/* その他設定 */

.mobile {
 display: none;
}
</style>
<style type="text/css" media="screen and (max-width:999px)">
/* モバイル用CSS */

/* 共通設定 */

body {
 position: relative;
 padding-top: 50vh;
 background: url('画像URL') 30% center / cover fixed #7ab7b9;
 font-size: 1.1rem;
 font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
}
a {
 text-decoration: none;
}
nav,h2,h3,h4 {
 font-family: 'Mukta', sans-serif;
}
h2 {
 margin: 2em 0 1em;
 border-bottom: solid 1px #cccccc;
 font-weight: bolder;
}
h3 {
 margin: 0.5em;
}
ul {
 list-style: none;
}

/* フォーム関連設定 */

input[type],textarea,button,select {
 border: none;
 font-family: inherit;
 font-size: 100%;
}
.nameChange {
 padding: 2em;
 text-align: center;
}
.nameChange input[type="text"] {
 padding: 0.2em;
 margin-right: 1em;
 border: solid 1px #888888;
 width: 6em;
}
.nameChange input[type="submit"] {
 padding: 0.2em 1em;
 background: #7cb6b4;
 color: #ffffff;
}

/* 段落設定 */

p {
 padding: 0 1em;
}
section {
 margin: 2em 0;
}

/* コンテンツボックス設定 */

.box {
 margin: 2em auto;
  width: 90%;
  max-width: 500px;
 background: #ffffff;
}
.box a {
 color: #417d7b;
}

/* インデックス設定 */

/* 以下の二つは【wrap→scrollStart】の順に記述してください。 */
.wrap {
 position: sticky;
  top: 0vh;
 margin-top: 5vh;
 height: 95vh;
 background: #ffffff;
 overflow: hidden;
}
.scrollStart {
 overflow: scroll;
}

.index {
 display: flex;
  flex-direction: column;
  justify-content: center;
 padding: 5vh 0 10vh;
 margin: 0 auto;
  width: 100%;
  max-width: 500px;
 background: #ffffff;

}
.siteName {
 padding: 1em 3em 0;
}
h1 {
 padding-top: 2em;
 font-size: 1.2em;
 text-align: right;
}
.about {
 color: #888888;
 font-size: 0.9rem;
 text-align: right;
 letter-spacing: 0.1em;
 line-height: 150%;
}
nav {
 padding-bottom: 3em;
 margin: 0 auto;
  width: 100%;
 background: rgba(255,255,255,1);
 font-size: 1em;
 font-weight: bolder;
 text-transform: capitalize;
}
nav ul {
 padding: 2em;

}
nav li {
 margin: 0.3em 0;
}
nav li a {
 padding: 0 0.5em;
 color: #222222;
}
.top {
 position: fixed;
  right: 1em;
  bottom: 1em;
 font-size: 0.8rem;
 text-align: right;
 z-index: 2;
}
li a[href="#backToTop"] {
 padding: 1em 2em;
 font-size: 1.2em;
}

/* 小説一覧部分設定 */

*[class^=novel] {
 padding: 0 1em;
 margin: 1em 0;
 line-height: 2.5em;
}
ul[class^=novel] a:visited {
 color: #6f7777;
}
.novelYoko {
 display: flex;
  flex-wrap: wrap;
}
.novelYoko li {
 margin-right: 1em;
}
.count {
 counter-reset: count;
}
.count li::before {
 display: inline-block;

counter-increment: count;
 content: counter(count) "話";
 margin-right: 1em;
 text-align: center;
}

/* 小説本文設定 */

.text {
 padding: 2em;
 background: #ffffff;
 overflow: scroll;
}
.text h2 {
 position: absolute;
  left: 0;
  top:0;
 padding: 0;
 margin: 0;
 width: 100vw;
 height: 50vh;
 border: none;
 font-size: 2em;
 line-height: 50vh;
 text-align: center;
}
.text p {
 padding: 0;
 text-indent: 1em;
}
</style>

body(index)

<nav>
<ul>
<li><a href="#info">information</a></li>
<li><a href="#main">main contents</a></li>
<li><a href="#source">source&image</a></li>
<li class="top"><a href="#backToTop" id="test"><i class="fas fa-arrow-up"></i><span class="small">top</span></a></li>
</ul>
</nav>
</div>

<div class="box" id="info">
<section>
<h2>information</h2>
<p>ここは○○を取り扱う××サイトです。○○をご存じでない方および○○がお好きでない方の閲覧はご遠慮ください。</p>
</section>

<section>
<h2>about</h2>
<p>シンプルなセットです。jQueryを使用しています。【PC版→ページトップへジャンプ】【モバイル版→ボックスが上部に到達したら中身のスクロールを開始】初心者ゆえすみませんが改変についてのご質問はご遠慮ください。</p>
<p><a href="">リンク</a>と<em>強調</em>はこんな感じです。</p>
</section>
</div>

<div class="box" id="main">
<section>
<h2>main contents</h2>
<form class="nameChange">
<input type="text" placeholder="名字"><input type="text" placeholder="名前">
<input type="submit" value="送信">
</form>
<p>novelTateで２カラム縦並び、novelYokoで横並び、countで話数カウントが付きます。</p>
<ul class="novelTate count">
<li><a href="">朝に日が昇る</a>（田中）</li>
<li><a href="">いつかのさよなら</a></li>
<li><a href="">浮かんで沈む海</a></li>
<li><a href="">笑顔の裏側</a></li>
<li><a href="">思い出と記憶</a></li>
<li><a href="">神様の言うとおり</a></li>
<li><a href="">昨日は去りゆく</a></li>
<li><a href="">雲とヨット</a></li>
</ul>

<ul class="novelYoko">
<li><a href="">怪我の功名</a></li>
<li><a href="">今宵の幕開け</a></li>
<li><a href="">さらば潮騒</a></li>
<li><a href="">白きうたかた</a></li>
<li><a href="">すべては空の下で</a></li>
<li><a href="">せめて今日だけ</a></li>
<li><a href="">その夢は今もここに</a></li>
<li><a href="">ただ風に吹かれて</a></li>
</ul>
</section>
</div>
</div>

<script>

$( function() {

$(window).scroll (function() {

var $scroll = $(window).scrollTop();
 var $boxTop = $('.wrap').offset().top;
   
  if( $scroll * 1.2 >= $boxTop ) {
    $('.wrap').addClass('scrollStart');
   }else {
   $('.wrap').removeClass('scrollStart');
   }
  });

$('li.top a').click (function() {
 
  $(window).scrollTop(0);
 
 });

});
</script>

body(text)

image

サイト名