[オープン][レスポンシブ]HTMLとCSSだけで作るスクロールボタンがあるページBlHD_nmsl_noJS

/** ページ全体。ご自身のレイアウトに書き換えてください。 **/
body{font-family:"メイリオ";text-align:center;margin:0;overflow:visible;}
html{scroll-behavior:smooth;}

/** スクロールボタン。 **/
.PageScUpDiv{position:fixed;top:20px;right:20px;z-index:100;}
.PageScUpBut{display:block;box-sizing:content-box;border:solid 1px #aaa;border-radius:50%;background-color:#eee;color:#000;font-size:14px;font-weight:bold;font-family:'メイリオ';text-decoration:none;margin:5px;padding:5px 11px;}
.PageScUpBut:hover{background-color:#ffc;color:#f00;}

/** BLOCKコンテナ。 **/
.BlHD_nmsl_noJS_os_base{position:relative;top:0;left:0;width:100%;margin:auto;}

/** 個々のBLOCK。height:～px:で高さを統一。margin-bottom:20px;は余白。 **/
.BlHD_nmsl_noJS_os_base .koboData{position:relative;top:0;left:0;width:100%;height:1000px;z-index:1;box-sizing:border-box;margin-bottom:20px;}
.BlHD_nmsl_noJS_os_base .koboData .slide-contents-title{font-size:50px;color:#888;font-family:'Times';color:#900;}
@media screen and (max-width: 600px){.BlHD_nmsl_noJS_os .base .koboData{font-size:12px;}.BlHD_nmsl_noJS_os_base .koboData .slide-contents-title{font-size:40px;}}

</style>

<div id="block1" class="koboData" style="background:url('../img44/0.jpg') center center no-repeat #eee;background-size:cover;padding:3% 0;">
<div style="width:100%;text-align:center;font-weight:bold;background-color:#578;color:#fff;padding:10px 20px 10px 20px;line-height:1.5em;box-sizing:border-box;">[オープン][レスポンシブ]HTMLとCSSだけで作るスクロールボタンがあるページBlHD_nmsl_noJS_os</div>
<br />
<br />
<div style="position:relative;top:0px;left:0px;right:0px;margin:0 auto;width:40%;min-width:260px;text-align:left;padding:20px;color:#fff;font-size:16px;font-weight:bold;background-color:rgba(60,0,60,0.6);border-radius:10px;word-break:break-all;box-sizing:border-box;">
　このページは幅が100％で高さ1000pxのBLOCKを縦に並べています。右の数字ボタンをクリックすると数字番目のBLOCKの最上部にジャンプします。このページのソースコードは8番目のBLOCKの下部にあります。
</div>
<br />
<br />
<a href="../GeneralBackgroundLinkedToCarouselSlideGallery.html?d_r_z3D_xy&img44/&0&14&contain&-1" style="position:relative;top:0px;left:0px;right:0px;margin:0 auto;background-color:rgba(200,200,180,0.6);color:#000;border-radius:10px;padding:5px 8px;text-decoration: none;">背景画像のアルバムを開く</a>
</div>

<div id="block2" class="koboData" style="background-color:#333;">
<div style="position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
text-align:center;max-width:1024px;text-align:center;background-color:#ffe;margin:auto;">
<dl>
<dt style="text-align:left;font-weight:bold;background-color:#ddc;padding:10px 0px 10px 20px;">・　サンプルの説明
<dd style="text-align:left;line-height:1.5em;margin-top:10px;padding:0px 20px;">
　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。
<dd style="text-align:left;line-height:1.5em;margin-top:10px;padding:0px 20px;">
　一定のサイズ（この見本は幅が100％で高さ1000pxだが、高さは一定である必要はない）の画像や文章などをひとまとめにしたBLOCK要素を縦に並べたホームページのテンプレートです。
ページ右側にあるスクロールボタンで各BLOCKの最上部にジャンプできます。
スクロールボタンはa要素で、ページ内リンクになっています。
html要素のスタイルシートをscroll-behavior:smooth;としてスムーズスクロールさせています。
ただし、あくまでページ内リンクですから、ブラウザの「進む」「戻る」ボタンに反映されてしまいます。
<dd style="text-align:left;line-height:1.5em;margin-top:10px;padding:0px 20px;">
　各BLOCKはclass="koboData"のdiv要素で、class="BlHD_nmsl_JS_os_base"のdiv要素で作られたBLOCKコンテナの中に作ってください。
また、ページ内リンクのためにid="block1"～のIDを付けてください。
各BLOCK内は、画像やリンクや文章など、通常のホームページの制作と同様の方法で作る事ができます。
BLOCK要素で画像のみを表示する場合はその背景画像に画像を設定します。
スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも画像のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う画像を一定の枠内に表示できます。
<dd style="text-align:left;line-height:1.5em;margin-top:10px;padding:0px 20px;">
　このサンプルは掲載しているHTMLとCSSのソースコードのみで動きます。
JavaScripやjQueryなどのライブラリーやプラグインは不要です。
個人・商用を問わず無料で自由に使用できます。
</dl>
</div>
</div>

<div id="block3" class="koboData" style="background:url('../img44/1.jpg') center center no-repeat #eee;background-size:cover;">
<div style="position:absolute;bottom:50px;right:40px;width:40%;min-width:260px;text-align:left;font-size:14px;padding:20px 20px 40px 20px;background-color:rgba(255,255,255,0.6);border-radius:10px;word-break:break-all;box-sizing:border-box;">
<div class="page_title">PageTitle</div>
<br />
このページは単体でもIFRAMEで他のページに貼り付けても使えます。
使用している画像は生成AIのCopilotで作ったものです。
</div>
</div>

<div id="block4" class="koboData" style="background:url('../img44/2.jpg') center center no-repeat #eee;background-size:cover;">
<div style="position:absolute;bottom:30px;left:30px;width:40%;min-width:260px;text-align:left;padding:20px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.6);border-radius:10px;word-break:break-all;box-sizing:border-box;">
この見本のBLOCKは幅が100％で高さ1000pxと一定にしてありますが、一定である必要はありません。BLOCKごとに高さを設定する事もできます。
</div>
</div>

<div id="block5" class="koboData" style="background:url('../img44/3.jpg') center center no-repeat #eee;background-size:cover;">
<div style="position:absolute;bottom:30px;left:30px;width:40%;min-width:260px;text-align:left;padding:20px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.6);border-radius:10px;word-break:break-all;box-sizing:border-box;">
掲載しているソースコードは独立したホームページ用です。他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。
</div>
</div>

<div id="block6" class="koboData" style="background:url('../img44/4.jpg') center center no-repeat #eee;background-size:cover;">
<div style="position:absolute;top:60px;left:0px;width:100%;text-align:left;padding:20px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.4);word-break:break-all;box-sizing:border-box;">
このサンプルは掲載しているHTMLとCSSのソースコードのみで動き、JavaScripやjQueryなどのライブラリーやプラグインは不要です。
個人・商用を問わず無料で自由に使用できます。
</div>
</div>

<div id="block7" class="koboData" style="background:url('../img44/5.jpg') center center no-repeat #eee;background-size:cover;">
<div style="position:absolute;bottom:30px;left:30px;width:30%;min-width:200px;text-align:left;padding:20px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.6);border-radius:10px;word-break:break-all;box-sizing:border-box;">
各BLOCKは class="koboData" のdiv要素で、中身はHTMLで自由に編集でます。
画像や動画やリンクや文章など、通常のホームページの制作と同様の方法で作る事ができます。
</div>
</div>

<div id="block8" class="koboData" style="background-color:#efe;">
<div style="width:90%;margin:auto;">
<br />
<br />
画面の小さいデバイスでの表示を考慮して、レスポンシブデザインを心がけてください。
</div>
<br />
<br />
<img src="../dl/temp3/BlHD4.jpg" style="border-width:8px 1px 1px 1px;border-style:solid;border-color:#ccc;" />
　⇔　
<img src="../dl/temp3/BlHD4_mobile.jpg" style="border:3px solid #ddd;border-radius:6px;" />
</div>

</div>

[オープン][レスポンシブ]HTMLとCSSだけで作るスクロールボタンがあるページBlHD_nmsl_noJS_os

・　ソース: 　以下のソースコードはページ全体のもので、他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。; 　画像データは必ずご自身のものに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。