モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
モバイル向けCSSのインライン化ライブラリを公開しました - gumi Engineer’s Blog
はじめに こんにちは。gumiの畠です。 今日のお題は悪名高きガラケーのCSSのお話です。 キャリアごとに色々あって面倒くさいガラケーのCSSも、これを読めばPCサイトのように簡単に扱えるようになります。 モバイルでもCSSを使おう！ 最近のウェブサイトでは装飾と構造を分離するためにCSSを使用するのが一般的です。 しかし、docomoの古い携帯ではPCサイトと同じようにはCSSが使用出来ません。 そのため弊社でも本来はCSSで表現すべきものをインラインのstyle要素としていました。 ですが、perlやPHPにはこういう状況を解決するために、styleタグで指定した外部CSSファイルを読み込んで、インラインのstyle要素に入れ込んでくれるライブラリが存在しています。 実に羨ましい限りですね！ なんでpythonにはないんでしょう＞＜ とは言え、ないことを嘆いていても仕方ないのでHtml
携帯用の告知ページのHTMLとCSSを公開しておきます。 - Trans
インクルーシブデザインワークショップの告知ページの携帯用HTMLとCSSを書いたので、せっかくだから公開しておきます。 モバツイにインクルWSの広告出してるよ！ 先日から宣伝しているインクルーシブデザインワークショップ with Re:Creator's Kansaiですが、先週あたりから携帯電話でもそれなりのデザインで閲覧できるように対応させました。 理由はワークショップそのもののテーマが携帯電話ということもありますし、またモバツイに無料で広告を出させてもらえると知り、f-shinさんにお願いすると快く承諾をいただいたので、せっかくならPCサイトを携帯で見てもらうのではなく、携帯用のページを用意しようかと思った次第。 せっかくだからコードを共有 コーポレートサイトそのものを携帯対応にしてほしいという案件は少なくとも僕の周り（NPO法人や公益法人等）では聞かないのですが、河野武さんのスライ
勘違いのないようにtoInlineCSSDoCoMoの仕様について言っとくか - 絶品ゆどうふのタレ
ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 | ke-tai.org - インフィニットループ 手前味噌リンクわっしょい。ke-tai.orgさんには感謝リンク。 toInlineCSSDoCoMoの仕様なんですが、はてブとかで「外部参照をインライン化」だと思ってる人とかがいるみたいなので言っとくと、外部参照だけじゃなくて内部参照のsytleタグもよしなにパースしてくれます。 外部参照やstyleタグ指定が複数あってもそれらを全てsytle要素に突っ込んでくれるので、定義が多段になってる状態でもきちんとできます。sytle要素が個別に定義してあるタグでも、ちゃんとマージします。 無論、class指定が複数記述してあっても、*1全部適用します。 また、パースし終わった外部参照・内部参照のlinkタグ・styleタグは除去されるので、通常
ke-tai.org > Blog Archive > ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」
ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 Tweet 2008/7/9 水曜日 matsui Posted in DoCoMo | 5 Comments » ケータイ向けサイトを作っていく上で一番問題となるのが、ドコモ端末が外部CSSファイル読み込みや、styleタグでの内部参照に対応していないことです。 PerlではHTML::DoCoMoCSS [hatena.ne.jp] というライブラリがあり、かねがね羨ましく思っており、いつか移植したいなと思っていたりしたのですが、ついにPHPでもこの問題を解決してくれるライブラリが登場しました。 これは素晴らしすぎます。 → Asial blog DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました [asial.co.jp]
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT
CSS Nite in Ginza, Vol.21にいってきた - Webtech Walker
テーマは携帯サイトの構築についてでした。忘れないうちにメモっときます。 CSS Nite in Ginza, Vol.21に関するエントリー | CSS Nite公式サイト 「携帯サイトのコーディング事情～基本編」 ／宮永邦彦（アイデアマンズ株式会社） 携帯サイトの現状からコーディングのテクニックまでわかりやすく解説されていました。 携帯サイトの現状 携帯サイトは面倒だが他の人がやっていなからビジネスチャンス 現在のインターネット利用状況はPC8000万人、携帯7000万人、両方使う人6000万人。携帯は無視できる数ではない 主な利用者層は若年層、学生、女性など 携帯サイトに求められること（大切なこと） 中毒性（mixiや株など） 電車に乗ってる時間や待ち時間などの短時間で楽しめる（ニュース、小説など） 緊急性を必要とするもの（乗り換え案内など） 携帯サイトのコーディングの基本 基本的に文
HTMLの質の追求は、モバイルがきっかけでブレイクする。
Web標準を考えるというエントリーで、フルCSSが受託案件で堂々と使えるようになったのは、SEOという言葉が出てきたから、という言葉を書いたら、はてブに微妙な反論があった。 しかし、それは現場では間違いではなかった。 2002～2003年頃は、ネスケ4を切るための理由がなかったのだ。 ネスケ4を切るということは、少なからずユーザーを失うというビジネスマターの決断になるので、制作者の論理、HTMLの論理などという瑣末（あえて言ってみる）なことで、ビジネスの機会損失になることは許されない。 もし捨てさせたければ、ビジネスニーズvsビジネスニーズの取捨選択の決断が必要。 そこにハマったのが、MovableType（blog）とSEOだった。blogは、なんだかんだとUTF-8であることが求められるし、SEO対策のためにテーブルレイアウトが悪者とされることとなった。 ずばり、この二つのキーワードが
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
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
モバイル向け CSS - saitonのブログ
HandheldStylesheets 書かれたのは 2004 年 6 月と少々古いが、Opera の Jax による投稿を元にした、参考になるリンク付きまとめページ。
携帯電話向けのCSS - 携帯電話向けコンテンツの書き方
フィーチャフォンで使う事の出来るカスケーディングスタイルシート(CSS)のセレクタ及びプロパティを解説します。 フィーチャフォンでのCSSのセレクタ・プロパティは、参考資料・オープンウェーヴ社が定めているCSSのプロパティに移転しました。 また、 フィーチャフォン用の CSS を書くに当たって CSS 非対応機種との兼ね合い も別文書・携帯電話向けの CSS を書くに当たってに移転しました。 CSS に関して基本的な事柄については、CSS 入門(HTML & CSS 入門)をご覧下さい。 また、各プロパティなどの詳細は CSS(カスケーディングスタイルシート)及び CSS リファレンスをご覧下さい。 フィーチャフォンでの CSS について。 WAP 2.0 での CSS。 EZ ウェブ及びソフトバンクのフィーチャフォンは、WAP 2.0 に準拠しているため、CSS を使う事が出来ます。 但
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://sunny-design.net/2008/01/cssnite21-1.shtml
モバイルでのXHTMLとCSS