Home » html

Sponsored links

html

省略や略語を表す時に使うタグでSEO

IE6からでは見えないけど、Firefoxやモダンブラウザでは見える文字ってご存知ですか?

<abbr title="xxx">○○○</abbr>

こんなタグで表示できるんですが、Firefoxでもマウスが重なったときにだけツールチップで現れます。
知ってる人が読んでも、何だ(´・ω・`)で終わるけど, 知らない人からしたら、ちょっとした物知りになった気分に成れませんか?

省略や略語を表す時に使うタグでSEOの続きを読む

Sponsored links

テーブルをスタイルシート(CSS)でデザインしよう

テーブルのデザインの前にここでもSEOを

ブログの出現で既存のサイトも脱テーブルデザインとかがルールのように認識され始めて数年たちますが何が何でも脱テーブルがよいという訳ではありません。
レイアウト(見た目)を整える部分はCSSで、「表形式」を表現するためにはテーブルは有効です。
ここではブログのエントリー内での活用法を書いてみたいと思います。

簡単なtableダグを使ったサンプル

それでは簡単に3列×7行のテーブルを書いてみます。

テーブルデザインのサンプル

通勤手段
手段 時間 料金
平均 約83分45秒 ¥400
トータル 約335分 ¥1600
電車 約60分 ¥550
バス 約90分 ¥750
約75分 約¥300
自転車 約110分 ¥0

表題の文字サイズとセル内見出しの背景色とテーブルの外枠をCSSでコントロールしています。

表題とセル内見出しを定義(caption,th)
その他、table内の料金数値は右寄せを指定しています
続きでテーブルをデザイン化します。

テーブルをスタイルシート(CSS)でデザインしようの続きを読む

テーブルタグのボーダーラインを細く/HTML小技編

テーブルタグは表を作るためのタグでレイアウトのために使うのは本来の使い方として好ましくありません。しかし、ブログのエントリー内の一部に使うくらいならば充分許容範囲内です。そこでちょっと見せるためのテーブルタグの使い方です。

     
     
     

これは通常の3×3の表組みです。境界線の幅の指定を1に指定し色を#666666のグレーにしてみました。通常はこれ以上境界線を細めることは出来ません。境界線をもっと細くし表組みの見栄えを変えたい場合の小技を紹介します。

CSSを使ったtableのborderを細く見せる方法は、テーブルをスタイルシート(CSS)でデザインしよう:アフィリエイトの集いで書いています。

テーブルタグのボーダーラインを細く/HTML小技編の続きを読む

livedoor Readerに登録
RSS
livedoor Blog(ブログ)

ページの先頭へ戻る