[B! CSS][Android] hidex7777のブックマーク

Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ）

iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チートシートを印刷してすぐに見られるようにしておくと便利ですよね。チートシートの目次 iOS デザインチートシート Swift チートシート Android チートシート Android デザインチートシート Twitter Bootstrap 3 チートシート Foundation チートシート WordPress 時短用チートシート WordPress テーマ開発用チートシート GitとGit

hidex7777 2014/07/25

リンク

考察：Appleはスマホサイトを作らない。

今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう

hidex7777 2014/05/23

リンク

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ

スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。パターン1: 何も考えずに HTML を書くまずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま

hidex7777 2014/05/23

リンク

iPhone、Android position:fixed 対応状況と対応方法 – LIQUID BLOG

iPhone、Androidなどのスマートフォンは、これまで position:fixed に対応していませんでした。固定メニューの実装などに困っていたのですが、iOS 5で対応していました！ iOS 5 iPhoneやiPad、iPod TouchのMobile Safariは、iOS 5から position:fixed に対応しました！他にも、overflow:scroll などに対応しています。 via New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 Android 2.3 viewport で、content=”user-scala ble=no” にすると対応できます。 Android 4.1

hidex7777 2014/05/23

「viewport で、content="user-scalable=no"」これにするかな

リンク

Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。最近、立て続けに﹁上部固定グローバルナビゲーション﹂を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは﹁固定ナビゲーションには落とし穴がある﹂ということでした。そこで、固定ナビゲーション設置に際して、私が個人的に体験した﹁落とし穴﹂と、その解決のためにやってみたことを4つほどご紹介したいと思います。必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。このようなナビゲーションは、一般的に下記の

hidex7777 2014/05/23

スマホのfixed問題、もっとスマートに解決する方法ないものか。

リンク

Androidでスクロールできなくなるバグ

Android2.3端末で、画面をスクロールできなくなる症状に遭遇。調べてみると、iframeとdhisplay:noneの合わせ技で発生するらしい。 javascriptでつくった1ページ内に﹁タブ﹂や﹁アコーディオン﹂で複数のコンテンツを切り替えられるページへ﹁Youtubeのプレイヤー﹂や﹁ソーシャルボタン﹂などのiframeが内包されている構造は要注意！対策 iframeをなるべく使用しないコト。 iframeの使用がさけられない場合は、 display:none での表示・非表示の制御ではなくremove︵削除︶と再配置で表示・非表示を制御する仕組みへ変更するとバグ発生条件を満たせなくなるため、スクロールできなくなる症状は回避できます。参考サイト‥ Androidで全くスクロールできないバグ関連記事 Xperia acro でスクロールできなくなるCSS JavaS

hidex7777 2013/04/08

リンク

HTML5が使えるスマートフォンOS

HTML5が使えるスマートフォンOSHTML5が使えると言うと少し言いすぎですが、headerなどの新要素に対してdisplay:blockが指定されているOSです。 iPhoneなどではiOS4.0以上から、Androidでは2.2からdisplay:blockが適用されています。それ以下のバージョンでHTML5を利用したい場合は、 article, aside, figure, footer, header,hgroup, nav, section { display:block; } といったdisplayの指定が必要です。 Safariや最新のiPhoneで検証してたら忘れがちになりそうなのでメモ。追記‥@hilokiから﹁dialogはもう抜きでよろしいかもです！﹂と指摘いただいのたで削除しました。そういえばこいつはHTML5から削除されたんですよね。スポンサードリンク

hidex7777 2012/03/19

リンク

はてなブックマーク

タグ

関連タグで絞り込む (15)

CSSとAndroidに関するhidex7777のブックマーク (7)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス