省略や略語を表す時に使うタグでSEO
IE6からでは見えないけど、Firefoxやモダンブラウザでは見える文字ってご存知ですか?
<abbr title="xxx">○○○</abbr>
こんなタグで表示できるんですが、Firefoxでもマウスが重なったときにだけツールチップで現れます。
知ってる人が読んでも、
Sponsored links
Sponsored links
IE6からでは見えないけど、Firefoxやモダンブラウザでは見える文字ってご存知ですか?
<abbr title="xxx">○○○</abbr>
こんなタグで表示できるんですが、Firefoxでもマウスが重なったときにだけツールチップで現れます。
知ってる人が読んでも、
Sponsored links
ブログの出現で既存のサイトも脱テーブルデザインとかがルールのように認識され始めて数年たちますが何が何でも脱テーブルがよいという訳ではありません。
レイアウト(見た目)を整える部分はCSSで、「表形式」を表現するためにはテーブルは有効です。
ここではブログのエントリー内での活用法を書いてみたいと思います。
それでは簡単に3列×7行のテーブルを書いてみます。
テーブルデザインのサンプル
手段 | 時間 | 料金 |
---|---|---|
平均 | 約83分45秒 | ¥400 |
トータル | 約335分 | ¥1600 |
電車 | 約60分 | ¥550 |
バス | 約90分 | ¥750 |
車 | 約75分 | 約¥300 |
自転車 | 約110分 | ¥0 |
表題の文字サイズとセル内見出しの背景色とテーブルの外枠をCSSでコントロールしています。
表題とセル内見出しを定義(caption,th)
その他、table内の料金数値は右寄せを指定しています
続きでテーブルをデザイン化します。
テーブルタグは表を作るためのタグでレイアウトのために使うのは本来の使い方として好ましくありません。しかし、ブログのエントリー内の一部に使うくらいならば充分許容範囲内です。そこでちょっと見せるためのテーブルタグの使い方です。
これは通常の3×3の表組みです。境界線の幅の指定を1に指定し色を#666666のグレーにしてみました。通常はこれ以上境界線を細めることは出来ません。境界線をもっと細くし表組みの見栄えを変えたい場合の小技を紹介します。
CSSを使ったtableのborderを細く見せる方法は、テーブルをスタイルシート(CSS)でデザインしよう:アフィリエイトの集いで書いています。
テーブルタグのボーダーラインを細く/HTML小技編の続きを読む