Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ
CSS3のanimationプロパティ使うと、なんでも点滅させることができます！ （現在、Chrome3以降、Safari4以降でしかサポートされていません） とりあえず、CSSファイルに、下記ソースをコピペしてみましょう。 @-webkit-keyframes pulse { from { opacity: 1.0;/*透明度100%*/ } to { opacity: 0.8;/*透明度80%*/ } } .blinking{ -webkit-animation-name: pulse;/* 実行する名前 */ -webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */ -webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */ -webkit-animation-tim
![[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/072ca1f71fdf67b5c3238bdc976312dbbbe3fa40/height=288;version=1;width=512/https%3A%2F%2Fshirasaka.tv%2Fimg%2Fogp.jpg)
jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。 - 甘味志向＠はてな
JavaScript Advent Calendar 2011 オレ標準コース、2日目のもろへいやです。とても遅れてすいません… 私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。 今回は、アニメーションの話を書いてみます。 jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが出来ますよね。 $("#box").fadeIn("fast"); たった一行で、アニメーション効果を付加することができるので、 プログラマーのみならずデザイナーの方でもjQueryを使っている人は多いんじゃないかと思います。 しかし、簡単なおかげで何をするにアニメーション効果をかけまくってしまったり。 あるいはアニメーション効果なんて無駄！ ということで、全然使っていない人もいると思います。 ですが、アニメーシ
iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 - くらげだらけ
iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。PhoneGapみたいにWebAppをネイティブにパブリッシュするツールや、Titanium MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。 iOS4までのMobile SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。 先日公開されたiOS5では今まで「なんで使えないの？」といったところが少し修正されて、
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
MdN Design｜総合情報サイト
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS（デフォルト） ・スマートフォン用CSS ・タブ
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
CSS3 を用いたスマートフォン向けWebサイト構築方法
デバイスごとの表示の切り替え デバイス(ユーザエージェント)ごとにページを切り替える Webサーバ/Webアプリケーション JavaScript ウィンドウサイズごとにページのレイアウトを切り替える Media Queries JavaScript Media Queries Media Queries って何？ CSS3 の仕様の一部(w3c: css3-mediaqueries) Media Queris でできること ウィンドウサイズや縦横比、色などの条件で CSS を切り替える Media Queries を使ったサイトの事例 StunningCSS Hicksdesign Colly Demo: Stunning CSS3(1200 x 800) Demo: Stunning CSS3(1000 x 800) Demo: Stunning CSS3(760 x 800) Demo
【スマホ集中連載 第4回】 "HTML5とCSS3で何ができる？" 〜メリット・デメリットを徹底研究！ : LINE Corporation ディレクターブログ
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの？ HTML5とCSS3を使うメリットは？ HTML5とCSS3で何ができるの？ そもそも、HTML5とCSS3ってもう使えるの？ 使えます。 （※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません） 現在のスマ
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧 | gihyo.jp
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
Ext Japan - Sencha Touch登場 - モバイル用HTML5フレームワーク
業界初のHTML5モバイルアプリ用フレームワーク Sencha Touchを使えばタッチスクリーンを装備したApple iOSや Android端末上でネイティブアプリのようなWebアプリが開発可能です。 Web標準技術に準拠 Sencha TouchはHTML5、CSS3、JavaScriptに特化した世界初のアプリケーションフレームワークです。SSencha Touchはこれらの技術が持つ力を最大限に引き出し、かつ柔軟で最適化されたアプリケーション開発を可能にします。Sencha Touchでは、音声や動画を組み込む為のコンポーネントやデータをオフラインでも利用可能にするlocalStorageプロキシーなどでHTML5の機能が利用されています。またSencha TouchのスタイルシートではCSS3を最大限活用してとても堅牢なスタイリングレイヤーを実現しています。 このライブラリはそ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css-lecture.com
http://html5please.us/
adakoda.com
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介