[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
最新Webブラウザ、Web標準への対応度は？ | OSDN Magazine
2008年になり、主要なWebブラウザのバージョンアップが相次いで行われている。これらのバージョンアップでは、Webブラウザ自体の機能強化が行われているほか、レンダリングエンジンについても積極的に改良が行われ、新たな機能が取り込まれている。そこで本記事では、最新Webブラウザが搭載しているレンダリングエンジンについて、それぞれが備えている機能やWeb標準規格への対応状況について比較していく。 2008年8月末、Internet Explorer（IE）8のベータ2がリリースされた。IE8ではパフォーマンスの向上や、多数の新機能が追加されており、正式版リリースへの期待も高まっているのではないだろうか。しかし、大規模な改良が加えられているWebブラウザはIEだけではない。今年6月にはFirefoxの新版であるFirefox 3がリリースされているほか、同じく6月に公開されたOpera 9.5や
これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference | ネット | マイコミジャーナル
SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
Tumblr Big PhotosをuserContent.cssで (V3用に追記あり)
Tumblrのダッシュボードでサムネイル化されている写真を大きく表示してくれるTumblr Big Photosの効果をユーザスタイルシートで実現してみた．ムリヤリHTMLを書き換える感じの動作がなくなるので，こっちの方がいいかもしれないね． プロファイルディレクトリ内のuserContent.cssに以下の記述を追加する．この手の設定ファイルを触るときにはMR Tech Local Installがあると便利！一生懸命ディレクトリを掘り下げていかなくても，メニューから開けるようになるので，プロファイルディレクトリを開くのに苦労している人は試してみてください． /* * Tumblr Big Photos * */ @-moz-document url-prefix(http://www.tumblr.com/dashboard) { ol#posts li.dim div.post_co
tumblr.、はじめました。 - Trans
もっと前にアカウント自体は持っていたみたいなんですが（本人も忘れてた）、今週あたりからちゃんと動かすようにしました。 http://aratakojima.tumblr.com/ 何に使えそうなのか四苦八苦しましたが、結局今自分が勉強中のユーザビリティやアクセシビリティ、HCDなどのUI関連の記事を読んでいて、「お、この言葉、待ってました！」とか、「こういうことなんだなー」と感銘した言葉などのスクラップブック的に使おうかと目論んでいます。（すぐに変わるかもしれませんが） お気軽にaddお願いします。 ちなみに、twitterで、 @hkn tumblr なら、 XHTML はほぼ全部カスタマイズできますよ。 CSS が外部ファイル化されていないですけど。 *Tw* とかって言っちゃったので、CSSをいじってみました。font-sizeがほとんどpx指定でかなりイライラし、動画とかはまだ貼っ
style.cssText の使い処に関する考察 - IT戦記
cssText って知ってますか？ cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう？(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body
論理構造を文脈に読み換えながら class 名を考える - 我的春秋
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. posh - Microformatsより 基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。） 例によって
style 要素を動的に生成する - m2
普通に考えればこんな感じ。 var style=document.createElement('style'); style.setAttribute('type', 'text\/css'); style.innerHTML='…'; document.getElementsByTagName('head')[0].appendChild(style); が、IE6 では style 要素の innerHTML プロパティは readOnly のようで、3行目でエラーになります。 「エラー：未知の実行時エラーです。」という、よくわからないエラーメッセージです。 これを以下のようにして回避することができました。 var wrap=document.createElement('div'); // 最初に style でないノードが無いと style が生成されない wrap.innerHT
YUI Fonts CSSのline-height: 1.22em;の謎を解く！ - Trans
先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマークアップしてテストしてみました。どうやら、id:b-windさんがおっしゃるように、この「*」全称セレクタがキーになるようです。 まず、おさらい。 そもそも、なぜこのline-heightに疑問を感じたのかは、このエントリー。Lucky bag::blog: line-height の値には単位なしが良いとされる理由。はてブの数からしても読んだ人多いんじゃないでしょうか。まず、このコードについて、こちらでもテスト用に作ってみました。Lucky bagさんとほとんど同じコードです。 YUI Fonts CSSのline-hight: 1.22em;は何なのか？その1。 li
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
LivedoorReaderのスポンサーフィードを非表示にするGreasemonkeyスクリプト - 技術メモ帳
goodbye sponser // ==UserScript== // @name LDR - hide sponser feed // @namespace http:// // @description LDR no sponser feed wo hide simasu // @include http://reader.livedoor.com/reader/* // ==/UserScript== unsafeWindow.tracking = function(){}; var callbacks = unsafeWindow.LDR.trigger.triggers.before_init.callbacks; for(var i=0; i<callbacks.length; i++){ if( callbacks[i].toString().match( /functio
チープカ - はてなダイアリーのデザインを作るうえでのtips
CSS | 01:06 | はてなダイアリーのデザインをいじる上ではてなダイアリー独自に気をつけなくてはいけないものについて例をあげてみます。DOCTYPE宣言が互換モードまず一番問題になるのがここでしょうか。気をつけなくてはいけないのはなんといっても「IEで見るとwidthにpaddingがふくまれる」という点です。これはIE7になっても変わりません。そのためwidthとpaddingを同居させた要素を記述した場合にIEと他のモダンブラウザでは表示が変わってしまいます。回避策で一番簡単なのは同じ要素にwidthとpaddingを同居させないということです。ただしはてなダイアリーの構造上h1とかでwidthとpaddingを一緒に使わざるを得なくなったりするのでそん時はハックするしかないです。はてなのヘッダを透明にするはてなのヘッダは配色がしやすいように、画像部が透過されるようになりました
CSS TIPS » floatした際の背景表示
親ボックスに背景を設定して、内包する子ボックスに対してfloatを適応した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適応した場合、以下のような表示になります。 サンプル これはIEがfloatの処理が
そろそろCSSハックの良し悪しについて考えてみる（書式編） | Blog hamashun.com
関連リンク そろそろCSSハックの良し悪しについて考えてみる（書式編） そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ
ユーザスタイルシートによるカスタマイズ(2) - Stylish - えむもじら
この記事は、Software Design 2007年1月号に掲載された拙著「Firefox 2 カスタマイズガイド」の一部を加筆修正したものです。 ユーザスタイルシートを用いてウェブページや Firefox 本体の見栄えを変更することができます。 もくじ ユーザスタイルシートを管理する Stylish ユーザスタイルを管理 ユーザスタイルを作成 ユーザスタイルをインストールする その他の情報 about:config と user.js による Firefox のカスタマイズ（別ページ） ユーザスタイルシートによるカスタマイズ(1)（別ページ） Stylishでユーザスタイルを管理 Stylish という拡張機能を用いるとユーザスタイルを簡単に管理できるようになります。 Stylish をインストールすると、このような管理画面から、ユーザスタイルに名前をつけて個別にオン／オフの切り替え、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座
最初に指定しておくと便利なCSS | Tech de Go
認証がかかっています
新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::
