WebページをRetina対応させるテクニック～実践編
WebページをRetina対応させるテクニック～実践編：jQuery×HTML5×CSS3を真面目に勉強（5）（1/3 ページ） 前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。 前回（WebページをRetina対応させるテクニック～基礎知識編）はWebにおけるピクセルの基本的な話をしました。今回はそれを踏まえた上で、Retinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介します。 CSS Spriteで複数の解像度に対応 最も原始的な対応方法です。一般的なPCディスプレイと同じ要領で作成した画像をRetinaディスプレイに使用すると、にじんだように表示されてしまいます。デバイス上では同じサイズでも、使われているピクセル数のタテ・ヨコが2
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい - かちびと.net
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
HTML5で作られたフォームの入力チェックができる「jQuery Tools」 | Web活メモ帳
HTML5になってFormの要素が大幅に増えました。inputのtype属性にtel、url、emailなどの値が指定できたり必須属性を設定できたりするので、使いこなせれば便利になりますね。 しかし複雑なチェックやエラー表示のデザインを変更するにはJavaScriptを使う必要があります。 「jQuery Tools」を使う事で簡単に解決する事が可能になってます。 基本的なチェックは1行コードを追加するだけでできるようになるようです。 $("#myform").validator(); エラーメッセージのカスタマイズはCSSで実装できるとの事 /* error message */ .error { height:15px; background-color:#FFFE36; border:1px solid #E1E16D; font-size:11px; color:#000; pad
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5やCSS、jQueryなどのAPIのドキュメントサイト・「DevDocs」 - かちびと.net
東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します | tonowp