ドコモ端末でCSSを利用するには Tweet 2008/4/3 木曜日 matsui Posted in DoCoMo | 9 Comments » ドコモ端末でCSSを表示しようとして、悩まれる方が多いようなのでご紹介しようと思います。 ドコモのiモード端末では、FOMA以降の機種でXHTML対応となりCSSが使えます。 ※厳密にいうと、ごく初期のFOMA21xxシリーズでは使えません。詳しくは下記一覧表からご確認ください。 →　iモード対応機種 対応コンテンツ・機能一覧 [nttdocomo.co.jp]　※PDFです ですが、PCと同じように普通に書くだけでは、CSSは認識されません。 下記の3点を守る必要があります。 iモード用のXML宣言、DOCTYPEを付ける CSSは外部ファイルにしない、ヘッダ部にも書かない 拡張子を「.xhtml」にする　※別の方法もあり まず1についてで

モバイル向けの共通ページを制作するためのメモです。2006年中頃までの仕様となりますのでUTF-8やXHTMLで記述可能となってきた現在では適用できない項目も含まれているかと思いますが、旧機種に対応するために有用な箇所も有ると思われますので公開します。 なお最近の状況や仕様などは以下を参照すると良いかと思います。 ・ke-tai.org ・jkondoに憧れて 超手抜きでウェブサイトをモバイル対応 2008 またこの内容は2006年から2007年にかけてイベントにて小冊子として頒布したものです。そちらでご入手された方には情報が古くなってきたための公開ということをご容赦いただければと思います。 目次 はじめに 携帯HTMLの基本型 HTML HTML全般について HTMLタグとオプション 画像/動画 画像 HTMLタグ Docomo(FOMA) au SoftBank 著作権保護(コピー

CSS2.1までのセレクタ一覧とCSS3セレクタ一覧です。 各詳細ページでは、より具体的な説明とサンプルがあります。 CSS2 セレクタ一覧 セレクタ名 パターン 簡単な説明

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

画像やテキストの説明、またリンクの説明としてツールチップと呼ばれる吹き出しを表示させることがあります。 JavaScriptライブラリのjQueryを使用して、軽量かつデザイン性があるツールチップjQuery Plugin: TinyTips 1.1 | Mike Merritt | Digital Infernoを紹介します。 sponsors 使用方法 jQuery Plugin: TinyTips 1.1 | Mike Merritt | Digital Infernoからファイルをダウンロードします。 <link rel="stylesheet" href="tinyTips.css" type="text/css" media="screen" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script

ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max

Google Mapって便利ですよね。 でも細かい設定をするのは少し面倒とお思いの方にjQueryプラグインの「gMap - Google Maps Plugin For jQuery」を紹介します。 マーカー位置やzoomレベル、コントローラー設置など設定が簡単に可能です。 sponsors 使用方法 gMap - Google Maps Plugin For jQueryからjquery.gmap-1.0.0.jsをダウンロードします。 <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ＡＰＩキー"></script> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="te

NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b

ページ遷移の際に何らかのエフェクトが発生するサイトがありますが、今回紹介するjQuery Animated Pageswitch Pluginを利用することで、それを簡単に再現可能です。 sponsors 使用方法 jQuery Animated Pageswitch Pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.pageswitch.js" type="text/javascript"></script> <script> $(function() { $('#id名 a').pageswitch({ url: '/test/', //遷移先URL（通常のaタグでの指定でも問題ありません） properties

画像のシンプルな見せ方としてクロスフェードを使用するケースは多いのではないでしょうか？ それを簡単に行えるのが、jQueryプラグインのImage Fader jQuery plugin - wingtechです。 sponsors 使用方法 Image Fader jQuery plugin - wingtechからjquery.metadata.jsとjquery.imagefadingslider.jsをダウンロードします。 もちろんjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.metadata.js"></script> <script type="text/j

ソーシャルな時代にはブックマークやrss、twitter、facebookなど使っているものが多くなります。 これらを手軽に表示するjSocial | Social Links Plugin By thatryanを表示することで、あなたのファンが増えていくことでしょう。 sponsors 使用方法 jSocial | Social Links Plugin By thatryanからファイル一式をダウンロード。 <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/java

日本人ですし、WEBでも縦書き使いたいですよね？ はいJavaScript！ 縦書きjQueryで実現するnehan - Project Hosting on Google Codeです。 ※作者の方からご指摘いただき、jQueryがなくても動くとのことです。 jQueryないバージョン sponsors 使用方法 nehan - Project Hosting on Google Codeからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="nehan.js"></script> <script type="text/javascript"> $(function(){ Nehan.LayoutMa

PC、スマートフォン、タブレットなど様々なウィンドウ幅に対応する必要が生じている昨今、対応負荷を軽減するためにFitText - A plugin for inflating web typeを使用してみるのはいかがでしょうか。 画面幅に応じてフォントサイズを変えてくれます。 これをサイトやページタイトルに適用しておくとある程度デザインイメージを統一させることができそうです。 sponsors 使用方法 FitText - A plugin for inflating web typeからファイル一式をダウンロード。 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script src="jquery.fittext.js" type="text/javascript"></script> <scrip

JavaScriptでテキストを効果付きでローテション表示「jLetter - jQuery text rotator plugin」 ローテション表示させるバナー画像を作るのはちょっと面倒・・・ そんなあなたには、jQuery text rotator plugin - jLetterが良いかもしれません。 テキストに動きをつけてローテションさせられ、ちょっとインパクトを与えられそうです。 sponsors 使用方法 jQuery text rotator plugin - jLetterからファイルをダウンロード。 <link type="text/css" href="jletter.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script t