Popper - Tooltip & Popover Positioning EngineDon't mind tech-related ads? Consider disabling your ad-blocker to help us! They are small and unobtrusive. Alternatively, support us on Open Collective!
独学の人には特にオススメ！JavaScriptの基礎が一通り、14分ちょいで学べるチュートリアル
コンソール まずは、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)に使用されている場合があるので、環境設定から「メニューバーに開発メニューを表示」をチェックすると、メニューバーからコンソールを表示できます。
面倒な作業不要で、Webアプリ開発が劇的にはかどる！至高のJavaScriptライブラリ6選 -
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います！ 強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。 これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください！ ■波形表示やプレイヤーも作れる高機能な音楽ライブラリ！ 【 wavesurfer.js 】 音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。 音声の再生・早送り・巻き戻し・ミュートなどの基本機能はもちろん、音声の書き
Webサイトやスマホアプリでよく使う、JavaScriptの有用なコードのスニペットのまとめ
JavaScriptの有用なコードのスニペットをまとめたサイトを紹介します。 一つひとつは30秒ほどで理解できるコードとなっており、膨大な数のスニペットがまとめられています。あれなんだっけ？ という時に、便利ですね。
カウントダウンやタイマーなど、時間コンテンツなら何でも任せろのシンプルな軽量スクリプト -EasyTimer.js
時間を表示させるカウントダウン、タイマー、ストップウォッチなどのコンテンツなら何でも任せろのシンプルな軽量スクリプトを紹介します。 単体のスクリプトとして利用でき、時間を使ったWebページを実装する際に重宝すると思います。 EasyTimer.js EasyTimer.js -GitHub EasyTimer.jsの特徴 EasyTimer.jsのデモ EasyTimer.jsの使い方 EasyTimer.jsの特徴 リフレッシュの間隔は、時、分、秒、1/10秒に設定できます。 タイマーの開始、停止、一時停止など、すべてのタイプでイベントが設定できます。 カスタムコールバックを定義することができ、タイマーのリフレッシュごとに実行されます。 タイマーには、経過とカウントダウンの2種類があります。 開始時間と目標時間を設定できます。 EasyTimer.jsのデモ デモでは、EasyTimer
CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バインド インタラクション 「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。 コントロール インタラクション エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。 Micron.jsのデモ ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。 ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。
jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。
@infonumber333 ﾉ — Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日 さきほどのツイートから間もなく、おしゃれなハットのアイコンが目印で北海道の大地のような寛大な心を持ち合わせた紳士の「さいたさん(@saita_ryuhei)」が助けの手を差し伸べてくれるという奇跡が。なんということでしょう。 @infonumber333 分かる範囲でならm(_ _)m — Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日 ここぞとばかりにご好意に甘えることに。 サイドバーが「びゅんっ！」ってなる問題。 @infonumber333 途中から固定されるようにはなってましたが、ある程度までスクロールするといきなり「ぴゅんっ！」って固定されるサイドバーが表示されました。 — Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@sai
【JavaScript基礎】JavaScriptの実行順序について - KDE BLOG
＜目次＞ ブラウザでのJavaScriptの処理の流れ イベント登録のタイミング async属性とdefer属性 async属性：非同期で読み込み開始し、読み込み完了後に実行 defer属性：非同期で読み込みDOM構築完了後に実行 注意 参考 ブラウザでのJavaScriptの処理の流れ サーバにリクエストし、htmlの情報がブラウザに届いてから表示されるまで、JavaScriptはどのように処理されるか。 ブラウザがhtmlを読むと最初にWindowオブジェクトが生成されます。 windowオブジェクトは各ページまたはタブごとに生成されます。 windowオブジェクトのプロパティとしてDocumentオブジェクトが生成され、htmlの中身を解釈してDOMツリーを構築しようとします。 Documentオブジェクトには、文書の読み込み状況を示す文字列を返すreadyStateプロパティがあり
jsに関する情報収集を淡々と話す
Transcript KTʹؔ͢ΔใऩूΛ୶ʑͱ͢ 8F�"SF�+BWB4DSJQUFST�!��UI !NLJ@TLU Ҫ࡙ਓ NVLBJ�TBLJUP 5XJUUFS w ݴޠɺϑϨʔϜϫʔΫͷ ެࣜΛϑΥϩʔɻ w Α͘ใΛᄁ͘ਓΛϑΥϩʔ ͯ͠ɺϦετʹ·ͱΊΔɻ w ࣗᄁ͘ʂ 2JJUB w ਓؾͷߘΛݟ͓͚ͯ ͦΕͳΓʹใ௫ΊΔɻ w ϑΥϩʔ͓ͯ͘͠ͱ ϑΟʔυʹϑΥϩʔͨ͠ਓͷ ετοΫͨ͠ߘ͕ྲྀΕΔɻ 2BMFJEPTQBDF w 2JJUBΛಠࣗΞϧΰϦζϜͰ ධՁͨ͠αΠτ w 2JJUBͱ߹Θͤͯ͏͜ͱͰ ΑΓྑ͍ใΛ௫ΊΔɻ ͯͳϒοΫϚʔΫ w ςΫϊϩδʔΧςΰϦʔΛ ݟ͓͚ͯྑ͍ɻ w ͨ·ʹ৽ணΛݟΔͱ ྑ͍ใ͋Δɻ 4MBDL w ༷ʑͳίϛϡχςΟʔͷ 4MBDLνʔϜ͕͋Δɻ w ࣭͢ΔͱͰ͖Δ
デンソー ブランドサイト
未来は語るものでなくて、つくるもの。デンソーが培ってきた、モノづくりの魂を、これからもこれまで以上に大切にし、これからも新しい価値を創造し続けるために。私たち自身を、そしてブランドのアイデンテティを見つめなおしました。すべては、より良い未来を次世代に届けるために。
株式会社八百彦本店 | 名古屋で創業290余年。仕出し弁当、宅配弁当をお届けいたします。
カジュアルに尾張名古屋の食文化と300年の技と想いを楽しむ。 和のフードホール“食楽堂”「蓬左<hōsa>」内に誕生した 江戸時代より約300年続く老舗仕出し料理屋「八百彦本店」の新ブランド。 創業の頃より変わらぬ技と想いを、お気軽にお楽しみいただけます。 四季折々の景色と旬の味覚が楽しめる由緒ある和食処 尾張徳川家の文化財を収蔵する徳川美術館。その敷地の一角に宝善亭はあります。 江戸より続く歴史と文化、そして季節ごとにかわる風情と旬の味覚が、 お客様の大切な人と過ごす優雅で心豊かなひとときを演出します。 最大50名まで座れる貸座敷でゆっくりとお寛ぎください 法要・会合・各種宴会などにご利用できる貸座敷です。 お座敷、テーブル席など、６～７人ほどの個室から 最大50名が座れる大広間まで幅広くご用意しております。 八百彦本店の仕出し料理やお飲み物のご提供もさせていただきます。
[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js
画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb）スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他のファイルには一切依存しません。 レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。 HTMLは非常にシンプルな構造です。 CSSトランジションで動作します。 シンプルなイベントAPIを備えています。 Macy.jsのデモ 実際の動作は、デモページで楽しめます。 動作は非常に軽快で、快適です。
![[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4215e0c2d56437668b0e944846344e0e97841024/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017081801-01.png)
JavaScript の this を理解する多分一番分かりやすい説明 - Qiita
JavaScript の this は、(他のプログラム言語から見ると) ちょっと面白い挙動に見えることがあります。 先日、この this の挙動について、会社の同僚が説明してくれたのですが、これまで聞いた説明の中で一番分かりやすいと感じたので、頑張って日本語で説明してみます。 分かりにくかったら、多分それは私の技量不足。 this と function の関係 function が基準スコープになるのがまず一点。 その function をどう呼ぶかで変わるのかがもう一点。 それを踏まえて…… this は function を呼んだ時の . の前についているオブジェクトを指している と理解できるというのが、同僚の説明でした。 . が省略された場合はグローバルオブジェクトになります (non-strict モード時)。 strict モードでは undefined になります。（@ryo
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
ウェブデザイナーが試したい、Webアニメーション無料プラグイン＆ライブラリ75個まとめ【保存版】
アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本
JSだけでソーシャルボタン設置 - Qiita
はじめに いいねボタン（シェアボタン）、Twitterツイートボタン、LINEボタン、Google+ +1ボタンをJSだけで読み込む方法を試行錯誤しました。 基本的には、 各SNSのボタン設置用スクリプトを動的に読み込み ページのロードのタイミングで公式の設置コードをHTMLに埋め込み 各SNSの動的更新コマンドを実行 という流れです。 ソース 雛形のHTMLはこんな感じです。OGPを仕込んで自前のCSS・JSを読み込む以外は、何の変哲もないソースです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JS share button</title> <meta property="og:title" content="XHTML like"> <meta property="og:type" con
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]レスポンシブ対応！テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty![[JS]レスポンシブ対応！テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty](https://cdn-ak-scissors.b.st-hatena.com/image/square/61cdba9fb6ae55e3307779bb6eb2558db2c4b611/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017073101-01.png)
iDangero.us
PixiJS v4
