Welcome to Tutorialzine! We are a community of talented developers who learn together. We have an ever-growing library of high-quality tutorials and articles that you can read completely for free!
日本のみなさん、こんにちはぁ!バンクーバーでWebを修行をしているのび太です。 Web制作を学ぼうと思ったらいろいろな方法があると思います。専門学校に通う(王道)、オンラインの通信講座を受ける、プロのWebデザイナーにレッスンをお願いするetc。 Webを勉強する1つの方法として、ネット上のWeb制作に関するサイトを利用するというのがあると思います。スクールに通ったり、通信講座を受けたりするのはお金の面で負担がかかりますからね… ありがたいことに今の世の中わかりやすいWebを学べるLIGのようなサイトが仰山あります。強い勉強意欲と気合さえあればオンラインのソースや教材をフル活用することで独学でも十分学べると思います。 その際に日本語サイトだけでも十分学べますが、あえて英語サイトを使うことで以下のようなメリットがあると思います。 Webと同時に英語が学べる。 日本語サイトより詳しく学べる。
Web開発にとても便利なjQueryですが、 実はメモリーリークを誘発しやすい構造であることは あまり知られていないようです。 本記事ではメモリーリークが発生する傾向と対策を紹介します。 皆さんjQueryは使ったことありますよね。Webでの開発ではとても便利で、ほぼ必須と言っても過言ではありません。しかしながらこのjQueryはメモリーリークを誘発しやすい構造であることはあまり知られていません。 GCのあるJavaScriptでメモリーリークが発生するとは何を言っとるんだ、と思われる向きもあるやもしれません。しかしGCがあっても、もう使わなくなったオブジェクトを配列やテーブル(Object)にしまいこんでいて、それを回収するタイミングが存在しなければ積もり積もってメモリを圧迫する、メモリーリークとなりうるというのは想像に難くないでしょう。jQueryで起こりうるメモリーリークはそのような
「MixItUp」 は、要素のレイアウトをアニメーション付きで並び替えたり、絞り込んで表示したりできるjQueryプラグインです。インラインブロックやfloat、flexboxなどのさまざまレイアウト方法に対応しており、HTMLやCSSをほとんど書き換える必要がないので、使いやすいプラグインです。 カテゴリーによって並び替えたり、特定のカテゴリーだけを表示したり、タイル形式・リスト形式を切り替えたりできるので、ポートフォリオサイトやギャラリーサイト、ブログのトップページに向いています。 Google ChromeやFirefoxなどのモダンブラウザーとInternet Explorer 10〜、iOS、Androidに対応しており、アニメーション機能を除けばIE8〜9からも利用できます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、MixI
目の前でマウスカーソルを動かして説明すると理解してもらえるという場合に使えるのがこのjQueryのプラグインとして動作する「Embedded Help System」です。どのようなサイトにでも埋め込んで使うことが可能となっており、最大の特徴は実際のフォームやチェックボックスなどを操作する様子を目の前で見せてくれるという点。 一体何を言っているのかわからないと思いますが、これは実際に目の前でデモを見てもらうのが一番わかりやすいです。 デモは以下から。 Embedded Help System http://embedded-help.net/ デモを見るにはこの「Usage」ページにまずはアクセスします。 次に「Search database」をクリックするとこのようにしてクリックして使う順番の数字がふわっと浮かび上がります。これだけでも割とわかりやすいのですが、ここからが真価を発揮すると
jser.md はじめに JavaScript を使っていると「JavaScript出来るの? jQuery / AngularJS / Node.js etc... で困ってるんだけどさー」みたいな話を振られることがあります。 そういった時に、自分は一般的なライブラリの使い方やフレームワークに対して大した知見も興味もないので、わざわざ説明するのも面倒なのでこうして文章にしておきます。(本当に届いて欲しい人に限って、こういう文章が届かないのはわかっていますが、文章を書くこと自体が気晴らしだと思って諦めます。) 「フロントエンドエンジニア」という言葉の汎用性 先ほどのような話は自分に限ったことではなく、たぶん経験のある人も多いでしょう。 振られた話が自分の分かる範囲、あるいは興味のあるものならばまだ良いのですが、そうでないことがあまりに多すぎます。 話を振られるだけならともかく「JavaSc
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお,JavaScript初級〜中級をクイズ形式で網羅的に学習するためには,下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては,こちらを参照。 ピュアJSを極める: JavaScriptで,クラスを継承する方法 (複数のサブクラスから共通クラスのプロトタイプを参照する) JavaScriptでの例外設計 (throw,try-catch-finally構文のイメージと利用パターン) JavaScriptで,動的に追加されたイベントリスナの実行順序を保
「FlexNav」は、クロスブラウザー(IEは7以降)対応のドロップダウンメニューを簡単に実装できるjQueryプラグインです。レスポンシブに対応しているほか、ネスト(入れ子構造)のメニューも作れるので、非常に使い勝手のいいプラグインですね。 Android 2.2以降に対応しているので、古いスマートフォンへの対応を求められる案件で特に重宝します。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、FlexNav を配布ページからダウンロードしましょう。FlexNav は github で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と「jquery.flexnav.min.js」を、利用するWebページの body の閉じタグ直前に読み込みます。 //(中略) <script src="
TOP > plugin > クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 (Drop) そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」(jQueryは必要ないかも)が先日話題になりました(はてなブックマークも180以上付いています)。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
3DCGモデル・Flashファイル、BGMやサイトテンプレートなど企業や公式サイトが使うようなハイクオリティな素材の有料販売サイトを運営しているのがEnvatoです。Envatoが運営するこれらの素材販売サイトでは毎月1つだけ無料でファイルがダウンロード可能になっていて、2013年2月は写真素材・音楽ファイル・jQueryプラグイン・3Dモデルなどが無料でダウンロードできるようになっています。早速試してみたところ、総額7900円以上のファイルが無料でゲットできました。 まず無料ファイルのダウンロードにはアカウント作成・ログインが必要なので、まずは以下のページを参照して無料アカウントを作っておきましょう。 無料で商用利用可の有料サイトテンプレートファイルを「ThemeForest」からダウンロードする方法 - GIGAZINE http://gigazine.net/news/2010122
2014/01/31 | lastmod: 2024/06/29 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techJavaScriptjQuerypolyfills (2024 年追記)古い記事なので誰も見てないと思いますが、現在 polyfills を使うのは危険なのでやめましょう。もはや機能が足りなくて困るケースはないようなので、使う意味もないかと思います。 https://www.itmedia.co.jp/enterprise/articles/2406/29/news057.html (追記終わり) jQuery というライブラリは非常に便利な JavaScript ライブラリであります。 jQuery 便利!いやー、便利ですよね。便利すぎて、JavaScript を書いて HTML 要素を何かしようと思ったときに、無条件で使用してしま
Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッとまとめて表示したい場合に便利そうです 次のようにJSONでURLを定義してあげればまとめて表示してくれるみたい 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグ
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
連載:改造WebアプリケーションUIビフォー/アフター 第2回 Webアプリ改造の前に「速習! jQuery/jQuery UI」 葛西秋雄 2010/03/05 はじめに 前回では、ASP.NETのデータ・コントロールを利用した3階層のWebアプリケーションである「ITブック」を紹介しました。今回は第3回の準備編として、jQueryのAPIとjQuery UIのプラグインの使い方をざっくり理解していただきます。 jQueryのHello World jQueryは、米国のJohn Resig氏が中心となって開発したJavaScriptのライブラリです。わずか数行のコードを記述するだけでアニメーションなどのエフェクトをWebアプリケーションに組み込むことができます。 jQueryはDOM(Document Object Model)の要素を検索したり、属性を書き換えたりするためのAPIを豊
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
TOP > javascript , WebDesign > パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から
2013年、当サイトのウェブ制作に役立つエントリーBest 20の紹介です。 去年までは、はてブ数が多かったエントリーをピックアップしていましたが、今年はPocketからのアクセスが多いものにしました。 コリス 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed FeedBurner経由の方は、変更をお願いします! [ad#ad-2] 2013年、Pocketからのアクセスが多かったエントリー 2014年用、漢字も揃っている日本語のフリーフォントのまとめ -商用サイトだけでなく同人誌などでの利用も明記 一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ Photoshopの作業効率をアップする便利すぎるエクステンションのまとめ Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり ウェ
「customSelect.js」は、CSSだけでは変更できない、フォームのセレクトメニューのデザインを簡単にカスタマイズできるプラグインです。 標準スタイルはシンプルですが、自分で用意したデザインも適用できます。軽量で拡張しやすいので、セレクトメニューのデザインをカスタマイズするにはベストなプラグインです。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、customSelect.js を配布ページからダウンロードしましょう。customSelect.js は GitHub で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と customSelect.js を、利用するWebページの head の閉じタグ直前に読み込みます。このプラグインはページの読み込みが完了する前に読み込む必要があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く