index of HTML5 elements
index of HTML5 elements last-modified: Fri Jun 11 16:28:00 2010 a abbr address area article aside audio b base bdo blockquote body br button canvas caption cite code col colgroup command datalist dd del details dfn div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link map mark menu meta meter na
formに複数の送信ボタン - 徒書
１つのformで複数ボタンの配置 - masdoiの日記より。 １つのformで複数ボタンを作り、どのボタンが押されたのかをCGI側で判定したい場合があります。 ということでJavaScriptを使用したソースが例示されていたのですが、「複数ボタンを作り、どのボタンが押されたのかをCGI側で判定」という目的に適うものならば、以下のようにHTMLだけでごく簡単に実現できます。 <form action="" method="get"> <input type="submit" name="b1" value="button1"> <input type="submit" name="b2" value="button2"> </form> サンプルHTML サンプルのフォームは action="" method="get" としているので、ボタンを押すとHTMLファイル自身のURLにクエリ文
Another_HTML-lintへの言及 - 徒委記
Another_HTML-lintへの言及 2007年7月31日 2007年8月1日 2007年8月4日 2007年8月5日 2007年8月6日 2007年8月7日 2007年8月8日 参考資料 取り敢えず作成。 2007年7月31日 lintで100点を取る必要はない : 雑記帳 : der Gegenwart 2007年8月1日 IT戦記 - xmllint で XHTML をバリデーション 2007年8月4日 まじかんと雑記: Another HTML-lint を使うべからず まじかんと雑記: まず lint より validator を使え まじかんと雑記: まず lint より validator を使え その 2 まじかんと雑記: Another HTML-lint について その 4 2007年8月5日 まじかんと雑記: Validator/lint に関して望まれる(べき
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
見出し要素に関する議論 - 徒委記
見出し要素に関する議論 2007年6月30日 2007年7月2日 2007年7月4日 2007年7月5日 2007年7月6日 2007年7月7日 2007年7月8日 2007年7月9日 2007年7月10日 2007年7月11日 2007年7月13日 2007年7月14日 2007年7月15日 2007年7月17日 2007年7月26日 サイト内の各ページで常にh1要素をサイト名とすることについて、等々。 2007年6月30日 CSSでイケてるデザインサイト : 雑記帳 : der Gegenwart Rusicaさん。「イケてる」条件に「トップページ以外のh1要素がサイト名になっていないかどうか」を提示。 die Vernunft - 個人的なイケてるサイト基準 emiさん。「駄目ですか…？」 2007年7月2日 h1は最も重要な見出し - 徒書 北村曉。文書作成者は重要と思うものをh1
h1は最も重要な見出し - 徒書
CSSでイケてるデザインサイト : 雑記帳 : der Gegenwartの記事で、「イケてる」条件として「トップページ以外のh1要素がサイト名になっていないかどうか」を挙げていたことについて、はてなブックマークのコメントで幾つかの言及がありました。 aratako0 僕もh1でサイト名はありだと思うんだけど。全ページ統一しておけば、スクリーンリーダーなどでhn要素を引っ張り出して、トップページに戻るのが簡単そうな気がする。 imoni "トップページ以外のh1要素がサイト名になっていないかどうか" むむ…む？ kana-kana_ceo CSS, Web Design 「トップページ以外のh1要素がサイト名になっていないかどうか」どうなんだろう。リソースは単独で扱われるモノたりうると考えれば、h1 要素はサイト名でも問題ないと思えるが。 / まあ、address でもいいんだけど。 そこ
JavaScriptでロールオーバー - 徒書
考えたこと 画像ごとに無名関数を定義してイベントハンドラとして登録するのは手間がかかりそう。 mouseover/mouseoutのたびにreplaceするのも手間がかかりそう。 イベントハンドラ登録の方法は揃えたい。 _on画像を先読みしておきたい。 で自分でも書いてみた (function() { if (!document.getElementsByTagName) return; var addEvent, switchImage, init; addEvent = function(obj, type, func) { if (obj.addEventListener) { obj.addEventListener(type, func, false); } else if (obj.attachEvent) { obj.attachEvent('on' + type, func
CSS裸日2007 - 徒書
4月5日はCSS Naked Dayですよ、ということでもう前回から一年たったのかーと思い出しつつ今年も徒書限定でスタイルを外してみます。 The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good 'ol play on words. It's time to show off your <body>. 2007年4月5日4時49分 分類: CSS コメント/トラックバック (0)
class属性とid属性に関する議論リンク集 - 徒委記
class属性とid属性に関する議論リンク集 発端 過去の経緯や参考情報 2007年3月18日 2007年3月21日 2007年3月22日 2007年3月23日 2007年3月25日 2007年3月28日 「私はheaderやfooterはidじゃなくてclassだと思うけど、皆さんはどう思います？」 (CSS Nite公式ブログでのレポートより) 発端 CSS Nite Vol.18交流会「HTMLへの回帰」 CSS Nite Vol.18 謝恩会「HTMLへの回帰」の資料公開 過去の経緯や参考情報 CSS Nite Vol.3の企画「木達さんに聞いてみよう」 id属性とclass属性 | Web標準Blog | ミツエーリンクス Tips/WebPage/class と id の違いとは？ - outsider reflex idとclassの違い 2007年3月18日 WEBTECH
実践Web Standards Designを読む(1) - 徒書
先週末のことになりますが、真琴さんが執筆に参加された実践Web Standards Designをようやく購入しました。 ……ので、内容について突っ込んでみようと思います。今回は11ページの内容について。 「id属性とclass属性」という表があるのですが、その中でid属性の「値に使用できる文字」について、 NAMEトークン*1であるため、 と書いてあるのが気になりました。少なくともXHTMLではid属性はID型だよな、という記憶があったので。 実際のところ、HTML 4.01 DTDでもid属性はID型(NAME型ではなく)でした。ただし仕様書の中のid属性の説明を見ると、 id = name [CS] This attribute assigns a name to an element. This name must be unique in a document. と、NAME型で
XHTMLでは大文字のid属性でも大丈夫 - 徒書
よはくのところ。のXHTML でない理由（Strict ののろい）にて、XHTMLに移行しない理由として(HTMLにおけるid属性問題について、今更ながらを参照しつつ)「id属性を大文字にしている」ことを理由に挙げられていたのですが、結論から言えばXHTMLでid属性を大文字で書くのは全然問題ないです。 根拠を仕様から求めるのは少々ややこしいですが…… XHTML仕様においては、id属性の型は、(XML仕様で言うところの)ID型と定義されている。 参照先をXML仕様に移して、ID型の定義は以下のように定められています。 生成規則Nameに従う IDの値は要素を一意に特定しなければならない。 さらに生成規則Nameの定義は…… という風にに定義を次々と辿っていくと、BaseCharの定義の辺りで途方に暮れそうになってしまいますが、要は生成規則Nameには大文字([#x0041-#x005A]
CSSでよく使う装飾定義をclass名でまとめることについて - 徒書
2xup.orgのCSS でよく使う装飾定義をコンポーネントとしてまとめるという記事を読んだのですが、挙げられているHTMLの例を見てみて、「いやいやその方向性は無しでしょう」と思ったのでした。何故かといえば、 リストをインラインで表示するために <ul class="inline"> ナビゲーションリストをタブのように表示するために <ul class="tab"> という書き方をしていたので。それはつまり「文字を赤くしたいので <span class="red">文字</span>」というのと同じなのでは。 ADP: class=red スタイルシートの基本 -- ごく簡単なHTMLの説明 (「クラス名の考え方」参照) 記事では、 見た目を意識しすぎてしまっているのが気になるので class の名前を変更したり、 とも書かれているのですが、単にclass名を変更するだけでは状況は大差な
引用マークアップを生成 - 徒書
他のウェブページから文を引用するときは、元文書のHTMLマークアップもなるべくそのままで引用しておきたいものです(と、いう前提で取り敢えずお願いします)。しかしいちいち引用元ページのソースを開いてコピー&ペーストし、更にリンクやらblockquoteやらを書いていくのは面倒なので、そのへんをまとめてやってくれるbookmarkletを作ってみました。 選択箇所をblockquote (javascript: scheme URI) スクリプトのソース (text/plain) FirefoxなどのMozilla系ブラウザ用です。
IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書
問題 以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample) * { font-size:100%; font-style:normal; } p { color: #666; font-size:2em; font-style:italic; } p:first-letter { color:#c00; } <p>THIS IS A TEST.</p> 結果 Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。 Firefox Opera IE6 IE7 考察 注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p要素に対しては font-style:italic; が適用されているため、この結果は全称セレクタ(*)に対するスタイル規
ルビ表示はユーザスタイルシートで! - 徒書
なんだか最近になってMozillaでルビ表示3の記事(個別ページ)がブックマークされているなと思っていたのですが、404 Blog Not Found:css - ルビもCSSでで紹介されていたからのようでした。 それにしてもその紹介記事のブックマーク数が200以上ってすごいな。やはりウェブでは作った人よりも紹介した人の方が注目される、ということなのでしょうか。それはいいとしても、トラックバックで「プログラマーの小飼弾氏のアイデアと技術には……」と書かれているのを見てしまうと釈然としないものを感じてもいいでしょうか。(←誤った疑問文) それはそれとして、404 Blog Not Foundではルビ表示用のスタイル定義をサイト用のCSSに組み込んでいますが、これはあまりよくありません。あのスタイル定義は(2001年当時のMozilla用に作った、)あくまで擬似的な表示を行うスタイルです。製作
Mozillaでルビ表示3 - 徒書
tableのことを考えていて、ふと「CSS2にはdisplay:inline-tableというのがあったな」と思い出した。試してみるとMozillaでも対応しているようだったので、それでルビ表示ができないかとやってみる。 ruby { display:inline-table; text-align:center; white-space:nowrap; text-indent:0; margin:0; vertical-align:-20%; } /* ルビベース */ ruby>rb,ruby>rbc { display:table-row-group; line-height:90%; } /* 前側ルビテキスト */ ruby>rt,ruby>rbc+rtc { display:table-header-group; font-size:60%; line-height:40%;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
