活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
古籏一浩のJavaScriptラボ
活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
jQueryで奥行きのある背景スクロールを作ってみる
jQueryで奥行きのある背景スクロールを作ってみる 普通に背景画像を指定するだけだとスクロールに追従して画像も移動しますが、jQueryで背景位置を調節することでスクロールの速度をずらすことができます。 この記事ではこの機能を利用して、スクロールすると奥行きの感じられる動作を作ってみます。 投稿日2011年05月13日 更新日2011年05月13日 画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --
[JavaScript] 非初心者向け入門記事まとめ
経験者でも入門したい時がある。 基礎 JavaScript基礎文法最速マスター Ajax時代のJavaScriptプログラミング再入門 JavaScript再入門 アマグラマーのすすめ プログラマのためのJavaScript これでできる！ クロスブラウザJavaScript入門 [JavaScript] 猿でもわかるクロージャ超入門 JavaScript – MDN Doc Center eval Google JavaScript Style Guide 和訳 Building iPhone Apps with HTML, CSS, and JavaScript Eloquent JavaScript HTML5 API Using web workers サーバー不要で保存できる「Web Storage」の使い方 HTML5サンプル集 まだまだ間に合うCanvasでアニメーション入門
![[JavaScript] 非初心者向け入門記事まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow
余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。 Simplest jQuery Slideshow demo このスクリプトを作成したきっかけは、知人からの依頼だそうです。 当サイトでも多数紹介しているjQueryのプラグインで同様の動作をするものがありますが、多機能すぎるためクロスフェードするだけのシンプルで軽量のものを作成することにしたそうです。 そこで、コードの目標を20行以下で挑んだところ、作成してみると、下記のように大幅に短いものになってしまったとのことです。 ※動作には別途jquery.jsが必要です。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> $(function(){ $('.fadein img:
Template Tags/query posts « WordPress Codex
Sets up The Loop with query parameters. Description Note: This function will completely override the main query and isn’t intended for use by plugins or themes. Its overly-simplistic approach to modifying the main query can be problematic and should be avoided wherever possible. In most cases, there are better, more performant options for modifying the main query such as via the ‘pre_get_posts’ ac
WordPress ウィジェットエリアの追加方法 | (有)ユーアイシステム
WordPressが３．０にバージョンアップされ、従来のWordPress MU(Multi User)の機能が統合されました。これを機会にWordPressによるサイト構築テクニックの見直しを行い、順次公開いたします。 最初は、ウイジット用のエリアを任意の場所に追加する方法です。この方法を用いることにより、通常サイドバーに定義されていることが多いウイジットエリアを、ヘッダやフッタ、その他のページに定義することが出来ます。 【手順１】追加するウイジットエリアの定義 追加するウイジットエリアの名前等の定義情報を「function.php」に追加します。以下の例では、「ui_sidebar」という名前のウイジットエリアの定義を追加しています。 ※必ず一番最後に追加してください。 [php highlight_lines=”14,15,16,17,18,19,20″] /** widgets *
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
FireFoxで半角英数を折り返す（備忘録） | スタッフブログ｜dis-ドアズインターネットサービス｜WEB（ホームページ）制作、作成・SEO・FLASH・ビジネスブログ・ユーザビリティ・アクセシビリティ｜神戸・大阪
はじめまして。今年9月に入社しました、新人の【おはぎ】です。 隣のミツノブさんにしごかれながら日々頑張ってます。 疲労困憊で晩ごはんが作れません！私はとっても自炊がしたいのにっ！ ・・・・えっ？ｗ さて、自慢の機器とか周辺機器にこだわりとかもあんまないので、ここでは仕事上で覚えたことを備忘録として書き込んでいこうかと思います。 サイトの最新情報とかでよくある、「日付・トピックス」というこの構成。 実はこの日付の部分に大きな罠がありました。 （日付をすべで半角英数にした場合）文字サイズを拡大すると、FireFoxで日付が折り返さず突き抜けていくんですね。どこまでも。 この件に関しては、珍しくIEのほうに軍配があがりました。 そもそも英語圏だと折り返さないほうが正しいのかもしれないんですが。IEはCSSでなんとかなるしそこは置いといて。 そこで、今回利用させていただいたのが、「word
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
スマホ用Webアプリを作るための、HTML5のひな形を作っておくよ！ - proto*
そろそろ始めないと・・ ということで、まずは自分用のHTML5の雛形を・・ HTML5.jp を参考にしつつ作成しておくことに。 たくさん情報が載っていて、さらに日本語化されているのでとっても便利なサイトです。 雛形作成の手順HTML5.jpの「HTML5 の雛形」ページからHTMLをコピーさらに「HTML5 のリセット・スタイルシート」ってページのCSSを適応最後にWebアプリにするために独自のタグを追加 HTML5 の雛形拾ってきました。こんなコードです。 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></
HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template
HTML5 Templateのデモページ Easy HTML5 Templateの特徴 汎用性の高いシンプルなつくり HTML5の新しい要素に重点をおいて設計 HTML5対応ブラウザはもちろん、IE6, IE7, IE8も考慮 モバイルデバイスも考慮 jQuery, Google Analyticsなどよく使用されるものを配置済み [ad#ad-2] Easy HTML5 Templateの外部ファイル Easy HTML5 Templateで使用している外部ファイルです。 screen.css Reset CSSには「Eric Meyer's reset」が使用されています。 modernizr-1.6.min.js 「Modernizr」。HTML5やCSS3をサポートしているか調べ、CSSの場合はエレメントにclassを加えます。 html5.js 「html5.js」。IE9未満（
2011年1月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル
いろいろなところから2011年1月に集めてきた情報を要点を抑えて紹介していきます。これは何か、どんなシーンで使えるのかということを書くようにして、気持よく読めるようにまとめて行けたら良いです。情報を集めるのが苦手なあなたはこれだけ読めば結構身になるかもしれませんね。 これは Web サービスに使えると思った情報 使い方をその場で再現するスクリプト目の前でアニメーションして説明するスクリプト「Embedded Help System」 – GIGAZINE Web サービスのヘルプなどで使えるかもしれません。導入がそこまで難しくないようなので、ヘルプを作る際は一番最初にこちらを検討すると良いかもしれませんね。 ビジネスモデルについて学べるわかったつもりになっていませんか：「ビジネスモデル」とはなんだろう? 余談や説明が長すぎたので、個人的にためになりそうな要点だけ抑えておきます。 なんか微
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3カラムで左端を可変にするリキッドレイアウト - タマゴブログ-あるふぁVer-