スキップしてメイン コンテンツに移動

投稿

ラベル(ボタン)が付いた投稿を表示しています

cssのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける

イメージ
今までブログに目次のジャンプリンクやフローティングの戻るボタンを設置して来た。htmlのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。 少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX(User Experience/利用者の体験)を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。cssのscroll-behaviorのsmoothの使い方 サイトのスクロールイベントの経…

cssのpositionのstickyでコンテンツをサイトの一定の範囲内にフローティングする

イメージ
ブログの記事/追加ページの本文の右下にフローティングの戻るボタンを付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事/追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてcssのpositionのstickyを使って試したら上手く行った。Pineapple floating in water by Pineapple Supply Co. [CC0], via Pexels stickyは画面のスクロールに応じてコンテンツを固定できる cssのpositionで同じような値にfixedがある。どんな場合でも画面にコンテンツを固定する。使うと、常時、フローティングで表示されるデザインになる。 stickyはfixed…

JavaScriptの画像などの読み込みが遅い場合に使いたいpreloadのソースコード

イメージ
ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらhtmlの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイルaudio:音楽video:動画track:字幕script:JavaScriptstylesheet:cssfont:フォントimage:画像fetch crossorigin:XHR/fetchworker:Worker/SharedWorkerem…

JavaScriptの繰り返しボタン:押した回数を数えて実行結果を元に戻すプログラム

イメージ
サイトのボタンはhtmlのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてhtmlのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はhtmlの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにcssを付けて作成できるだろう。 htmlとJavaScriptでボタンを作成する 押すと画像が二枚目に切り替わる。 サンプルのソースコード html<img id="change-images" src="一枚目の画像URL" data-second-image="二枚目の…

サイトに戻るボタンをフローティング(固定)と四角や角丸/正方形や真ん丸の中揃えで設置する方法

イメージ
サイトのコンテンツが縦に長くなる場合にページの下段から上段へ移動する戻るボタンを設置すると便利だと思う。方法もリンクと考え方が共通だからサイト作成に慣れていれば初歩的なマークアップで済むのが容易い。微妙に違うのはリンク先がサイトアドレスのURLではなくてコンテンツの目次のジャンプリンクの場合と変わらず、同一ページに置かれたどこかのhtmlタグのidでなくてはならない。なので記載するのはリンク元の戻るボタンのaタグに加えてリンク先のidの二ヵ所に増えている。目次戻るボタンのサンプル戻るボタンのフローティングについてフローティングの戻るボタンのサンプル四角の戻るボタンのサンプル角丸の戻るボタンのサンプル正方形や真ん丸の戻るボタンについて正方形の中揃えの戻るボタンのサンプル真ん丸の中揃えの戻るボタンのサンプル戻るボタンで良く使われる他のデザイン戻るボタンのサンプルリンク先<h1 id=&…