シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
CSS3Dで作られたリアルな“雲”、チュートリアル付き 【増田 @maskin】 | TechWave（テックウェーブ）
HTML5といったウェブ標準化技術には賛否いろいろあるけれど、世界のITシーンでは常にホットなトピックであるのは変わりない。 例えば、これ。スペイン・バルセロナのJaume Sánchez Elias氏が制作したインタラクティブな雲。最新のウェブブラウザでページ (http://www.clicktorelease.com/code/css3dclouds/) を表示すれば、驚くことうけあい。 リアルな雲が、マウス等の動きに応じて動くのはもちろん、雲を子細に渡りチューニングをすることもできる。もちろん、ウェブの技術だけで、プラグインなどは使用していない。 Windows 7の資産も活用可能 これは、CSS3Dを中心に、簡単なJavaScriptでできているもので、単に雲っぽく表示させているだけでなく、あたかも3Dでレンダリングしたようにブラウズできるように設計されている。 どうやら、一部に
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
canvas と Web 仕掛け絵本 | hiromasa.another :o)
明けましておめでとうございます。 🙂 昨年のご愛顧も込めまして、「WordPress デザインワークブック」共著のコモモさんこと高橋朋代さんと Web 仕掛け絵本のサイトをつくりました。とてもかわいい感じになりましたので、良ければ見てください！ バッタになりたい魔法使い – pararaehon.com PC/Mac はモダンブラウザ(IE8 以下はごめんなさいです）に対応しています。 モバイル系は iOS は 6 以降の Mobile Safari、Android は 4 以降の Chrome が良い感じで見れます。Android 2 の方は Firefox 17 を使うとゆっくりですが動作します。3G 回線の場合は、ちょっと読み込みに時間かかりますので、白くなったりしたらリロードしてみてください。キャッシュするときれいに動きます。 iPhone/iPad は 4S 以降(Apple
『今年中に読んでおきたい！2012年人気の記事10本！』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか？ スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！ 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上
そろそろHTML5始めてみませんか？
HTML5（※）が何かと話題です。「Flash vs HTML5」のような対立構図で取り上げた記事や議論もよく見かけましたが、新しい技術に飛びつけばいいのではなく、ターゲットユーザーのブラウザー環境や最適な表現技術、パフォーマンスや互換性を考慮して使い分けるべきでしょう。 とはいえ、最近ではiOSやソーシャルメディアの普及などで、JavaScriptやCSS3使ったHTMLベースでの開発に対する要望も増えています。従来のWebサイトでは主にPCでの閲覧を中心に考えていましたが、現在ではスマートフォンやタブレットなどさまざまな端末での閲覧を想定した、より柔軟な対応がクリエイターに求められています。 スマートフォンやタブレットだけではありません。Retinaディスプレイを搭載したMacBook Proが発売されたり、ネット接続を前提としたスマートTVが注目されたり、デバイスも日々進化を遂げてい
スタンドアロンで動作する5kb以下でクールな日付ピッカー「Pikaday」:phpspot開発日誌
Pikaday: JavaScript datepicker ? David Bushell ? Web Design & Front-end Development スタンドアロンで動作する5kb以下でクールな日付ピッカー「Pikaday」 次のようなカッコいいピッカーが実装できます。CSS3等も利用していますが、IEの古い物でも使えるようになっているようです デザイン的にシンプルでいて綺麗な物なので、１つの選択肢として覚えておいてもよいかもですね。 jQueryプラグイン、ではないため、次のようなコードで初期化を行います 関連エントリ Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 Android風の日付ピッカー実装用jQueryMobileウィジェット「Mob
緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions
にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
HTML5でつくられた、ページ遷移・画面遷移のアイディアがすごい
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。 Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています！ 魅力的な画面遷移エフェクトのコード集！ Cubic Transition ※「▶Play」ボタンをクリック！
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」:phpspot開発日誌
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」 2012年09月12日- TideSDK | Create multi-platform desktop apps with HTML5, CSS3 and JavaScript HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」。 元々はTitaniumDesktopとして開発されていましたが、TideSDKという名前になったっぽい。 Windows, Mac, Linux のアプリをWEB開発言語で開発できるTitaniumMobileみたいな仕組みです。 スマホだけじゃなくてやっぱりデスクトップアプリも欲しいということがありますから、こういう仕組みでさっくりとやってしまいたいですね。 Windows版アプリ Linux版アプリ Mac
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
HTML5 開発者に便利なツール 14 個
先日 Google+で Addy Osmani 氏が紹介していたオンラインツールが便利そうだったので紹介します。 DocHub.io # CSS, HTML, JavaScript, DOM, jQuery, PHP, Python の API リファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。 Dillinger.io # 最近 GitHub 関連で使われるようになって流行り始めた Markdown 記法を、視覚的に確認しながら入力できるツール。Dropbox や GitHub のアカウントで繋ぐと、アップロードできるようです。Mac 用デスクトップアプリの Mou というのも合わせて紹介されていました。 HTML5Please # 今から使える HTML5 機能のリストとブラウザの対応状況に応じたアドバイス、そして Pollyfill (未対応ブラウザ向けに機
HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」
TOP > WebDesign > クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」 限られたスペースを有効に利用するため、もっと魅力的に写真を見せるためにスライドショーを利用しているという方は非常に覆いと思いますが、今回紹介するのはCSS3で実現するクリエイティブなスライドショー集「CSS3 Image Galleries, Slideshows and Image Effects」。 Sliding Image Panels with CSS3 文字や、写真の動きなど、今までのスライドショーにはなかったギミックやエフェクトがCSS3によって実現されています。いくつかのスライドショーが公開されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5でモバイル3Dゲームの開発は可能?!
IEをHTML5やCSS3に対応させるJSライブラリーまとめ | A!@attrip
Webサイトに3D表現を組み込みたいときに役立つテクニックやライブラリ
stroll.js - CSS3 Scroll Effects