サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
更新履歴 追加 2025/06/26 「Sass: Playground」を掲載しました 2024 2024/10/23 「ShadeStudio」を掲載しました 2024/07/22 「CSS Grid Generator」を掲載しました 2024/07/02 「Proportio.app」を掲載しました 「CSS Filter Generator」を掲載しました 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「FilterBlend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました20232023/07/04 「CSS Box Shadows Generator」を掲載しました2023/06/29 「Regulex」を掲載しました2023/04/05 「Colorable」を掲載
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
参照 よく分かるjQuery Deferred http://amzn.to/1SkAQXn 学習内容 .done()と.fail() Promise 非同期と同期処理 Deferred .then() $.when() $.Callbacks() 非同期処理を直列に記述、実行するための仕組み。 非同期処理で、複数の処理を、指定した順番で実行することができる。 Promise Jquery ver.1.5からAjax関係のメソッドは「Promise」を返すようになった Ajaxが無事終了した時、「Promise」に、コールバック関数を、done()というメソッドを使って登録する。 Ajaxが異常終了した時、「Promise」に、コールバック関数を、fail()というメソッドを使って登録する。 function onSuccess(){ console.log("成功"); } functi
サーバレス構成のWebアプリ開発を担当し、そこでVue.jsを使ってみたので採用した経緯と、Vue.jsの何を使ったかを紹介する。 これまでのWebアプリ開発JavaのWebアプリ開発ならThymeleafやFreemarkerなどのテンプレートエンジンを使用していた。 サーバレスだと、HTMLとJavaScriptで表示の処理を行うため、JavaScriptの処理が増える。 よく使われるのはjQueryによってDOMを操作し、HTMLを動的に変更する方法だろう。 jQueryのDOM操作は辛いよ jQueryを使ったことがあればお分かりだと思うが、jQueryによるDOM操作は「このイベントで、このvalueがxxxなら、このDOMを変更する」という手続き型のコードになる。JavaScriptの処理が増えると、この手続き型のコードが増えてデータと状態の管理が煩雑になる。 また、Jav
jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
便利ですよね、Handlebars。 でも日本語の記事が案外なかったり、公式のドキュメントがいまいちアレだったりするので、自分用にまとめます。 それがどこかで誰かの役に立てば、それはそれで幸いです。 基本的な使い方 インストールとかは割愛。 だって読み込むだけやし・・・。 で、そこからは テンプレート・ひな形となるHTMLを用意 そのHTMLをHandlebarsに食わせる 動的にはめ込む値をつっこむ 基本的にはこの3ステップです。Html <!-- 略 --> <script id="input" type="text/x-handlebars-template"> <section class="inner"> <h1 class="header">{{title}}</h1> <div class="box"> <img src="{{img.url}}" alt="{{img.a
ScrollMagic helps you to easilyreact to the user's current scroll position.It's the perfect library for you, if you want to ... animate based on scroll position – either trigger ananimation or synchronizeit to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。 drawerプラグインはGoogleChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。
思ったこと jQueryを使ってメニュー等の表示、非表示を切り替えるときにtoggleClass()とCSSを使ってメニューを隠したり隠さなかったりするというやり方はシンプルだけど、メニューの外をクリックした時もメニューが消えずにうっとおしかった。 ググった結果 何やらややこしいやり方しか書いてなかった。 やったこと 領域外クリックの検知 jQuery側 $(document).click(function() { $('#menu').hide(); }); これだけ。 問題点 このままでは表示した要素内をクリックするとその要素自体も消えてしまう。もともと非表示のメニュー等、消えても問題のない場合もあるが、殆どの場合は要素内をクリックして消えられては困る。 解決策 $('#menu').click(function() { event.stopPropagation(); }); の一行
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
はじめにReact（通称React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
ボス戦のみの弾幕ゲーム（敵は160種類） ステージはボス戦のみで構成されているので数分の隙間時間で遊ぶことができます。敵は160種類を用意し貴方を飽きさせません。序盤は簡単に撃破できる敵艦ですが、徐々に難易度が上がり16… 続きを読む »
自ページのリンクを削除する jQuery remove self link plugin を公開します。JavaScript をこよなく愛する なかじまんソフトウェア株式会社 のスタッフによるブログです。 OpenSocial Container や Social Gadgets の開発を技術面から支援します。 ページから自ページのリンクを削除してユーザビリティを改善するホームページのユーザビリティを改善できると知りながら、何も手を打たないのは歯がゆいことです。そこで WEB ブラウザでページを表示したときにJavaScript (jQuery) を使って、ページの中から自ページのリンクを削除する方法を考えました。↑のエントリを投稿しから１年になりましたが、JavaScript を使ってページ内から自ページのリンクを削除するという手法は、とてもバランスのよい妥協で有効であったことが確認できました。 私が手がけたいくつかのサイトで使っていますし、今後も使っていく予定です。一般性のある Jav
百姓快三【正规信誉大平台】❤️小美提供❤️百姓快三登录入口，百姓快三网址，百姓快三官网，百姓快三平台，百姓快三app，百姓快三下载，百姓快三在线购彩，百姓快三用户注册，...
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。Reactとの出会いReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
