The Trick To Viewport Units On Mobile | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site’s navigation or p
『SPピグで見るCSS3活用事例』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、森と申します。 スマートフォン版アメーバピグのWebアプリを担当しています。 「HTML5 Web Applicationのつくりかた」という記事が詳しいので、 この記事ではスマホ版ピグのCSSについてマイページを例にご紹介します。 とても長い記事になってしまいましたが、最後までご覧頂けると嬉しいです。 スクリーンショットで見るCSSプロパティやセレクタ2012年4月現在、SPピグ内のレイアウトはどのページも大体同じなので、マイページとフォーム要素を抜粋して使っているプロパティやセレクタの中から主要なものをざっと並べてみました。 HTML
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
Ratchet
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
ソフトバンクcssパーサ&バリデータっぽいもの - zz log
正規表現で書き直しました。 追記 list*、background*、border* に値が任意に順序を指定できますが、実装が抜けています。 参考 uupaa-js - Project Hosting on Google Code 高速でコンパクト, 未来指向の JavaScript ライブラリ こちらのcssパーサを移植して、ソフトバンクcss向けに色々追加しました。 uu.css.parse.js - uupaa-js - Project Hosting on Google Code latest log uupaa-jsを作った方のブログ 軽量化(実効速度&ライブラリサイズ)だけでなく、精度まで追求したエントリーの数々は、見ていて勉強になります。ただし、なるほど、まったくわからん状態のことも多々あります。 Softbank 技術資料 XHTML編 cssの詳細データ できること・でき
XHTML+CSSでの携帯サイト構築～3キャリア対応の落とし穴～/Mobile - サイブリッジラボ
かのうです。 サイブリッジは今夏休み！でも私は休みをずらして9月末の祝日と合せて大型連休にしうと企んでいます。今のところまだ予定はないんですけどね笑 そういえば「iモードブラウザ2.0」のお話 2009年5月以降に発売開始されたdocomo端末に「iモードブラウザ2.0」が搭載されていますよね。 デザイナー向けの新しい機能は下記ですが、まだまだ完全に普及したとは言えないので、結局のところ「XHTML+CSS」での携帯サイト構築が必要ですね。 ・外部スタイルシートを含むCSS対応 ・サイズ制限が500Kバイトに ・Shift_JIS、UTF-8の文字コードが利用可能 ・JavaScript対応（Ajax含む） ・ページ埋め込みFlash動画（FLV）対応 ・クッキー対応 ▼docomo公式サイト iモードブラウザについて XHTML+CSSでの3キャリア対応の落とし穴 なんで普及もしばらく時
HTML_CSS_Mobile - Openpear
HTML_CSS_Mobile Subversion Repository: http://openpear.org/repository/HTML_CSS_Mobile / Latest Release: 0.1.6-beta このライブラリは、 <link>タグからの外部CSS <script></script>タグ内記述CSS スクリプト上からの外部ファイル とかとかCSSファイル/記述を展開し、inlineのstyle要素に埋め込んでくれます。 まだベータな感じ。これからどんどんupして行って、ケータイのHTML/CSSのバッドノウハウを吸収できる緩衝材になればいいなと思って作ってます。 なお、このパッケージはCodeReposからのexternal版で、本体リポジトリは http://coderepos.org/share/browser/lang/php/HTML_CSS_Mo
toInlineCSSDoCoMoをバージョンアップしました
こんにちは、亀本です。 先日toInlineCSSDoCoMoとかいうライブラリを出したら、意外と好評というかみんなあれこれといじりまわしてくれて、また実際に実務の中でもこれを利用する機会があったりなどして、いろいろと改善点が上がってきました。 ほとんどがDOMDocumentに起因する問題で ・Shift_JISなどで機種依存文字(①など)があるとWarningを出して止まる ・実体参照の処理が所々おかしい ・loadHTML()を使うと、XML宣言とDoctype宣言の位置が逆転してしまう などなど。 あとCSSファイルがないときにExceptionが飛ぶのは適用しにくいとか言う話ももらいました。 このあたりは結構きちんと扱えないと実用レベルになりにくいので、いろいろと方法を模索しながらちょびちょび変えたりしたので、バージョンアップしたやつをリリースしておきます。 ファイル：toInl
DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました
こんにちは。Windowsの最大の発明はゴミ箱の標準装備だと思っている亀本です。 追記：Mac信者の某氏にゴミ箱はWindowsの発明じゃないと突っ込まれてしまいました。すみません<(｡_｡)> 昨日はグリーさんのオープンソース勉強会に参加してきました。 今回の講師はDeNAの川崎さんで、わりとモバイル屋さんな自分としてはぜひともチェックしておきたいなと思って参加してきました。 勉強会・懇親会ともなかなか面白い話が聞けたり、変な人がいっぱいしたりしてとても面白かったです。 モバイルをやっているといつも面倒なのは、テンプレートの扱いです。 そのあたりのまとめは以前このブログでうちの高橋さんが超まとめてくれた記事があるので、そちらをご参照ください。 とくにDoCoMoのCSS(i-CSS)は開発者泣かせですね。インラインのみに対応とか、開発しにくくて涙ちょちょぎれそうです。 さてさてそんなDo
３キャリア対応のテンプレートの話 - 絶品ゆどうふのタレ
キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。 なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。 (中略) 最後にもう一度まとめ ・文字コードはUTF-8。 ・マークアップ言語はXHTML Basic。 ・画像はJPEGかGIF。 ・CSSはインラインで書く。 ・ページサイズはXHTML9KB以内、画像含めてで100KB以内。 で、最近の端末はだいたいカバーできるはず。 ページが見つかりませんでした | 15Pub ってことで、割とよくまとまっている感じ。 ただ、実際にこのやり方で組んだことはないんじゃないかなーって言う印象。いや、やったことあったらごめんなさい。 何でそう思うかって言うとインラインCSSのハマりっぷりについて何も触れてない。 ３キャリアで
TokuLog 改め だまってコードを書けよハゲ - ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
ｻｰﾋﾞｽ終了のお知らせ-携帯小説☆ﾌｫﾚｽﾄﾉﾍﾞﾙ
｢ﾌｫﾚｽﾄﾉﾍﾞﾙ｣「ﾌｫﾚｽﾄﾉﾍﾞﾙﾌｪｽﾀ!!｣は2014年1月30日をもちましてｻｰﾋﾞｽを終了いたしました｡ これまで長らくご利用いただきまして誠にありがとうございました｡ ご愛顧を賜りました全てのﾕｰｻﾞｰ様に､心より感謝と共に厚く御礼を申し上げます｡ 今後とも弊社運営ｻｰﾋﾞｽをよろしくお願いいたします｡
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルでのXHTMLとCSS
http://ima.pandach.com/cgi-bin/mt/2007/04/auezweb.php