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

エッセイ風の日記ブログ

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

JavaScriptで開いたメニューの外側を暗くして範囲外のクリックでも閉じる方法

イメージ

サイトに 開閉ボタン でメニューを出した際のエフェクトとして外側を暗くすると見易い。そして開閉ボタンだけではなくて開いたメニューの範囲外、または新しく表示された領域外のクリックでも同じように閉じられると使い易い。どう作成するべきか、JavaScriptで実行するプログラムを考え...

JavaScriptのonclickとclassListとsetTimeoutを使ったアニメーション付きの開閉ボタンのプログラム

イメージ

サイトのハンバーガーメニュー(≡)などのコンテンツを出し入れできる開閉ボタンをJavaScriptで作成するプログラムには二つの大きな部分がある。 要素のクリックを判定する コンテンツに表示変更を行う JavaScriptのプログラムではクリックを判定するHTMLの要...

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

イメージ

今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰...

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

イメージ

ブログの記事/追加ページの本文の右下に フローティングの戻るボタン を付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事/追加ページの本文のところだけとかア...

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

イメージ

サイトのコンテンツが縦に長くなる場合にページの下段から上段へ移動する戻るボタンを設置すると便利だと思う。方法もリンクと考え方が共通だからサイト作成に慣れていれば初歩的なマークアップで済むのが容易い。微妙に違うのはリンク先がサイトアドレスのURLではなくて コンテンツの目次のジャン...