[オープン][レスポンシブ]スクロールボタンがあるページBlHD_nmsl_JS_os
このページは幅が100%で高さ1000pxのBLOCKを縦に並べています。右の数字ボタンをクリックすると数字番目のBLOCKの最上部にジャンプします。このページのソースコードは8番目のBLOCKの下部にあります。
背景写真のアルバムを開く
・ サンプルの説明
一定のサイズ(この見本は幅が100%で高さ1000pxですが、高さは一定である必要はありません)の写真や文章などをひとまとめにしたBLOCK要素を縦に並べたホームページのテンプレートです。 ページ右側にあるスクロールボタンで各BLOCKの最上部にジャンプできます。 スクロールボタンはBLOCK要素の数に合わせて自動的に設置されますが、デザインはスタイルシートで変更可能です。
各BLOCKはclass="koboData"のdiv要素で、class="BlHD_nmsl_JS_os_base"のdiv要素で作られたBLOCKコンテナの中に作ってください。 各BLOCK内は、写真やリンクや文章など、通常のホームページの制作と同様の方法で作る事ができます。 BLOCK要素で写真のみを表示する場合はその背景画像に写真を設定します。 スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。
このサンプルは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、JavaScripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。
このページは文字コード「UTF-8」で書いています。ソースの一部を他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
PageTitle
このページは単体でもIFRAMEで他のページに貼り付けても使えます。 使用している写真は
Unsplash
さん の無料画像です。
この見本のBLOCKは幅が100%で高さ1000pxと一定にしてありますが、一定である必要はありません。BLOCKごとに高さを設定する事もできます。
掲載しているソースコードは独立したホームページ用です。他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。
このサンプルは掲載しているHTMLとCSSのソースコードのみで動き、jQueryなどのライブラリーやプラグインも、JavaScripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。
各BLOCKは class="koboData" のdiv要素で、中身はHTMLで自由に編集でます。 写真や動画やリンクや文章など、通常のホームページの制作と同様の方法で作る事ができます。
画面の小さいデバイスでの表示を考慮して、レスポンシブデザインを心がけてください。
⇔
window.addEventListener("load",function(){var Copyright = "Miyake_kobo", HomePage = "http://miyake.g2.xrea.com/", MailAddress = "miyake_kobo@yahoo.co.jp", ContentType = "Open version", i=document.createElement("div"),t,f,n;document.body.appendChild(i);i.setAttribute("class","PageScUpDiv");document.documentElement.style.scrollBehavior="smooth";var o=document.querySelector(".BlHD_nmsl_JS_os_base"),r="",u=o.querySelectorAll(".koboData"),s=u.length,h=Copyright,c=HomePage,a=MailAddress,v=ContentType,e={iy:s},l=function(n){"scrollingElement"in document?document.scrollingElement.scrollTop=u[n].offsetTop:document.body.scrollTop=u[n].offsetTop};for(t=0;t
'+(t+1)+"<\/button>";for(i.innerHTML=r,f=document.querySelectorAll(".PageScUpBut"),n=0;n
</body> </html>
[オープン][レスポンシブ]スクロールボタンがあるページBlHD_nmsl_JS_os
・ ソースコード
以下のソースコードはページ全体のもので、他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.