html5-memo.com
XHTMLの書き方と留意点
class="abstract" itemprop="http://purl.org/dc/terms/abstract"ひろく普及したHTMLの資産を生かしつつ、より強力で応用範囲の広いXMLの技術をWebに取り込むために、HTML 4.01と互換性を持つ新しいマークアップ言語XHTML 1.0が勧告されました。次の世代に備えるための、いくつかのポイントをご紹介します。 XHTMLとは XHTMLの基本形 HTMLとの互換性について 従来のHTMLをXHTMLに変換するための若干のヒント XHTMLとは 2000年1月26日にW3Cの勧告となったXHTML（Extensible HyperText Markup Language）[XHTML10]は、素朴な文書構造記述言語として発展してきた（あるいは混乱してきた）HTMLに、XML[XML1]の持つ柔軟性、拡張性を取り入れたものです。H
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
FirefoxでTITLE属性のツールチップ内改行を有効にしたい
さて趣味でプログラミングをしているわけですが最近は専らPHPのそれにかかりきりです（1.4.0がリリース間近ということもあり）。でも，たまにはJavaScriptのスクリプトも書いてみたくなります。 IMGタグにはALT属性がありますが，これは画像の代替テキストの役目を果たします。XHTMLでは必須の項目です。このALT属性なんですが，ホームページ作りに励んでいる方々はお気付きかもしれませんが，インターネットエクスプローラー(IE)とFirefoxでは，挙動が違います。IEでは，画像にALT属性があるとマウスのカーソルを重ねたときに，ツールチップ(バルーンヘルプ)が表示されます。でも，Forefoxでは何も表示されません。これはFirefoxのバグというわけではなくて，単にブラウザ間の実装(解釈)の違いに基づくものです。じゃ，Firefoxでもツールチップを出すにはどうしたらいいかというと
小人さんへの置き手紙: title 属性のツールチップ内で改行
カテゴリ html title 属性のツールチップ内で改行 2004-01-03 14:38 更新 多くのウェブブラウザは、HTML の title 属性の内容をツールチップとして表示する。内容が長い場合は適当に改行して表示することもある。では、任意の位置に改行を入れることはできないのだろうか？ WinIE では title="1行目 2行目" 実は、これで Windows IE はツールチップ内で改行してくれる。つまり、改行コードを空白扱いせず、改行として扱ってくれるのだ。しかし、妙な位置で改行すると、可読性が落ちるし、気持ち悪い。もうちょっとマシな方法はないものだろうか。 Windows での改行コードは CR+LF で、10 進表記コード番号は CR が 13 、LF が 10 だ。そこで、先程の例を次のように書き換えてみる。なお、 は数値文字参照で、先程の改行コードの番号に対
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
iモードHTMLとiモードXHTMLを正しく切り替える方法 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
最近発売されているドコモの機種（FOMA）のブラウザにはたいてい iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。 例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、 iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。 これは、携帯電話が機能向上するのと並行して、 携帯に対応したHTMLもバージョンアップを繰り返すためです。 このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。 さて、携帯サイトを作成する際のポイントについてふれますが、 多くの方が勘違いされているのは、 ドコモの機種が割と新しい機種、つまりX
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
XHTML Mobile Profile Tags List
All of TAGs<A> <ABBR> <ACRONYM> <ADDRESS> <B> <BASE> <BIG> <BLOCKQUOTE> <BODY> <BR> <CAPTION> <CITE> <CODE> <DD> <DFN> <DIV> <DL> <DT> <EM> <FIELDSET> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <KBD> <LABEL> <LI> <LINK> <META> <OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <SAMP> <SELECT> <SMALL> <SPAN> <STRONG> <STYLE> <TABLE> <TD> <TEXTAREA> <TH> <TITLE> <
世界四季報: 3キャリア対応携帯サイトXHTMLテンプレート
ドコモ（docomo）、AU、ソフトバンク（SoftBank）の３キャリアに対応した３G携帯サイト専用のXHTMLテンプレートをまとめてみました。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <meta name="keywor
作ろうiモードコンテンツ | サービス・機能 | NTTドコモ
iモードコンテンツの仕様や作り方、技術情報、開発ツールなどのコンテンツ制作者向けの情報を公開しています。iモードコンテンツの制作の際にぜひご活用ください。
XHTMLへの移行（実行編）
HTML4.01からXHTMLへ移行する場合、移行するXHTMLのバージョンによって、必要な作業が微妙に異なります。 「XHTMLへの移行を視野に入れる」で、下準備をすませてから、実際の移行作業に入って下さい。 移行のしやすさ、古いブラウザへの対応では、XHTML1.0の方がやりやすいです。 これは、文字コードがUTF-8、UTF-16以外の場合は必要です文書の文字コードがUTF-8もしくはUTF-16以外で、サーバ側で文書の文字コードの指定ができない場合に必要になります。（XHTML1.0 第2版）。Shift-JISコードでXHTML文書を作成した場合は、<?xml version="1.0" encording="Shift_JIS"?> を先頭に入れます。 HTML4.01 Transitionalの場合、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
HTML5 における HTML4 からの変更点
この文書は「HTML5 differences from HTML4 (W3C Working Draft 25 May 2011)」の日本語訳です。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。 この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照してください。 更新日: 2011-09-15 公開日: 2011-05-26 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> HTML5 における HTML4 からの変更点 2011年5月25日付 W3C 草案 (Working Draft) この版: http://www.w3.org/TR/2011/WD-html5-diff-2011
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
design actually » Blog Archive » IE5.0/IE5.5のボックスサイズの解釈の違い
IDEA * IDEA
