-webkit-appearanceでフォーム要素のスタイルをリセット
<img src="http://webdev.jp.net/wp-content/uploads/2013/08/webkit-appearance-defaurt-reset wikipedia reference.png” alt=”-webkit-appearanceを設定してみた” width=”400″ height=”400″ class=”aligncenter size-full wp-image-1412″ /> スマートフォンのデフォルトブラウザ、Safariのフォーム要素に、スタイルシートで独自のデザインを設定しようとしたとき 角丸やグラデーション、ドロップシャドウなどの初期スタイルを打ち消すのに、意外と手こずったことはありませんか？ -webkit-appearanceをつかうと、これらの装飾を一部外せるので、フォーム要素をすべてオリジナルの装飾にするスマホサイト
ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』
以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSS – Googleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
wp_is_mobile関数 - WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ
こんにちは。株式会社コミュニティコム代表取締役の星野邦敏です。 WordPressのバージョンが、日本語では2012年6月15日に、3.3.2から3.4にバージョンアップされました。 3.4から加わった条件分岐タグとして、 wp_is_mobile関数 があります。 これは、Webサイトを閲覧する端末のヘッダー情報を見て、パソコン用のコンテンツと、スマートフォン用のコンテンツを切り分ける、WordPressの条件分岐タグです。 具体的には、WordPressテーマに、以下のようなソースコードを記述すると、パソコン用のコンテンツと、スマートフォン用のコンテンツを、切り分けることが可能となります。 <?php if (wp_is_mobile()) :?> スマートフォン用コンテンツをココに書きます。 <?php else: ?> パソコン用コンテンツをココに書きます。 <?php endif
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
スマートフォンに対応したレスポンシブメニューを実装するときに役立つリソース
Webフォントを使用してRetinaにも最適化し... / 深い階層のレスポンシブメニューの実装方法。切り替... / レスポンシブに対応したドロップダウンメニューの実...他...全8件
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
レスポンシブWebデザインで組む際のベースにぜひ！·GroundworkCSS MOONGIFT
GroundworkCSSは多様なガジェットがサポートされたレスポンシブWebデザインのフレームワークです。 レスポンシブWebデザインがもてはやされていますが、テクニックはなかなか一般化しづらいものがあります。そこでフレームワークをベースにしてみるのはいかがでしょう。今回紹介するのはGroundworkCSSです。 スライダーやタブメニューなど様々なウィジェットが提供されています。 タブレット版。 スマートフォン向け。 横向き表示もサポート。 サイドメニューを使った表示。 幅が狭くなるとメニューは縦に並びます。 ボタン、タイポグラフィ。 フォーム。 アラートやナビゲーション。 テーブル。ソーシャルアイコンも多数用意されています。 サイズも様々。使い分けが可能です。 たくさんのアイコンも用意されています。 モーダルウィンドウ。 幅が狭い場合のボタン。 タブの端がちょっと気になるかも…。 ス
スマートフォン・タブレット・PCの場合の条件分岐(JavaScript)
例えばスマートフォンでアクセスした時に、スマートフォン用のアドレスに飛ばすなどユーザーエージェントで判別して処理を変える方法のメモです。 ▼スマホ（iPhone,iPod touch,Android）の場合の条件分岐 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) { //スマホ（iPhone,iPod touch,Android）の場合 alert('おっす、スマホちゃん！'); }
愛宕山太郎坊/Staff
愛宕山太郎坊 アニメーション制作進行支援ソフト 愛宕山太郎坊 ログイン 会社id ユーザー名 パスワード ユーザー名またはパスワードが正しくありません。 閉じる ログイン
iPhoneに適したLightbox
iPhoneでLightboxが動作しなかったので、 代替のパッケージを調査してみた 発生する問題調べてみたところ、次の3つの問題がある事が分かった。 表示位置がずれる本来タップした位置ではなく、かなり上の方に表示される。 画面の暗転が起きるので動作しているのは分かるのだけれど、画像が表示されるように見えない。 ダウンロードが出来ない画像の表示は上手くいってもiPhoneでは画像をプレスすると「画像を保存」と「コピー」が表示されるのが、リンクとして認識され「開く」と「新規ページで開く」、「コピー」が表示されダウンロードできない。 これだと、壁紙画像とか作っても使えないので困る 動作が重いスマートフォンでも使うからこそ動作速度、容量ともに軽量なものが望ましい 調査したパッケージ元祖Lightbox 表示位置 × ダウンロード ○ 軽さ ○ Firespeedでも長く使用していたLightbo
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
1要素1クラス、画像を一切使わずCSSで実装するiPhone UI
1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。 最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する 今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること
iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法 | HTML5でサイトをつくろう
スマートフォンサイトを制作する上で便利なCSS3。 必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。 また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。 最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくることができます。 しかし、実際に自分がデザインしたサイトをコーディングする際には、やはり独自でそれぞれのコードの使い道を知る必要があります。 CSS3の記述は従来のCSSとは違い、少し複雑な記述が必要となります。 今回はそんなCSS3の記述を、サイトデザインでよく使われるPhotshopのレイヤースタイルを再現する方法として一通り紹介します。 ※iPhoneサイト（スマートフォンサイト）制作のため、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://retinajs.com/
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ
公海555000kk线路检测—首页（欢迎您）
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ
Developers.IO
BEMO ｜ 【スマートフォン】labelタグが効かない時の対処法