タグ

CSSに関するmessiquoのブックマーク (5)

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

  • colgroup / col 要素を活用してみる | WWW WATCH

    table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 (縦方向) のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で

    colgroup / col 要素を活用してみる | WWW WATCH
  • C#で綴る私の軌跡 FireFox と <colgroup> と style

    表を表示する際、列毎に異なった列幅やフォントサイズ、色を設定したいことがしばしばあります。 これは、<td> へ class や style を適用する事によって実現可能ですが、もっと明示的且つ簡単に記述できる事が望ましいです。 実はこれにうってつけの HTML タグがあります。 <colgroup> と <col> です。 このタグの class や style 属性を利用することで、列単位でのスタイルの適用が簡略化されます。 しかし、実は問題がありまして・・・ どうも IE 以外のブラウザでは text-align が反映されないようなのです。 col/colgroup要素へのスタイル指定 この動作は仕様通りで、寧ろ IE の解釈が間違っているそうで。 text-align が列毎に異なる事なんてしょっちゅうあるのに・・・ このまま泣き寝入りして、いちいち <td> へスタイルを設定す

    messiquo
    messiquo 2008/04/11
  • [CSS]横並びのレイアウトをfloatで配置するTIPS -Floater

    CSS Globeでは、下記の画像のような横並びのレイアウトを単純にfloatでレイアウトするのではなく、一工夫してレイアウトを行っています。 Css Globe - Floater Floaterで紹介されているテクニックは、左のエレメントにはheightを指定し、右のエレメントにはfloat:rightとheight分のマイナスマージンを指定します。 CSSオフ時は、右の画像のように綺麗にマークアップされた状態で表示されます。 マイナスマージンの使用は好きではないのですが、これからはマイナスマージンや背景画像の使用を、忘れないように検討しようと思いました。

    messiquo
    messiquo 2007/09/20
    マイナスマージンって、IEとかでも綺麗にきくんだっけか? 昔、その辺が怖くて使わなかった気がする。
  • CSSで「折り返す」pre

    ■ tDiary: この期に及んでspamフィルタを導入していない人は どういう人なのかな。 ツッコミ通知メールを使っていない(ので気づいてない) 自分の日記はRSSリーダに登録してない(ので気づいてない) 単なる面倒くさがり屋さん 未対策の日記は(RSS経由では)読むに耐えないので、どんどん購読先から消えてもらっているのだが。もったいない。せめてここのフィルタくらいは入れてくれないだろうか。簡単だからさ。 追記 書き漏らした「理由」: spamをまだ受けていない(でも予防措置はしておいた方がいいよね) そもそも日記を放置しっぱなしで更新していない(ので気づいてない) ■ CSS: 「折り返す」pre 人が作ったtDiaryのテーマをつらつらと見ていたら、見慣れぬ属性が書いてあった。こんなの。 white-space: -moz-pre-wrap; /* Mozilla */ white-

    messiquo
    messiquo 2006/11/15
    まだ試してない。しかし、こんなものがあったとは…。
  • 1