通常、table要素の属性「width」が定められてない場合、列の幅は内容に応じて決定され表示されますが、表の内容がすべて読み込まれてから列の幅が決められるので、表全体が表示されるのに時間がかかってしまいます。 table-layout: fixed;を指定すると、表の1行目が読み込まれた時点で列幅が決定されるので、表のレンダリング速度を向上させることができます。 CSS記述 table { width: 450px; border: 1px solid #999999; border-collapse: collapse; table-layout: fixed; font-size: 0.8em; line-height: 1.3; } th.property { width: 80px; } th,td { background: #FFEEEE; border: 1px s
2009.04.01更新 table-layout � SitePoint CSS Reference このエントリ更新前に再読 "table-layout:fixed"使うと速くなる このプロパティはIE5発祥 はじめに テーブルレイアウトは遅い tableタグ内の要素全体が読み込まれるまでレンダリングは開始しない。だからレンダリングが遅い。 といわれる件について。自分で調べたメモ。 ここで書くことに関係のある要素 html table要素 css displayプロパティの値に「table」「inline-table」のいずれかが指定されたセレクタ 関係のあるcssのdisplayプロパティのブラウザ実装状況全般については前のエントリで書いたが、情報が古い。 IE7、Fx2以下では「inline-table」の値はサポートされてなかった IE8では「table」「inline-tabl
October 21, 2009 当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。 なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。 Windows IE6 Windows IE7 Windows IE8 Windows Firefox2 Windows Firefox3 Windows Firefox3.5 Windows Google Chrome3 Windows Opera9.6 Windows Safari4 Macintosh Safari4 Macintosh Firefox2 Macintosh Firefox3 Macintosh Firefox3.5 結果
summary属性 表の目的と構造に関する要約を記入します。例えば、下記のようなtableだと「製品の価格表」などのtableの簡単な説明だけでなく、「製品の価格表。1行目は各行の見出しになる。1列目が商品名、2列目が価格、3列目が順位を示す。」という感じで表の詳しい構造まで説明するのが吉です。 <table summary="製品の価格表。1行目は各行の見出しになる。1列目が商品名、2列目が価格、3列目が順位を示す。"> scope属性 主にthに指定する属性で、そのセルがどちらの方向に対する見出しであるかを明示することができます。横方向（行）に対する見出しの場合は「scope="row"」を指定します。縦方向（列）に対する見出しの場合は「scope="col"」を指定します <tr> <th scope="col">製品名</th> <th scope="col">値段</th> <t
大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者（聴取者）に伝える機能を持っています（WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました）。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足：テーブルsummary属性の読み上げ 音声ブラウザとth要素 表（テーブル）は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ
table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 （縦方向） のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で
ブラウザのタイトルバーや、検索サイトの結果画面などに表示されるtitle要素内の表記規則のパターンをCSS Tricksから紹介します。 What's The Best Way To Handle Page Titles? title要素内の表記規則：第一階層の場合 [サイトの名前] 例：コリス [サイトの名前] - 短いタグライン 例：コリス - Web制作に関する最新情報をお届け [サイトの名前] - キーワード 例：コリス - ウェブデザイン、HTML、CSS、JavaScript title要素内の表記規則：第二階層の場合 [サイトの名前] - [記事のタイトル] 例：コリス - jQueryのプラグイン33+1選 [記事のタイトル] - [サイトの名前] 例：jQueryのプラグイン33+1選 - コリス [記事のタイトル] 例：jQueryのプラグイン33+1選 [サイトの名前
この文書は「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
よく知られているように現在のウェブ検索のメインストリームをしめるロボット型検索は、回収したページのHTMLタグを解釈して意味を与え、重要度を判定し、検索結果に反映させます。 例えばタイトルに使われるH1などのタグはより重要な文字列と見なしますし、リンクタグに「rel=nofollow」が入っていればページランクなどの計算でポイント付与評価を無視するようになります。 しかしそれ以外にも数々のSEO業者が調べたり実験してきた結果、より有効に解釈されると判断されるがあまり知られていない5種類のタグが存在します。 以下がその5つのタグです。 SEOmoz Blog | 5 HTML elements you probably never use (but perhaps should) 1.addressタグ 住所、電話番号などの連絡先を示すためのものです。電子メールアドレスやメッセンジャーの情報
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く