古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
[CSS]幅指定をしないで中央配置するナビゲーションを実装するスタイルシート
各項目の幅指定をしないで、それぞれを中央に配置するドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Anywidth dropdown with centered top and sub levels demo ナビゲーションはリスト要素で、中央配置は「display:table;」と「text-align:center;」で実装されています。 IE用に条件付コメントでテーブル要素を使用しています。 ドロップダウンで表示されるパネルの右側には透明なエリアがあり、パネルのオープンをキープするマウスのエリアをより広く確保しています。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeとのことです。 また、同じくドロップライン型のものも公開されています。
2008-11-10
はてなダイアリーには、他のブログでいうところの「テンプレート」をユーザーが自由に投稿し、共有できる公開デザインという機能があります。 公開デザイン一覧 - はてなダイアリー この機能がリリースされたのが、2006年11月8日。 はてなダイアリーデザイン管理機能リリース - はてなダイアリー日記 それからちょっとずれてしまいましたが、2周年ということを記念して色々と傾向や状況などを分析してみました。 はじめに グラフや表などの元となったデータについては概ね2008年11月9日現在のものとしています、またその内容やデータ自体については末尾の方で詳しく解説していおり、そのデータもダウンロードも行うことができます。 ちなみに、2008年11月10日時点で利用できる公開デザインは835点です。 登録数の推移 2006年11月からの日毎の登録数の推移としては、私のサブアカウントのはてなグラフで記録して
[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を用意し、それぞれをずらして配置します。 下記は、そのイメージです。
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
font-sizeのパーセント表記一覧 - Webtech Walker
font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで
XHTMLとCSSを使ってPDF作成·Prince MOONGIFT
やはりWeb文章とは違い、印刷となると組版が重要になる。横幅の文字数が変わったり、画像が横に並べられると見やすいからだ。印刷レベルの組版をサポートしたPDF作成ソフトウェアは幾つか存在する。だが、どれも手軽とは言いがたかった。 XMLを駆使して記述しなければならなかったり、細かい制約も多かったりする。もっと手軽に文章を作成できないか、そう考える人はこれを使ってみよう。 今回紹介するフリーウェアはPrince、XHTMLとCSSを使ったPDF作成ソフトウェアだ。個人利用に限りフリーなのでご注意いただきたい。 PrinceはXHTMLファイルを読み込み、それにCSSを組み合わせることで印刷品質のPDFを生成するソフトウェアだ。サンプルで見ると、かなりレベルの高い文章が得られることが分かるだろう。 もちろん、記述する上での制約もあるようだが、それでもブラウザベースで十分読める構成になっている。そ
IEでposition:fixedを再現するFixed positioning
IEでposition:fixedを再現するFixed positioning Fixed positioningはIEで固定配置つまり、position:fixedが利用可能になるjsライブラリです。 IEの6以下のバージョンにはposition:fixedが正常に動作しないというバグがありますが、それを解決するのがこのFixed positioningです。 設置方法 head要素内などで、ダウンロードしたfixed.jsを読み込みます。 <script type="text/javascript" src="fixed.js"></script> これだけでposition:fixedが正常に動作するようになります。 サンプル 関連エントリー テーブルをソートできるようにするjsライブラリ-table sorting 画像に鏡面効果を与えるreflection.js 半角ｶﾅを全角カ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
