【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方
こんばんは、企画の林です。 今回は iPad 専用ウェブアプリ、Sleipnir Start for iPad の開発で学んだ CSS3 でのアニメーション処理についてお話します。 iPhone / iPad 向けのウェブアプリを作ろうと考えている方で jQuery 使いの人に優しい内容です。 ※ Sleipnir Start for iPad が何か分らない方は前回の記事をどうぞ。 iPad 上のブラウザで、ネイティブアプリのように滑らかにのアニメーションさせるためには jQuery.animate() を使ってはいけません。 CSS3 の transform:translate3d を使って GPU 上で処理させる必要があります。 （jQuery.animate() 関数はお話にならないくらいカクカクした動きになってしまいます。） 上下左右どの動きも transform:transla
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」:phpspot開発日誌
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」 2011年04月19日- Adapt.js - Adaptive CSS スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」。 見ているユーザによってディスプレイのサイズなんかはまちまちで、ブラウザのサイズも結構違いますね。 このフレームワークを使えば、幅が600〜800px は a.css、800〜1200px の場合は b.css のように使い分けるのが容易になります。 端末の違いなんかもCSSによって分けてしまえると、プログラム的な無駄な分岐を省けて綺麗に作れますね。 ここら辺の分岐を簡単な使い方で勝手にやってくれるのがAdapt.js。スマートフォン向けサイトなんかにも使えます。 iPhoneだと縦で大体320p
CSSG Collections: Forms
Get these free contact form styles. Brought to you by templatica.com. Go back to the article to download the form bundle. Form 1 Contact form Name Email Website Message Send Form 2 Contact Us Contact form Name Email Website Message Send Form 3 Contact Us Contact form Name Email Website Message Send Envelope graphic found at youthedesigner.com Form 4 Contact Us Contact form Name Email Website Messa
※追加・修正 IT関係やWebデザイナーは絶対に読むべきブログ・サイト
サイトやブログ作り・デザインを考えている時に参考になる記事や影響力の大きいブログやサイトをまとめてみました。 IT関係やデザイナーは絶対に読むべきブログ・サイト 僕も多分、皆さんもお世話になっている方も多いと思いますが 改めて、僕がよく参考にしたり、楽しませてもらったりしているブログやサイトをまとめてみました。 2つのブログを追加させてもらいました。 「ホームページを作る人のネタ帳」さん jQueryやWebデザインと様々な幅の広い話題で毎日を飽きさせてくれないブログです。 なにより、多くの人から愛されているブログだと感じます。 「photoshop vip」 Photoshopのチュートリアルなどを豊富に紹介しています。 Webデザイナー関係の人は、ぜひ見ましょう。 「コリス」さん フリーな素材からJavascriptやCSSなど紹介しています。 更新頻度ま高いので必見です!!! 「We
2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ
少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基本的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考えるウェブデザインでこれは気をつけたいの35のポイントデザインQRコードの作り方非デザイナーのためのデザイン
GoogleのChromeブラウザの構成モジュールのそれぞれのバイナリ・サイズの表 - [モ]Modern Syntax
さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor）の私のページはこちらです。 https://podcasters.spotify.com/pod/show/kazuyoshi-nagasawa このSpotify for PodcastersページのRSSは以下になります。こちらのRSSではenclosureタグなどでlength値などがしっかり入っているのでこれを購読しておくとよいかと思います。 https://anchor.fm/s/66ff2830/podcast/rss ここで聴く！という人は以下のプレイヤーからどうぞ。 んで、これまではGoogle Drive上に保存したmp3ファイルをaudioタグで聞けるようにしていたのですが、Google Driveの仕様がかわったのか以前の方法だとエラーになってしまい
div要素を画像枠で囲む - うなの日記
任意のサイズのdiv要素を画像枠で囲みたい。具体的には、 ということでいくつか方法を検討してみました。 方法1 - 3分割した画像+div 3つに分割した枠画像とdiv要素を使う方法。 ○HTML/CSSがシンプル。 ×横幅が固定される。横幅のパターンがいくつかある場合、幅ごとに別の画像を用意する必要がある。 画像 枠画像を上、真ん中、下の3つに分割した画像を用意する。真ん中の画像は縦方向にリピートして使うので高さ1pxでOK。 HTML 背景を配置するためのdiv要素を追加する。枠で囲む対象のdiv要素はpanel_center内に配置。 <div class="panel_100"> <div class="panel_top"></div> <div class="panel_middle"> <div class="body" style="margin-left:10px;" >
第27回 フォームとCSS
今回のポイント formの幅や高さは指定しないのが無難 divの中にformを含めてレイアウトする IMEをCSSで制御する フォーム（form）もHTMLを形成するタグの一種ですから，当然CSSによる装飾が利きます。これまで多くのWebデザイン解説書が世に出てきましたが，formの装飾にページを割いたものは多くはありませんでした。 しかし，エンジニアがformを使わないWebサイトに関わることはほぼ皆無です。サーバー側でのプログラムを必要とするサイトでは，ほとんどの場合，ユーザーがformでデータを入力するからです。 ページにたくさんのエレメントを並べるのだけがformではありません。Googleのスタートページのように検索語句を入れるテキストボックスと，その語句を送信するボタンがひとつずつというのも立派なformです。ですからエンジニアの方々は，formの装飾の仕方をどうしても習得して
今時のデザインのウェブサイトの作り方を丁寧に解説しているPhotoshopのチュートリアル集
透明感のあるものやグランジ風・イラスト風など最近よく見かけるウェブサイトのデザインを一から丁寧に解説しているPhotoshopのチュートリアルを紹介します。
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
正しく、早く、美しいコーディングを実現するために踏むべき5つのステップ::::::STOPN' LISTEN::::::to the silence:::::::
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
テーブルのボーダーに余白がある場合のサンプル
的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。 サンプルページ サンプルダウンロード（zip：15kbくらい） 今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。 ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。 試行錯誤した結果、背景でやってみることにしたらうまく行きました。 ただ、背景でやるにしてもその切り方がちょっとだけ、工夫？する必要があります。 該当画像は、後ほど。 CSSは、こんな感じになってます。 #main table { border-coll
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
[CSS]フォームをリスト要素で並べたスタイルシートのチュートリアル
Phenomena Entertainment
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
