『Fireworksを使った大規模ウェブサイトのデザイン設計』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業本部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ
一緒に始めようSencha Touch 2.0 入門編: 第1回 Sencha Touchを導入しよう
はじめまして、2012年新卒として入社致しました、だーますと申します。どうぞよろしくお願い致します。 今回はスマートフォンアプリのような操作性を持つWebアプリ開発フレームワークである"Sencha Touch 2.0"について解説させていただきます。 ■ Sencha Touchって何？ Sencha Touchとは、米国のSencha社が開発した、HTML5ベースのWebアプリ開発フレームワークです。 具体的な特徴 ・スマートフォンやタブレットのWebブラウザで動く、ネイティブアプリのようなアプリを作れる！ ・iOS、Androidのどちらでも動作する！ ・HTML5って書いてはあるけど、JavaScriptさえわかれば開発できる！ ・AjaxやJSONPリクエストもバッチリ送れる！ ・無料で利用でき、しかも商用もOK！ 対応OS ・iOS 4.0以上 (iPhone、iPod tou
Sencha Touch を始めよう
このドキュメントではSencha Touchの始め方について解説していきます。 最初にタッチ型端末向けのWebアプリケーションを開発するための基本的なステップについての説明、 次に、Sencha Touchパッケージにも同梱されているデモアプリGeoTweetsの作り方についての詳細な説明 をしていきます。 このドキュメントはSencha Touchを使ってタッチ型端末向けのWebアプリケーションの開発をしたい Web開発者に向けたものです。前提条件としては、Sencha Touchライブラリをダウンロードしていること、 Webサーバー環境が用意されていること、そしてJavaScript・HTML・CSSなどのWebアプリケーション開発 に必要な技術や考え方について理解していること、があげられます。 このドキュメントは以下のセクションで構成されています： Sencha Touch について
Monaca
Mobile App Development Fast, Easy and Flexible.Cross-platform hybrid mobile app development platform and tools in the cloud GET STARTED FREE Monaca makes HTML5 hybrid mobile app development with Apache Cordova simple and easy. Monaca is the most open hybrid app development platform available and ready to be immediately plugged into your existing workflow and development environment. From Cloud IDE
slides(slides.jquery.js)をスマートフォンでフリック操作（flickable）対応可能にしたい。 - ハリーかつき・旧技術ブログ
slidesという画像をスライド表示させるライブラリを、スマートフォン向けにフリック（指で左右に動かす）操作を可能になるよう改造してみました。 「slides」本体は下記にて入手可能です。 SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 1)424行目あたりに、下記のように左右のフリック操作を感知させるイベントリスナーを追加します。 $(function() { var box = $("#slides_cont")[0]; box.addEventListener("touchstart", touchHandler, false); box.addEventListener("touchmove", touchHandler, false); b
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
副収入、何もせず毎月１００万くらい稼いでるけど、質問ある？ : キニ速
ページを表示したスマフォやタブレットのいい感じのスクリーンショットを簡単に作成できる -PlaceIt
jQuery Mobile 1.1.0 日本語リファレンス
Web Design & CSS Inspiration for the iPhone — CSS iPhone