我的春秋: パンくずリストのマークアップ
ちょっと前に パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種（CSS HappyLife）というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は（も？）(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。（気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。） 階層型構造（tree structure） ［2006-02-11 追記］ 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが
2008-06-18
恥極まる話ですが、今までもっぱらHTMLのレイアウトはtableタグを使ってました。 ごめんなさい＞＜ 反省というか自戒の為、記録。 tmp1.htmlが今まで通りtableタグでレイアウトを構成したもの。 tmp2.htmlがtableタグを使わないようにしたもの。でも、多分もう少しうまくやればリテラルが減らせるんじゃないかな、と思ってます。 tmp1.html・・・tableタグを使ったもの <html> <head> <style> * { margin: 0px; padding: 0px; } table.buttonlayout { margin: 50px; } table.buttonlayout th { color: white; background-color: blue; border: 1px solid blue; } table.buttonlayout t
HTML5草案が更新されました
W3C HTML5草案が、2008年1月22日版以来、久しぶりに6月10日版として公開されました。また同時に、「HTML 5 differences from HTML 4」と「HTML 5 Publication Notes」も内容が更新され6月10日版として公開されました。 HTML5草案の更新内容については、diff-marked versionが参考になります。表現、用語など細かい修正に加え、新たな項目が追加されているのが目立ちます。 HTML要素では、ruby、rt、rpなどのルビ関連の要素が追加されています。 Canvasでは、「Canvasにテキストを描画するText APIが追加される」で紹介したように、whatwgのドラフトで追加されたテキストを扱う機能が、W3C HTML5草案にも反映されたようです。 This entry was posted on Wednesday
div class="section" とXHTML 2.0 - 徒書
ADP: 角を丸くしたいネタ (1)に対しての哀さんのコメントより。 .section は hn と「常に」セットで用いることによる、来る XHTML 2.0 の section h 構造への移行準備を目的としている場合が普通ですので、 や、div class="section" を使う人皆が皆XHTML 2.0への移行を準備しているってことは、幾らなんでも無いだろうと思うのですが（自分も div class="section" は使いますが、XHTML 2.0に移行することは今のところ考えてないです）。 div class="section" を、XHTML 2.0のsection要素のように用いるという流儀は、「そうする人もいる」「そうすることで、文書をうまく階層構造化できる」という程度のものであり、「それが普通」というものでも、またそのようにしなければならないという規範的なものでもな
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にクエリ文
めも - IT戦記
このメモについて id:amachang の私的な学習目的 IE6 の標準モードに関するバグ いろいろとポイント layout IE6 の視覚整形モデルの中で要素は、大きく分けて layout を持つ要素と、 layout を持たない要素に分けることができる。 layout を持つ要素とは、自分のサイズや位置に責任を持つ要素である。 layout を持つ要素は、四角形の領域を作る。 layout を持たない要素は、直近の layout を持つ要素のサイズおよび位置と、そこの間にあるすべての要素の margin, padding, border によってその開始点、折り返し点が決まる。 layout を持たない要素は、四角形の領域を作らない。上下左右の間隔を保持しているだけに過ぎない。 layout を持たない要素間の上下マージン（相殺されるマージン）は二つの要素間の共有のもので、ある要素特
Hタグ（見出しタグ）はどのくらいSEOに重要なのか
Off-page Optimization（内的SEO）の定番は、Titleタグです。 Titleタグに、キーワードを入れるのは誰しもがやっていることでしょう。 SEOにTitleタグが重要なのは、特に異論はないでしょう。 次に大切なのは、見出しタグのH1,H2,H3・・・、でしょうか。 では、HタグもSEOに重要なのでしょうか？ どうやらHタグは、altタグのようにランキングを上げるための要素としては、すでに役に立たなくなっているようです。 High Rankings ForumでHタグの重要度についてのスレッドが立ち上がっています。 モデレータのchrishirst氏のレスです。 I can definitely confirm that it is …. … somewhere between none and some. “確実に断言できる・・・、（Hタグの効果は）ゼロか幾ばくかの
rel="Bookmark" のなぞ / おのひろきおんらいん
HTML+ では REL=BOOKMARK ってのがあったみたい．その時の定義は今の HTML 4.0.1 や XHTML とはちょっと違っていたように見えます．最終的には破棄された規格 HTML 3.0 の検討では HTML 4.01 とほぼ同じ定義がされていました．それは HTML 3.2 の Proposed Recommendation 05-Nov-1996 にもありましたが，HTML 3.2 の勧告では REL=Bookmark が無くなっているみたい．ぼくが HTML の仕様を気にするようになったのは HTML 4.0 以降ですから HTML 3.2 とか HTML+ なんてのは良く知りません．でも HTML 4.0 以降は rel="Bookmark" については，本当に簡単にしか書いてないので良くわからないのですよ．だから古い規格についての文書を見てみたのです． HTML
各種 HTML DTD の利用率を調べてみた - [ぴ](2008-04-14)
_ [Web制作] 各種 HTML DTD の利用率を調べてみた 最近のページはほぼ XHTML1.0で制作されています。 (中略) 何故こんなにXHTMLが普及しているのでしょうか。 [HTML4.01でページを制作する場合と、XHTML1.0でページを制作する場合ですが、何か大きな違いはありますか。 - 人力検索はてなより引用] XHTML はそんなに普及しているとは思えないのだが…、ということで、統計を取ってみた。 一昨年使った target="_blank" 使用率統計スクリプトを流用し、旧 Yahoo! トップページ掲載60キーワードで Google 検索した結果を元に様々なページの DTD が何であるかを抽出したところ… DTD件数比率
](https://cdn-ak-scissors.b.st-hatena.com/image/square/d228e8be070c32c738781e15c25aeb18f4dc6807/height=288;version=1;width=512/https%3A%2F%2Fpmakino.jp%2Ftdiary%2Ftheme%2Fogimage.png)
見出しの順序について
見出しはHTML文書の構造を示すための重要な要素ですから、内容のアウトラインを適切に反映するよう、正しい順序で使うべきです。W3CのHTML仕様書では、この点は注として触れられているのみですが、正規の規定として文書化する、特殊な要素型を導入して機械的なチェックを可能にするという試みもあります。 HTMLの見出し要素 規定要件による見出し順序の制約 DTDによる見出し順序の制約 XHTML 2.0での文書構造と見出し 参照文献 HTMLの見出し要素 HTMLは階層的に文書構造を表すようには設計されていないため、見出しをh1要素から順番に使って、そのレベルによって文書がどんなアウトラインで成り立っているのかを示すことが重要です。見出しレベルの適切な使い方は、見出し要素を抽出して階層型の目次を作成することを考えると分かりやすいでしょう。 W3CのHTML4仕様書[HTML4]では、控えめながら次
いまさら聞けないHTML --- Part2：レイアウトと見栄えを固定
今どきのWebページは，ウインドウの大きさを変えてもレイアウトが変わらない。見栄えもWebサイト全体で統一されている。このようなレイアウトや見栄えの指定にも，HTMLのタグが使われている。 3ステップでページ作成 Webページ制作者から見ると，Webページの作り方は3ステップ。この作り方の手順に沿って見ていこう（図2-1[拡大表示]）。 ステップ1ではレイアウトを決める。使い勝手や見栄えを考えてレイアウトを決めて，Webページに貼り付ける要素を考えながら枠を区切るわけだ。具体的には，枠を固定して区切ることができるタグを使ってHTMLファイルを作成する。 ステップ2は，スタイルの定義だ。デザインを考えれば，ページ内の文字の大きさなどは揃えたい。しかし，今どきのWebページは，もともとは別のファイルを組み合わせて作ることが多い。部分ごとに，更新頻度が違っていたり，作成者が違ったりするからだ。こ
定義リスト（dl、dt、dd）を使用してコーディングするときのための備忘録。／ライブラリー : アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション
アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション：ライブラリー 2007年10月 9日 定義リストの使い方。 最近コーディングするときに良く使う dl＝Definition List（定義リスト）。 内側に入る要素は dt（Definition Term） dd（Definition Description） のふたつ。 一般的には用語とその説明文…とか、日付と内容…みたいなときに使うらしい。 んが。 でも…いまいち用途があいまいだったり。（汗） （いまさらですんません。ｗ） ってことで、教えてもらったことや調べたことの備忘録でっす！ 定義リストのいくつかのサンプル。 通常、dtとddって一対一↓になってることが多いけど、そうじゃないといけないんすかね？ （サンプルのソースとかはけっこうそういう感じだよね。） <dl>
hxxk.jp - Re: 小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）
記事データ 投稿者 望月真琴 投稿日時 2006-05-03T07:00+09:00 タグ Another HTML-lint DTD HTML Movable Type SGML XHTML XML アクセシビリティ テンプレート 仕様 概要 HTML マークアップの手ほどきを行っているサイト自体のマークアップがあまり良くないので指摘してみる記事。 リプライ 3 件のリプライがあります。 Another HTML-lint gateway だけに頼るのは危険 小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）を読んで、間違いがあったり不十分な記述があったりするなあと思いました。 全体としては頷ける内容なのですけれども。 テンプレートをカスタマイズされるユーザの方から「表示がくずれるのですが」という質問を頂くことがあります。その方々のページを Another
cite要素はblockquote要素とは関係ない - 徒書
cite要素に関して、柊アマテルさんの見解を拝見したのですが、何となく違和感がありました。 cite要素を使ふ上でも要素間の機械的な関係は全く考へない方が賢明です。 という結論については同意なのですが、でもそれはもとからそういうものだったのでは、と思うのです。HTMLの仕様から見ても、cite要素はその前後のblockquote要素やq要素と関連付けて何らかの処理を期待するようにはなっていないようですし。 cite要素は――ありていに言えば――もともと英文の活字文書等で、引用を行う際に引用元の表題の部分を斜字体にする習慣があり、それをHTMLで表現(スタイルとしてではなく、より抽象的な構造として)するためにあるものだと思ってます。 定義語を示すdfn要素も似たような事情で、活字文書で言葉の定義が述べられるときには、その言葉が斜字体なり太字なりで強調されることがあったので、それをHTMLで表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvasリファレンス - HTML5.JP
Page Not Found!
∀ε>0,∃N∈N s.t.[n≥N⇒|blog_n-0|<ε]: 検索結果
個別「変なとこで改行を入れるとこうなる(http://blog.tanechan.jp/2007/05/21/021021.php)」の写真、画像 - tal's fotolife
http://www.be-emotion.com/seo/2007/04/discription.html
<link rev="made" href="mailto:hoge@hoge.co.jp"> - カナかな団の躁鬱