CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
Firefox 3で対応したCSS新機能 - David Baron文書 | エンタープライズ | マイコミジャーナル
先日リリースされたFirefox 3.0は順調にダウンロード数を伸ばしているようだ。執筆現在で2,600万ダウンロードに達しようとしており、Net Applicationsの報告によれば24日の時点ですでに世界で3%をこえるシェアを獲得している。Firefoxの採用率が高いヨーロッパでは5%をこえている。今後も順次シェアを伸ばし、主要ブラウザとしての位置を獲得することになりそうだ。 Firefox 3.0ではCSS 2.0および2.1がサポートされているほか、現在策定が進められているCSS3の機能も一部対応している。Firefox 3で導入されたCSSの新機能や改善点はCSS improvements in Firefox 3にまとまっているが、David Baron氏がまとめたSome new CSS features in Firefox 3がサンプルも含めてよくまとまっているので紹介
Web 標準的な CSS の値変換方法（px → em など）（訂正あり） - IT戦記
はじめに W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。 まず CSSStyleDeclaration オブジェクトを取得する 例えば、 var decl = element.style; または、 var decl = getComputedStyle(element, ''); http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する var val = decl.getPropertyCSSValue('width') http://www.w3.org/TR/DOM-Level
IE の innerHTML や appendChild で要素が挿入された瞬間を取得する方法 - IT戦記
要素が挿入された瞬間を取得する 今までは出来ないと思っていたのですが、今日いろいろ試していて出来る方法が分かりました。 ですので、ちょっと紹介したいと思います。今のところアイデアなので、実用性は？です。 方法 HTML に以下の style 要素を挿入することで実現することができます。 <style type="text/css"> * { display: expression(function() { if (!this.__mark) { this.__mark = true; alert('inserted node: ' + this.tagName); } return ''; }.apply(this)); } </style> 実際に例を見てみましょう http://amachang.art-code.org/ieexpression/000.html <!DOCTYPE
white-space: pre-wrap - えむもじら
Firefox 3 ナイトリーで white-space: pre-wrap; がサポートされました（Bug 261081）。従来使用されていた -moz-pre-wrap は削除予定です（Bug 418543）。 いままで、pre だと右に大きくはみ出して美しくないケースがあって、仕方なく手動で改行を挿入したりしていましたが、これで選択肢が増えました。 white-space: pre; diff -NrpU12 mozilla-trunk.a487d6788b6e/layout/generic/nsLineLayout.cpp mozilla-trunk/layout/generic/nsLineLayout.cpp --- mozilla-trunk.a487d6788b6e/layout/generic/nsLineLayout.cpp 2008-01-11 13:02:10.00
CSS の構文解析と @-webkit-*** ルールの意味 - IT戦記
はじめに あのDan Kogai 氏にも好評な噂の名著「Jythonプログラミング」がついに発売されるわけですが、皆様いかがお過ごしでしょうか。今日は Jython にちなんで、 CSS の構文解析のお話をしたいと思います。（関係ない） 知ってますか？ Safari（などの WebKit を使ったブラウザ）にある以下のルールを @-webkit-rule @-webkit-value @-webkit-decls @-webkit-mediaquery これらのルールの使い方を知っていますか？ 僕は、今日まで使い方が分からなくて困っていたのです＞＜ 話は変わって 最近、僕の中では CSS （の実装）ブームです。 前回のパーサブームでは JavaScript で XPath を作ったわけですが、そのときはパーサを手で書いていました。 じゃあ、今回は yacc でも使ってみるかと鼻息荒めで挑ん
IE8登場以後はCSS tablesを使ってカラムデザインをシンプルに | エンタープライズ | マイコミジャーナル
Kevin Yank氏によって執筆されたCSS tablesに関する記事が2月28日(米国時間)、SitePointに「Table-Based Layout Is The Next Big Thing」として公開された。IE8がリリースされた以降のWebデザインのテクニックを検討するうえで興味深い内容だ。 現状では複数カラムデザインを持ったのWebページを制作する場合、古典的にはHTMLのtable要素とCSSによるサイズ指定を組み合わせたり、CSSを使う場合でもトリッキーな指定を行わなければならない。最新のCSSの機能を使うとIE6/7などで表示されない問題があるからだ。 こうした状況はIE8の登場からかわることになりそうだ。すでに主要なWebブラウザには導入されているCSS tablesの機能がIE8に導入されるためだ。このため、IE8の普及にあわせて従来の複雑な記述を、CSS tab
404 Blog Not Found:CSS - 縦方向にセンタリングする
2008年03月01日14:15 カテゴリTips CSS - 縦方向にセンタリングする 以下で紹介されていた、縦方向にセンタリング表示するためのCSSです。 Vdot Media - Vertically center content with CSS 縦方向にセンタリングするという需要は私には結構あります。たとえばスライドを作る時とか。 結論だけいきなりまとめてしまうと、以下のようになります。 http://www.dan.co.jp/~dankogai/blog/vcenter.html ここではあえてpaddingをつけてそれぞれのdivタグの位置関係を明示するようにしました。 これで、セルが一つだけ入ったtableを使う必要がなくなりました。 が、はっきりいってめんどいなあ。divタグを三重に使うというのがねえ。原理も、CSSでtableを再現しているに過ぎないし。IE用のテクニ
display: table-cell を使ったマルチカラムレイアウト - IT戦記
Acid2 Test で IE8 が display: table-cell をきちんとレンダリングするということが分かったので。 IE8 が普及する（笑）のを 5 年くらい先取りして display: table-cell によるマルチカラムレイアウトを書いてみました。 リンクは以下です。 http://amachang.art-code.org/tablecell/ 今のところ Opera 9+、Safari 2+、 Firefox 2+ で正常にレンダリングされることを確認しました。 ポイント ソースを見て分かるように HTML も CSS もめちゃめちゃシンプルです。 ポイントは display: table-cell の要素が兄弟要素の高さに併せて間延びするところでしょう。 これで、何カラムだろうとお手のものです。
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
404 Blog Not Found:javascript CSS - google-code-prettifyの導入
2007年03月26日16:00 カテゴリAnnouncementLightweight Languages javascript+CSS - google-code-prettifyの導入 google-code-prettifyを本blogでも導入しました。 google-code-prettify - Google Code ex: 404 Blog Not Found:CGIの神話と現実 404 Blog Not Found:たらいを回すならHaskell cf: 404 Hatena::Diary not Found - [Hatena::Diary] スーパーpre記法のテスト ここでは、Livedoor Blogでの具体的な導入法を解説します。 必要なファイルの入手とインストール 以下のファイルを入手して、アクセスできるようにしておきます。 http://google-cod
【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを
google-code-prettifyとは? 統合開発環境や高機能エディタでは、編集するソースコードやテキストファイルの種類に応じてテキストがハイライト表示されることが多い。ハイライト表示はきれいで見やすくなるし、コーディング上の問題を発見しやすくなるという実用上の利点もある。 となるとWebで掲載するソースコードも、ぜひともハイライト表示させたいところだ。Web掲載するソースコードやテキストのハイライト表示化の方法はいくつもあるが、ここではGoogleで公開されている「google-code-prettify」を紹介したい。 google-code-prettifyはApache License Version 2.0のもとで公開されているシンタックスハイライトモジュール。JavaScriptモジュールとCSSファイルの2つから構成されたシンプルな成果物で、HTML文書内に直接記述され
透明なプレートのCSS・JavaScript（ジャバスクリプト）ドックメニュー
上からにょきっと出てくるドックメニューですね。 完全に隠れたら、そこにあるということがわからないので、多少の変更は必要かもしれませんが、なかなか素敵な感じでお勧めの一品。 注意事項 Please note that the images for the menu are .pngs with transparency. If you are using Internet Explorer 6 or below, you will not see the transparency. You can change the images out to gifs, jpegs or whatever suits your fancy ;-) 相手先でも注意されているように、PNG画像に透明を使用しているため、IE6含む、それ以下のものでは透明になりません。 その場合は、gifによる透明を使うか、J
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-440.html
Blogger
IDEA * IDEA
よく使われているCSSハック12選（＋おまけ） | IDEA*IDEA
知っておくといいかもしれないCSS、8つの小技 | IDEA*IDEA
あなたのマークアップのどこがどう正しくないかを具体的に指摘してくれる『xhtml-css』 | 100SHIKI.COM
http://mynotes.jp/blog/2007/11/at-charset-rule