Library agnostic: Works well in JavaScript, TypeScript, React, Vue, Angular, React Native etc.
Library agnostic: Works well in JavaScript, TypeScript, React, Vue, Angular, React Native etc.
Result 少しのVanillaなJSで作るページ内スクロールと追従するナビゲーション。よくドキュメントページとかナレッジ共有系のWebサイトで見かけますね。 今更感なネタですが、ボーっとCodePenの2020年ベストPenみたいな記事を眺めてたら見かけたので割と需要あるネタですしメモ的にと思って書いてます。 javascriptwindow.addEventListener('DOMContentLoaded', () => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute('id'); if (entry.intersectionRatio > 0) { document.querySelec
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
2019年3月8日 JavaScript 以前Vue.jsでカラーコードからRGB値にサクッと変換する方法という記事で紹介した、「Quick HEX to RGB」では、値をクリックすればクリップボードにコピーする機能をつけています。これはclipboard.jsを使っているので、基本的な使い方と、あまり説明のないツールチップの加え方を紹介します。 ↑私が10年以上利用している会計ソフト！ clipboard.js の使い方 Webサイト｜GitHub まずはHTMLにJavaScriptのファイルを読み込ませましょう。ファイルをダウンロードする場合はGitHubからdistフォルダーにある「clipboard.min.js」ファイルを入手します。CDNも用意されているので、便利な方を使ってください。 HTML <script src="https://unpkg.com/clipboa
サイト上でボタンを１クリックするだけで、任意の文字列をクリップボードにコピーする機能をJavascriptで実装する方法です。 仮想通貨のAirDropのサイトなどによく見られますね！ クリップボードにコピーするボタンが必要な理由 ズバリ、スマホだとテキスト選択がめんどくさいからです。 コピーしたい部分だけ選択するのって結構むずかしい。 PCならマウスでドラッグするだけですが、スマホは非常にめんどくさいですよねー。 スマホサイトのユーザビリティ向上に、ぜひ実装したい機能です。 クリップボードコピー機能はどんな時に使う？ ECサイトのクーポンコードお問い合わせフォームのチケット番号アフィリエイトのリファラURL などですかね。 もっと探せば使い道はありそうです。 ユーザーに面倒くさい入力をさせたい時にきっと役に立つと思います。 クリップボード機能の実装方法1 <p><span class="
デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 Tiny SliderはOwl Carouselにインスパイアされた、多目的用の軽量スライダーを実装するJavaScriptです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 シンプルなスライダーも下記のようなアニメーションを使ったスライダーも、非常に簡単なコードで実装できます。 多目的用のスライダー シンプルなスラ
コンソール まずは、JavaScriptのコンソールを使用して、「Hello World!」を表示します。 コンソールの表示方法 Edge F12 Chrome command+option+J (win: ctrl+shift+J) Firefox command+option+K (win: ctrl+shift+K) Safari command+option+C Safariの場合はショートカットが他のアプリ(Alfred)に使用されている場合があるので、環境設定から「メニューバーに開発メニューを表示」をチェックすると、メニューバーからコンソールを表示できます。
トップページの「一覧形式」の画像をオリジナルのものに変える サイトのデザインって、あれこれ手を加えてこれで良し！と思ったものでも、飽きてくるのか、しばらくすると変更したくなってきます。 このサイトはもう少し持ちそうなんですが（笑）、映画のレビューを書いている「そんなには褒めないよ。映画評」は、はてなブログを始めた頃に作った「Simple Responsive with Menubar」というテーマをベースにした随分前のものですのでさすがに飽きてきました。 で、全体のデザインはまだ構想中なんですが、ちょっとしたテクニックを紹介していこうと思います。 トップページの「一覧形式」画像が 500px 四方にトリミングされているオリジナル画像に変更する Javascript 02画像が 500px 四方にトリミングされている 問題は画像なんですが、オリジナル画像ではなく、縦横 500px にトリミン
【javascript】webページに画像をランダムに（重複しないように、あとそれぞれにリンクもつけて）表示させたいです。 http://q.hatena.ne.jp/1128584079 上記のページは非常に解り易く解説されているんですが、これですと「画像とリンクを繰り返し吐き出す」形になってしまい、画像それぞれをページ内の任意の場所に指定できません。 それぞれ違った画像をランダムに、なおかつページ内に分散して配置したいのですが、どのように改造したら良いでしょうか？詳しい解説をお願いします。上記リンク先のように、サンプルコードを示して頂けると大変助かります。
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ
JavaScript を知らない人に JavaScript の話して欲しいと言われる夢を見たのでブログ書きました。*1 難しい話は抜きにして JavaScript は <script> と </script> で囲えば動きます。*2 HTML をコードレベルで編集できるサービスなら、設定は一切不要です。 <script> JavaScriptのコード </script> 拡張子にも制限はありません。最終的にHTML文書として出力されるのであれば、htmlでもphpでもcgiでも構いません。なおフレームの代わりにPHPを使うという為になる記事があるのですが、ここでは関係ないので読むのは後ででよいです。 ついでに JavaScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。 コピーライトの西暦を自動更新 JavaScript を使えばページフッタの西暦も自動更
他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」 2010年12月09日- dhlavaty/jQuery-SmartColumnScroller - GitHub 他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」。 通常、複数のカラムがあると、どちらかの縦の長さが長いので、下の方にスクロールしていくとどちらかが見えなくなってしまいます。 たとえば、ブログ等だと左カラムの記事部分が長くなりがちです。メインである記事を読み終えた後は、スクロールしたことで右カラムの内容も綺麗になくなっていますね。 左カラムが縦長の場合、右カラムに空白が出来てしまう このプラグインを使えば、右カラムが見えなくならないよう、右カラムがうっとうしくない具合に付いてきてくれま
Fixed Center jQuery plugin David's Web Development Blog 1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」。 $(element).fixedCenter(); のようにエレメントを指定するだけで要素をセンタリング出来ます。 難しいことを考えなくてよくて1行で指定できるので覚えておくと便利かも。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル フォームに簡易電卓を組み込める「jQuery Calculator」 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
大きい画像を限られた領域内に表示し、Googleマップのようにマウスのクリックとドラッグでその画像をアニメーションでスライドできるスクリプトを紹介します。 SpryMap デモページ [ad#ad-2] スクリプトはjQueryなどの他のライブラリは必要とせず、単独で動作します。 SpryMapの特徴 他のライブラリに依存せずに動作する超軽量（3KB）のスクリプト。 画像を表示する領域はピクセル単位で指定が可能。 画像を最初に表示する座標を設定可能。 スクロールのアニメーションの時間を設定可能。 SpryMapの実装 実装は簡単で、画像にidを指定して使用します。 HTML スクリプトでラッパーとなるdiv要素を追加します。divのclassはオプションで設定できます。 <img id="worldMap" src="map.jpg" alt="A map of the world." /
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
