ソースコード

information

about

モノトーンの一体型ページです。（1/11）端折りすぎたので説明を追加しました。ソースまでスクロール

パソコンから見るとこんな感じです。

色指定にカスタムプロパティを使ってみました。CSS/* 基本設定 */直下の:rootでカラーコードを変更すると、ページ全体の色を変えられます。（一部変わらない部分もあります）

main contents

バナー風画像は自動でサイズ調整されます。切り取り位置は上下左右とも中央で指定しているので、変更する場合は個別にクラスを付けてobject-positionを上書きしてください。

navigation

セクションに応じてナビゲーションのスタイルが変わります。
ページ内スクロールに使うidはlink_～の形で指定してください。

最後のclass="box"要素はmin-heightを80vhにしています。/* 段落、余白 */の.box:nth-last-of-type(1)～を削除で解除できます。※該当ボックスをリンクのスクロール先にしていた場合はナビゲーションが変化しないことがあります。

mobile

スクロールでナビゲーションが格納されます。

参考元

メニューのスタイルを変える（ツーブロッカ様）
ページ内スクロール（TechAcademyマガジン様）
jQueryのレスポンシブ（ヤッテモータース様）

source & image

source code

pc

zipファイルをダウンロード
内容ファイル：以下に掲載しているものすべて（メニューアイコンはsvg版を同梱）

head

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Outline&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Jura&display=swap">
<style type="text/css">
/* フォントのライセンス表記 */
/*
'Bungee Outline','Jura' is licensed under the Open Font License.
https://fonts.google.com/specimen/Bungee+Outline
https://fonts.google.com/specimen/Jura
*/

/* リセット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:bolder}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}

/* 基本設定 */
:root {
    --bgColor: #454c53;
    --textColor: #e7edf1;
}
html {
    background: transparent;
    font-size: 62.5%;
}
body {
    min-height: 100vh;
    background: url('背景画像URL') center bottom / 100vh repeat-x fixed #454c53;
    color: var(--bgColor);
    font-size: 1.3rem;
    font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
    letter-spacing: 0.2em;
    line-height: 1.8;
}
ul,
ol {
    list-style: none;
}
a {
    text-decoration: none;
}
h2,
h3,
h4,
.mainNav,
.backTop,
#now {
    font-family: 'Jura', sans-serif;
    font-weight: normal;
}
h2 {
    margin: 2em 0 1em;
    color: #052e48;
    font-family: 'Bungee Outline', cursive;
    font-size: 2em;
    font-weight: normal;
    text-align: center;
}
h3 {
    margin: 20px 0;
    border-bottom: solid 1px #bfc7cf;
    font-size: 1.3em;
    line-height: 3.5rem;
}
h4 {
    padding: 0 15px;
    margin: 15px 5px;
    border-left: var(--bgColor) solid 3px;
    font-size: 1.1em;
    line-height: 3rem;
}
h3.ja {
    font-size: 1em;
}
h4.ja {
    font-size: 95%;
}
em {
    background: #bcd6eb;
    font-style: normal;
}
strong {
    background: var(--bgColor);
    color: #ffffff;
}

/* 段落、余白 */
p {
    padding: 0 1em;
}

.box {
    padding-top: 5vh;
    margin: 0 0 10vh;
}
.box_sub {
    padding-top: 3vh;
}
.box:nth-last-of-type(1) {
    min-height: 80vh;
    margin-bottom: 5vh;
}

.space {
    margin: 2em;
}
.contents {
    display: block;
    position: relative;
    padding: 5vh 10vh 5vh;
    margin: 0;

}
.contents a {
    color: #6c93ad;
    transition: .3s;
}

/* 基本レイアウト */
.mainHeader {
    width: 35%;
}
.contentsWrap {
    max-width: 800px;
    min-width: 500px;
    padding: 10px 0;
    margin: 0 auto 0 35%;
    background: #ffffff;
    box-sizing: border-box;
}

/* インフォ周り */
/* 表 */
.siteInfo {
    display: grid;
     grid-template-columns: 6em auto;
     grid-template-rows: auto;
     gap: 5px 1em;
}
.siteInfo dt {
    align-self: start;
    padding: 3px;
    border: #bfc8ce solid 1px;
    color: #435d68;
    font-size: 95%;
    text-align: center;
}
.siteInfo dd {
    padding: 3px;
    margin-bottom: 5px;
}

/* ブクマリスト */
.bkmList {
    display: flex;
     flex-wrap: wrap;
}
.bkmList li::before {
    content: '/';
    display: inline-block;
    margin: 0 1em;
    color: #aaaaaa;
}
.bkmList li:first-of-type::before {
    content: none;
}

/* フォーム関連共通 */
input[type],
textarea {
    border: none;
    font-family: inherit;
    font-size: 95%;
    letter-spacing: .1em;
    line-height: inherit;
}
input.enter,
textarea.enter {
    padding: .3em;
    margin-bottom: 1rem;
    border: #bbbbbb solid 1px;
}
input.button {
    padding: .3em 1em;
    margin-right: 1em;
    background: var(--bgColor);
    color: var(--textColor);
}

/* メール */
.mailForm .enter {
    width: 50%;
     min-width: 400px;
}
textarea.enter {
    height: 100px;
}

/* 名前変換 */
.nameChange {
    text-align: center;
}
.nameChange .enter {
    width: 10em;
    margin-bottom: 0;
}

/* 小説部分 */
.new {
    text-decoration: underline;
}

.long {
    display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
     gap: 2em 0;
    columns: auto;
}
.long li {
    padding-right: 1em;
}
.longInfo {
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
}
.long li a > img {
    width: 90%;
     max-width: 250px;
    height: 50px;
    object-fit: cover;
    object-position: center;
}
.longInfo > span {
    background: var(--textColor);
    font-size: 1rem;
}

.short {
    columns: 2;
}
.short a:visited {
    color: #a1b4c0;
}
.short li {
    margin-bottom: 3px;
}
.short li > span {
    margin-left: 1em;
}

/* ヘッダー */
.mainHeader {
    display: flex;
     flex-direction: column;
     align-items: flex-end;
    position: fixed;
     top: 0;
     left: 0;
    height: 100vh;
    padding: 10vh 0 50px 20px;
    box-sizing: border-box;
    color: var(--textColor);
    text-align: right;
    z-index: 2;
}

/* ナビゲーション */
.mainNav ul {
    display: flex;
     flex-direction: column;
     align-items: flex-end;
}
.mainNav li {
    padding:  0;
    margin-bottom: 1em;
}
.mainNav li:last-of-type {
    margin-bottom: 0;
}
.mainNav li a {
    display: inline-block;
    padding: 5px 15px 5px 5px;
    background: var(--bgColor);
    border: transparent solid 2px;
    border-radius: 2px;
    color: #d4e2eb;
    font-size: 1.2em;
    transition: .5s;
    word-break: break-all;
}
.mainNav .notLink {
    padding: 0 15px 0 0;
    color: #7d8991;
}
.mainNav li a:hover {
    color: #7d8991;
}
.mainNav li .active {
    transform: translateX(30px);
}
.h_space {
    padding-right: 20px;
}

.headerInfo {
    margin: auto 0 15vh;
    text-align: right;
}
h1 {
    font-size: 1.8em;
    font-weight: normal;
}
.url {
    font-size: 1rem;
}

/* トップに戻るリンク */
.backTop {
    margin-right: 5em;
    text-align: right;
}
.backTop a {
    display: inline-block;
    position: fixed;
     bottom: 3vh;
    padding: 0 10px;
    background: var(--bgColor);
    border-radius: 2px;
    color: var(--textColor);
    line-height: 3em;
}

/* フッター（削除OK※デフォルト非表示） */
.mainFooter {
    display: none;
    margin: 10vh auto;
    text-align: center;
    font-size: 1rem;
    opacity: .4;
}
.mainFooter a {
    color: #194d70;
}

/* その他 */
.center {
    text-align: center;
}
.right {
    text-align: right;
}

/* レスポンシブ調整用 */
@media (min-width:1000px) {
    .mobile {
        display: none;
    }
}

@media (max-width:999px) {
    body {
        background: var(--bgColor);
        font-size: 1.2rem;
    }

.contentsWrap {
        max-width: 600px;
        min-width: 200px;
        margin: 50px auto;
    }
    .contents {
        width: 90%;
        padding: 0;
        margin: auto;
        box-sizing: border-box;
    }

.siteInfo {
        display: flex;
         flex-direction: column;
         justify-content: center;
    }
    .siteInfo dt {
        padding: 0 1em;
    }
    .siteInfo dd {
        margin-left: 1em;
    }

.bkmList li::before {
        content: none;
    }
    .bkmList li a {
        margin-right: 1em;
    }

input.enter,
    textarea.enter {
        padding: .2em;
    }
    input.button {
        padding: .2em .5em;
    }

.mailForm .enter {
        width: 100%;
        max-width: 400px;
        min-width: 200px;
    }
    .nameChange .enter {
        width: 7em;
    }

.mainContents {
        min-width: 200px;
    }
    .long {
        display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
    }
    .long li {
        width: 100%;
        padding: 0;
    }
    .long li a > img {
        width: 100%;
    }
    .short {
        columns: auto;
    }

/* ヘッダー */
    .headerWrap {
        background: var(--bgColor);
    }
    .headerInfo {
        width: 100%;
        padding: 20px;
        margin: 0;
        box-sizing: border-box;
        text-align: right;
    }
    .mainHeader {
        align-items: flex-start;
        position: relative;
        width: 100%;
         max-width: 600px;
        height: auto;
        padding: 0;
        margin: auto;
        background: url('背景画像URL') center top / auto 100% repeat-x;
        text-align: left;
        z-index: 2;
    }
    .mainNav {
        display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
        width: 100%;
        transition: opacity 0s, transform 0s .3s;
    }
    .mainNav ul {
        flex-flow: row wrap;
        align-items: flex-start;
        width: 100%;
        padding: calc(30px + 2em) 20px 20px;
        z-index: 3;
    }
    .mainNav li {
        margin-right: 1em;
    }
    .mainNav li a {
        padding: 0 5px;
        font-size: 1em;
    }
    .mainNav li a.active {
        background: #8b979c;
        transform: translateX(0);
    }

/* ここからハンバーガーメニュー関連 */
    .stop .mainNav {
        position: fixed;
         top: 0;
         left: -100%;
        transition: opacity .5s, transform .3s;
    }
    .stop .mainNav::after {
        content: '';
        display: block;
        width: 100%;
        height: 100vh;
    }
    .stop .mainNav ul {
        background: #454c53b5;
    }
    /* hidden→viewの順で記載してください */
    .hidden {
        opacity: 0;
    }
    .view {
        opacity: 1;
        transform: translateX(100%);
    }

#navTrigger {
        position: fixed;
         top: 0;
         left: 0;
        width: 10%;
        height: 25px;
        padding: 1em;
        background: url('メニューアイコンURL') center / contain no-repeat;
        background-origin: content-box;
        cursor: pointer;
        opacity: 0;
        transition: .3s;
        visibility: hidden;
        z-index: 3;
    }
    .stop #navTrigger {
        opacity: 1;
        visibility: visible;
    }

}

@media (min-width:600px) and (max-width:999px) {
    body {
        background: url('背景画像URL') center bottom / cover no-repeat fixed var(--bgColor);
    }
    .headerWrap,
    .mainHeader {
        background: transparent;
    }
}
</style>

body

<a id="link_top"></a>

<div class="headerWrap">
<header class="mainHeader">

<nav id="mainNav" class="mainNav">
<ul>
<li><a href="#link_info">information</a></li>
<li><a href="#link_nameChange">name change</a></li>
<li><a href="#link_cat1">category1</a></li>
<li><a href="#link_cat2">category2</a></li>
<li><a href="#link_contact">mail&link</a></li>
</ul>
</nav>

<div class="headerInfo h_space">
    <h1>サイト名</h1>
    <div class="url">https://yoursite-no.url/</div>
</div>

</header>
</div>

<section>
<h2>information</h2>
<h3>about</h3>
<p>ここは○○向けの××サイトです。作中に<em>**描写</em>が登場するので苦手な方はご注意ください。</p>
<h4><span>more information</span></h4>
<dl class="siteInfo space">
    <dt>サイト名</dt>
    <dd>サイト名</dd>
    <dt>URL</dt>
    <dd>https://yoursite-no.url/</dd>
    <dt>管理人</dt>
    <dd>管理人</dd>
    <dt>その他</dt>
    <dd>ご質問や不具合報告はメールフォームまでどうぞ。</dd>
</dl>
</section>

<section>
    <h2>heading2</h2>
    <h3>heading3</h3>
    <h3 class="ja">見出し３</h3>
    <h4>heading4</h4>
    <h4 class="ja">見出し４</h4>
    <p><a href="">リンク</a>と<em>強調</em>と<strong>もっと強調</strong></p>
</section>

</section>

<div class="box mainContents">
<h2>main contents</h2>

<section id="link_nameChange" class="box_sub">
<h3>name change</h3>
<p>全頁共通です。設定中：名字名前※ダミーです。</p>

<form class="nameChange space">
<input type="text" placeholder="名字" class="enter">
<input type="text" placeholder="名前" class="enter">
<input type="submit" value="input" class="button">
</form>

</section>

<section id="link_cat1" class="box_sub">
    <h3>category1</h3>

<h4>short</h4>
    <ul class="mainList short space">
    <li><a href="">タイトル</a><span>誰々</span></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="" class="new">タイトル</a></li>
    <li><a href="" class="new">タイトル</a></li>
    </ul>
</section>

<section id="link_cat2" class="box_sub">
    <h3>category2</h3>

<h4>short</h4>
    <ul class="mainList short space">
        <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>

<section id="link_mail" class="mail">
<h2>mailform</h2>
<p>何かありましたらどうぞ！お返事はログページに書いてます。</p>
<form class="mailForm space">
<input type="text" class="enter" placeholder="お名前"><br>
<textarea class="enter" placeholder="本文を入力してください。"></textarea><br>
<input type="submit" value="送信" class="button"><input type="reset" value="消去" class="button">
</form>
</section>

<section>
<h2>bookmark</h2>
<h3>love</h3>
<ul class="bkmList space">
<li><a href="">aaa</a></li>
<li><a href="">bbbbb</a></li>
<li><a href="">cc</a></li>
<li><a href="">ddd</a></li>
<li><a href="">eeeeeee</a></li>
<li><a href="">ffff</a></li>
<li><a href="">gg</a></li>
<li><a href="">hhhh</a></li>
</ul>
<h3>thanks</h3>
<ul class="bkmList space">
<li><a href="">aaa</a></li>
<li><a href="">bbbbb</a></li>
<li><a href="">cc</a></li>
<li><a href="">ddd</a></li>
<li><a href="">eeeeeee</a></li>
<li><a href="">ffff</a></li>
<li><a href="">gg</a></li>
<li><a href="">hhhh</a></li>
</ul>
</section>

</section>

</main>

<nav class="backTop">
<a href="#link_top">top</a>
</nav>

<footer class="mainFooter">
<p>designed by <a href="https://ragusnon.wwww.jp" rel="noopener">無糖</a></p>
</footer>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){

var header = $('.mainHeader');
var navHeight = $('.mainNav ul').outerHeight();
var headerHeight = header.offset().top + header.outerHeight();
var nav = $('.mainNav');

//ページ内スクロール、ナビゲーションを閉じる
$('a[href^="#link"]').on('click', function(){
    nav.removeClass('view');

var position = $($(this).attr('href')).offset().top;
    $('html, body').animate({scrollTop:position}, 800, 'swing');
    return false;
});

//ナビゲーション開閉
$('#navTrigger').on('click', function(){
    nav.toggleClass('view');
})
nav.on('click', function(){
    nav.removeClass('view');
})

//ナビゲーションを格納、セクションに応じてactiveのクラスを付ける
$(window).on('scroll', function(){

var scroll = $(window).scrollTop();
    
    if (window.matchMedia('(max-width:999px)').matches) {
        if(scroll >= headerHeight) {
            $('body').addClass('stop'),
            nav.addClass('hidden'),
            header.css('padding-top', navHeight)
        } else {
            $('body').removeClass('stop'),
            nav.removeClass('hidden view'),
            header.css('padding-top', '')
        }
    }

$('[id^="link_"]').each(function(){
        var id = $(this).attr('id');
        var target = $('.mainNav li a[href="#' + id + '"]');

var adjust = $(window).height() * 0.2;

var offset = $(this).offset().top;
        var boxTop = offset - adjust;
        var boxBottom = offset + $(this).outerHeight() - adjust;

if (boxTop <= scroll && scroll <= boxBottom) {
            $(target).addClass('active');
        } else {
            $(target).removeClass('active');
        }
    })
})
});
</script>

image

main

背景画像

（↑背景色#454c53※このページで使用）

（↑透過バージョン）
元画像をダウンロード（Pixabay）

ファビコン
icon

mobile

icon

information

about

main contents

navigation

mobile

参考元

source & image

source code

pc

head

body

image

main

mobile

novel