パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
[JS]複数行の異なる高さのブロックをそれぞれ同じ高さに揃えるスクリプト
画像のサムネイルやテキストを配置したボックスなど、異なる高さのブロックが数多くあっても全ての高さを等しく揃えるスクリプトを紹介します。 Equal Height Blocks in Rows 一行目と二行目では、違う高さで揃えていることに注目してください。 [ad#ad-2] デモでは異なる高さのブロック（スクリプトオフ時）が、スクリプトによって行ごとに同じ高さに等しく揃えています。 デモページ 実装のアイデアとなったのは、「Making DIVs, using the CSS "Float Left" property...」とのことで、そのdiv要素がどの横列に属しているか調べ、その中で一番高いものに揃えています。 [ad#ad-2] 実装方法 HTML 画像やテキストを配置できるdiv要素を使用しています。 <div id="page-wrap"> <div></div> <div>
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
JavaScriptによるCSSの操作 | 暴満館 ～The House of full Violence～
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する {#deleteRule} function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらな
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
JavaScriptとCSSでロールオーバーとtarget="_blank"をスマートに (BlueBoxBlog)
・スマートなtarget="_blank" いつもお世話になっているREDさんのところで、感動的なスクリプトを教えてもらったので忘れないように書かせていただきます。 参照元：別窓リンクまとめ （Red Line） XHTMLの strictを使った場合 リンクで新しいウィンドウを開くようにする為に a要素のtarget属性で_blankと指定するのは文法違反・・。 で、どうするぅー ○イフルー♪・・・なわけです。 そこで登場するのが、巷でJavaと良く勘違いされてるJavaScriptです。 aタグにonclick="window.open(this.href);return false;" とすれば、解決ではあるのですが、やたらとコードが長くて（いや、でも結構シンプルで洗練されたコードだと思うけど・・）面倒なのです。 そこで、登場するのがCSS+JavaScriptなのです。 （正確
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
Yaneu Labs --- 画面に表示されるアイテム数を自動調整する
近年、ディスプレイ解像度は急速に高くなり、いまや1920×1200は当たり前になりつつある。こうなると難しいのはサイトレイアウトであって、今後、商用サイトを固定幅で設計するのはタブーになっていくのだろう。大きな画面でも正常に表示されなければならない。このようにユーザーの画面サイズに合わせてレイアウトを動的に変更するのはそれほど容易なことではない。 例えば、Amazonのトップページの場合を考えてみよう。 横幅が小さなときは、アイテム数は3つ。 横幅が大きいときは、アイテム数が自動的に5つにまで増える。 では、このようなことをCSSのテクニックだけで実現できるのかと言えば、ノーだろう。 どうしてもJavaScriptに頼らざるを得ない。 さっそく書いてみた。→ アイテム数自動調整スクリプト テスト用ページ 上のテスト用ページのhtml,JavaScriptは自由に使っていただいて構わない。ア
JavaScript産の導入が簡単で強力なマークアップエディタ
比較的簡単にwebに導入できるマークアップエディタ。 CSS、HTMLタグなどが完備されていて、アイデア次第で色々使えそう。 ダウンロード等は以下に。 とりあえず、サンプルを触るのが早いかと。 CSSや、HTMLエディタがあり、スムーズな反応が返ってきます。 HTMLエディタには、その場でプレビューする機能も付いてますね。 サンプルデモ フリーですが、GPLライセンスです。 ソフトのダウンロードはこちら 尚、ダウンロードし、解凍すると、index.html と jquery.html という二つのHTMLファイルが直下にあります。 双方JavaScriptですが、index.htmlの方ではjQueryを使用していません。 開けば、webにアップせずとも、ローカルで普通に動作します。このあたりがJavaScriptの利点でもありますよね。 ドキュメントは英語ですが、タグやコードは世界共通で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
