[オープン][レスポンシブ]HTMLとCSSだけで作るスクロールボタンがあるページBlHD_nmsl_noJS_os
このページは幅が100%で高さ1000pxのBLOCKを縦に並べています。右の数字ボタンをクリックすると数字番目のBLOCKの最上部にジャンプします。このページのソースコードは8番目のBLOCKの下部にあります。
背景写真のアルバムを開く
・ サンプルの説明
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
一定のサイズ(この見本は幅が100%で高さ1000pxだが、高さは一定である必要はない)の写真や文章などをひとまとめにしたBLOCK要素を縦に並べたホームページのテンプレートです。 ページ右側にあるスクロールボタンで各BLOCKの最上部にジャンプできます。 スクロールボタンはa要素で、ページ内リンクになっています。 html要素のスタイルシートをscroll-behavior:smooth;としてスムーズスクロールさせています。 ただし、あくまでページ内リンクですから、ブラウザの「進む」「戻る」ボタンに反映されてしまいます。
各BLOCKはclass="koboData"のdiv要素で、class="BlHD_nmsl_JS_os_base"のdiv要素で作られたBLOCKコンテナの中に作ってください。 また、ページ内リンクのためにid="block1"~のIDを付けてください。 各BLOCK内は、写真やリンクや文章など、通常のホームページの制作と同様の方法で作る事ができます。 BLOCK要素で写真のみを表示する場合はその背景画像に写真を設定します。 スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。
このサンプルは掲載しているHTMLとCSSのソースコードのみで動きます。 JavaScripやjQueryなどのライブラリーやプラグインは不要です。 個人・商用を問わず無料で自由に使用できます。
PageTitle
このページは単体でもIFRAMEで他のページに貼り付けても使えます。 使用している写真は
Unsplash
さん の無料画像です。
この見本のBLOCKは幅が100%で高さ1000pxと一定にしてありますが、一定である必要はありません。BLOCKごとに高さを設定する事もできます。
掲載しているソースコードは独立したホームページ用です。他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。
このサンプルは掲載しているHTMLとCSSのソースコードのみで動き、JavaScripやjQueryなどのライブラリーやプラグインは不要です。 個人・商用を問わず無料で自由に使用できます。
各BLOCKは class="koboData" のdiv要素で、中身はHTMLで自由に編集でます。 写真や動画やリンクや文章など、通常のホームページの制作と同様の方法で作る事ができます。
画面の小さいデバイスでの表示を考慮して、レスポンシブデザインを心がけてください。
⇔
1
2
3
4
5
6
7
8
</body> </html>
[オープン][レスポンシブ]HTMLとCSSだけで作るスクロールボタンがあるページBlHD_nmsl_noJS_os
・ ソース
以下のソースコードはページ全体のもので、他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.