選択可能なアンチエイリアス文字を出力する『sIFR 2.0』導入メモ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 sIFR（Scalable Inman Flash Replacement）は、HTML上の任意のテキストをJavascriptでFlashムービーに置き換え、アンチエイリアスが掛かった選択可能なテキストとして表示する手法。Shaun Inman氏が世に広めた技術で、海外では割と普通に使われています。 見た目はCSSによる画像置換と同じだけど、通常のテキストと同じように選択やコピペも可能。Javascriptを切った環境では通常のテキストが表示され、HTML上のテキストを修正するだけで変更が反映されます。 ただし日本語では使えない。正確には、使えるけど重すぎて実用に耐
tech.nitoyon.com@hatena - はてブのCSSをカスタマイズしてみた
hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
Lucky bag::blog: IE で min-width を指定する方法
IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。 実際に試してみたサンプル IE5.5 と IE
一行あたりの文字数を制限するリキッドレイアウト - 2xup.org
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
IE7対応DOCTYPEスイッチモード一覧 | dTblog | デザインとプログラムの境界をさまようブログ
IE7(RC1)のDOCTYPEスイッチ対応を調べる過程で出来あがった、DOCTYPE宣言による各UAの標準・互換モード切替状況の一覧表をさらしておきます。間違いがあれば、ご指摘くだされ。＞誰 文書型 IE7 IE6 MacIE5 Gecko系 Opera なし
Online Generators | Developer's Toolbox | Smashing Magazine
Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges. Neatly packed in a gorgeous hardcover, the book featur
CSS Hazard | とても危険のギャラリーと思います
Load testing is an important part of overall web performance. The load testing process is widely used. The testing system involves placing demand on a particular software system and measuring the response. Load testing is a useful tool because it can give you an idea on how a system responds under normal operating conditions. In addition, load testing can also give an accurate measure on how a sys
CSSVista: Live CSS editing with Internet Explorer and Firefox simultaneously
Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno
CSS Nite Vol.7: Web制作現場の対立を解消する！ XHTML CSSガイドライン作り [1]
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
第12回 非推奨属性の代替方法（3）
XHTML 1.0 StrictやXHTML 1.1ではいくつかの要素・属性が廃止されている。これらは「非推奨要素・属性」と呼ばれ、主に視覚表現に関するものであるため、シンプル＆クリーンなXHTMLのためには使わないほうがよい。前回、前々回に引き続き、非推奨属性の代替方法を見ていこう。 21. （table要素）align、bgcolor属性 table要素のalign属性は、値が「left」「right」の場合はCSSのfloatプロパティで、値が「center」の場合はmargin-leftとmargin-rightプロパティで「auto」と指定して代替する。bgcolor属性は、background-colorプロパティで代替する。 [XHTML 1.0 Transitional/Frameset] <table summary="Web用語の一覧表。1列目が用語、 2列目が説明"
Free Css Templates
CSS Templates Welcome to Free CSS Templates Website! Find here a never before seen collection of free CSS Templates, one of the biggest in the entire web! All these CSS templates are: 1. Table free in its design (no tables have been used for layout purposes). 2. The templates are light weight, so that it won’t take too long to load. 3. W3C Standard compliant. 4. Comes with public domain photos, pr
Linksをサムネイル化した
Linksをサムネイル化してみた。各サムネイルはSimpleAPIのウェブサイトサムネイル作成API頼みなのでNOW PRINTINGばかりだったりするけど、それはそのうち解消されるはず。無駄にポップアップとかさせてみたり。 Simple APIのウェブサイトサムネイル作成APIが返す画像は決まったサイズなので、ポップアップはかなり前に考えたposition: relative;を利用したテクニックでやった。CSSのコードは、 div#contents div.story ul.thumbnail { margin: 1em 0; width: 100%; line-height: 1; list-style-type: none; } div#contents div.story ul.thumbnail li { margin: 0 1em 1em 0; float: left; wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YUI CSS Resourcesで無駄なくCSSデザイン | Queue
Rhythm Collision wordpress : Firefox - hr CSS
Freelance web developers portal, Business Website Redesign, Cheap web design and hosting, Web development nepal - The Friends Media
【SEO対策tips】最適化された(x)html-img要素 - to-R
Mike-O-Matic 損 A CSS Crossfader Demo
http://www.elev3n.co.uk/