モバイルサイトのCSS : LINE Corporation ディレクターブログ
こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。それらのサービス以外では、モバイルサイトのコーディング関連のとりまとめを担当していることもあり、今回はモバイルサイトのCSSについてご紹介したいと思います。 以前の記事『モバイルサイトのデザイン』でもご紹介させていただきましたように、『ケータイ livedoor』は 3Gケータイを中心とした開発を行っており、XHTML でコーディングする機会が増えてきました。モバイルで XHTML を表示できるということは、スタイルシートに対応していることも意味するので、モバイルサイトの表現力のアップにつながります。 ■モバイルサイトのCSS事情 スタイルシートを採用するメリットとして、通常は HTML 構造の簡略化やデザインの一括管理などがあげられます。しかしモバイルサイトでのスタイルシートの採用は、通常
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
スマートフォンとガラケーに対応したサイトを作るときの注意点 : WEBクリエイターのメモ帳
スマホと普通の携帯（ガラケー）に対応した ハイブリッドな携帯サイトを作らなければならなくなった時の注意点を２つ というか、備忘録です。 いま現在だと、DOCTYPE宣言は「XHTML 1.0 Transitional」にした方が言いのかなぁ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 更に、メタタグで「viewport」の設定を記述した方がいいみたい。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 携帯サイトでスタイルシート（CS
開発者向け情報 | サービス・機能 | NTTドコモ
お客様の設定により、お客様情報が「非表示」となっております。お客様情報を表示するにはdアカウントでログインしてください。 お客様情報表示についてへ お客様情報表示についてへ
auとソフトバンクの外部CSSを切り替えるMobile CSS Switcher 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
auとソフトバンクの3G端末は外部CSSを読み込むことで、 豊富な表現が可能になっています。（ドコモはダメ） ただし、auとソフトバンク端末に搭載されているブラウザは種類が異なるので、 3キャリア対応のサイトを1枚のHTMLで作る場合は、文字サイズなどの違いがどうしてもでてきてしまいます。これに対処するためには、auとソフトバンク端末で読み込む外部CSSを切り替えてあげる方法があります。 そこで、今回はauとソフトバンクで外部CSSを切り替えるスクリプトをご紹介します。 まず、どのような設計にするかというと、 ・au用の外部CSS「css_au.css」とソフトバンク用の外部CSS「css_sb.css」を用意する。 ・au端末でアクセスしてきたら、「css_au.css」を読み込むようにlinkタグを発行する。 ・同様に、ソフトバンク携帯には「css_sb.css」を読み込むようなlin
ke-tai.org > Blog Archive > ドコモ端末がついに外部CSSに対応したようです
ドコモ端末がついに外部CSSに対応したようです Tweet 2009/5/20 水曜日 matsui Posted in DoCoMo, ニュース | 3 Comments » 昨日発表されたドコモの新端末（iモードブラウザ2.0端末）では、とうとう外部CSSに対応したようです。 JavaScriptやCookie対応の影に隠れて触れられてなかったのですが、これはかなり大きな修正です。 ドコモのCSSはケータイサイト作成の上で、最大の懸念とも言ってよかったのでこれは嬉しいですね。 → NTT docomo 作ろうiモードコンテンツ iモードブラウザ2.0対応i-CSS2について [nttdocomo.co.jp] 外部CSSに加えて、もちろんヘッダ内に書くCSSにも対応しているようです。 これは昨日から新しく提供が開始された、iモードHTMLシミュレータII 8.2でも確認できます。 →
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
中学校武道・ダンスの必修化：文部科学省
文部科学省では、平成20年3月28日に中学校学習指導要領の改訂を告示し、新学習指導要領では中学校保健体育において、武道・ダンスを含めたすべての領域を必修とすることとしました。 武道は、武技、武術などから発生した我が国固有の文化であり、相手の動きに応じて、基本動作や基本となる技を身に付け、相手を攻撃したり相手の技を防御したりすることによって、勝敗を競い合う楽しさや喜びを味わうことができる運動です。また、武道に積極的に取り組むことを通して、武道の伝統的な考え方を理解し、相手を尊重して練習や試合ができるようにすることを重視する運動です。 ダンスは、「創作ダンス」、「フォークダンス」、「現代的なリズムのダンス」で構成され、イメージをとらえた表現や踊りを通した交流を通して仲間とのコミュニケーションを豊かにすることを重視する運動で、仲間とともに感じを込めて踊ったり、イメージをとらえて自己を表現したりす
ブラウザで読みやすいフォントとは
フォントには様々な種類がありますが、画面上で一番読みやすいフォントは、「Verdana」フォントだと思います。 当ブログでも「Verdana」フォントを使用していますが、「Verdana」フォントは、MTの初期設定では第一指定されています。また、他のブログサービスやWebサイトでも非常によく使用されていますね。 では、なぜ、「Verdana」フォントがよく使用されているのでしょうか？ そこで、今回は、「Verdana」フォントについて調べてみましたので、是非、参考にしてください。 ■ Verdana フォント 「Verdana」フォントは、 「画面上での見た目、読みやすさ」を基準として 1996 年にデザインされた比較的新しいフォントです。Windows に標準でインストールされていますので、ほとんどのユーザー環境に対応しています。 < 表示例 > フォントの特徴として、文字
HTML色見本
HTMLにおいてカラーネームで指定できる色のリストです。ラジオボタンをチェックすることによってこのページの背景色を変えることができます。 （注意）カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあります。
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
docomo のユーザエージェントからiモードブラウザ1.0かどうかを判断する方法 - それはBooks
参考書籍 - ke-tai.org
Fun With CSS Shapes
http://oshare.chips.jp/making/05tech/oth02.html
http://www.css-lecture.com/log/css3/css3-border-radius.html