■プロフィール

クリエイトウェーブスタッフ

Author:クリエイトウェーブスタッフ
開発における、諸々を書いていきたいなと思っています。

■最近の記事
■カテゴリー
■twitter

■QRコード

QR

■最近のコメント
■月別アーカイブ
■最近のトラックバック
■ブロとも申請フォーム
■twitter_follow

■ブログ内検索

■RSSフィード
■リンク
素敵モバイル用Webアプリ開発ツール「Adobe Shadow」
こんにちは。suraです。

スマフォのメモ。"φ(・ェ・o)

最近弊社でもスマートフォン・iphoneのWebサイトや
Webアプリケーション開発依頼が増えてきております。
その時に一番大変なのが実機での確認作業なんですね。
URLの入力とか面倒で私は、QRコードにして読み込んだりしておりました。。。
そんな面倒な作業を助けてくれるのが「Adobe Shadow」!!

どんなツールかというと、PCのブラウザで表示したURLのコンテンツを、
Adobe Shadow」を通じてiPhoneなどのデバイスで、
自動でそのWebページが表示されるんです。

これを入れたら確認作業が、とても楽に。。。

「Adobe Shadow」の機能で「リモートインスペクション」というのもあり、
デベロッパーツールのように、WebページのDOM構造やCSSなども
PCChrome拡張機能から見ることができるよう。
結構色々出来そうですね。早く使いこなさないと;

確認作業が面倒と思っていた、webデザイナー様方!良かったら試してみてください。

*今のところ英語版のみだと思います。


参考にさせていただいた素敵サイトさん。↓↓
手順が載っています。

http://fladdict.net/blog/2012/06/adobe-shadow.html



ではでは( ・∀・)ノ

カテゴリー:HTML/CSS | TM(0) | CM(0)
Viewportを指定する
こんにちは。suraです。

iphone用HTMLのメモ。"φ(・ェ・o)

現在iphoneでhtmlを制作中ですが、
入力画面を用意する為textareaタグを記述。
その後実機確認すると「入力後拡大したまま、戻ってこない・・・」
模索していると素敵なサイトを発見。
そのサイトを参考に
「meta name="viewport" content="width=device-width user-scalable=no"」
と入れると画面がフィットしたまま出来ました!
ちなみにこれを入れるとピンチイン/アウト操作が
「user-scalable=no」で拡大縮小不可指定しているの為
出来なくなるので注意。


他にも上記以外の回避の仕方はあると思うのですが、
私は上記のやり方で出来たのでメモしておきます。


参考にさせていただいた素敵サイトさん。↓↓

http://ipn3g.com/web/study3.html


ではでは( ・∀・)ノ

カテゴリー:HTML/CSS | TM(0) | CM(0)
CSSスプライト
こんにちはsuraです。

いつものメモ。

私はいつもボタンのマウスオーバー、ダウンなどは
javascriptでマウスオーバーをコントロールする
onmouseout属性, onmouseover属性を仕様しております。
ただ詳しい方に最近「CSSスプライト」というのを教えていただきました。

簡単に言えばjsでなくcssで表示座標をいじってimg表示位置を変えて
しまうというものです。

javascriptでマウスオーバーをコントロールする場合、
最初に見えてる画像はページ読み込み時に
普通に表示するためにダウンロードするんですが、
マウスオーバーした時に、オーバー用の画像を先に読み込んでおかないと表示が乱れたり、
画像がなかなか現れなかったりして思った通りの効果が得られないという事があります。

しかしこの「CSSスプライト」だと↑が解決するんです!
サイトの高速化が期待できるんですね~。

知ってる方は今更かもしれませんが;
html/cssって色々手法があるんですね;
勉強になります。。。

もっと詳しく知りたい方はこちらをどうぞ。
http://www.webcreatorbox.com/tech/css-sprite/

ではでは。


カテゴリー:HTML/CSS | TM(0) | CM(0)

FC2Ad