CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
shame.css – CSS Wizardry
17 April, 2013 shame.css Written by Harry Roberts on CSS Wizardry. Table of Contents The problem The solution Featured case study: NHS Not a blame game The rules Example Implementation Keep track of your hacks! Update: I did a short interview about shame.css with .net magazine. Something Chris Coyier, Dave Rupert and I joked about recently was the idea of a stylesheet dedicated to housing your nas
CSSのvertical-alignについて - PYTHONIC BOOM BOOM HEAD
大前提として、僕の知識は基本的にCSS2止まりです。また、Webデザイナーでもありません。今は(css3では)こうするのがトレンドだよーとかあれば教えて頂けると大変喜びます。 昨夜twitterで403 Forbiddenという記事を紹介してもらった。確かに昔ハマったことあるなーと思いつつvertical-alignで検索しようとしたら「vertical-align 効かない」が候補に出てきた。結構みんなはまってるんですね。 vertical-alignはblock要素には適用できない まず最初にハマるポイント。こいつはinline, inline-block, table-cellに対してしか効かない。block要素には適用することができない。 昔懐かしいtableレイアウトの感覚で div#hoge { vertical-align: middle; } なんてしても全く意味が無い。「
vertical-alignの使い方【css tips】[to-R]
vertical-alignの使い方【css tips】 vertical-alignは正しく理解していないと使いにくいプロパティである。 特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。 テーブルレイアウトでよく使う以下のようなコードがある。 <table width="200" height="200" bgcolor="#39FF6B"> <tr> <td valign="middle" align="center">中央に表示したい文字</td> <tr> </table> サンプル このコードをcssレイアウトに変更する際に HTMLを <div> <p>中央に表示したい文字</p> </div> CSSを div{ width:200px; height:200px; background:#39FF6B; text-align:center; v
![vertical-alignの使い方【css tips】[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
CSSフレームワークは良くないと思った理由 - Librabuch
もっと挑発的なタイトルにして冒頭で「このタイトルは釣りです」とか書こうとか思ったけど、各方面からの報復が怖いので止めた（←どこから）。 本日、お仕事で初めてCSSフレームワークを使う機会があってその仕様的なものを初めて見たのだけれども、かなりショックというか思うところがあったのでエントリにすることにした。 CSSフレームワークとは おそらくTwitter Bootstrapが最も有名かつ実際に利用されている、と思われる。 マルチカラムレイアウトとか、角丸でお洒落なメールフォームとか、アコーディオンなメニューとかのデザインがあらかじめ良く設計されよく作り込まれていて、HTMLの制作者はclass属性にちょちょいと記載するだけでお手軽に「今風」なセンスでWebデザインを組み立てられるというもの。フレームワークという呼び名には疑義もあるようだけれど、海外でもそう呼ばれているので今回はCSSフレー
IE6のバグのまとめ - Webtech Walker
XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い･･･多すぎるよ！逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring
Twitter logo in CSS3 | eCSSpert.com
Logo recreated using pure HTML and CSS3. No images. No JS. <div id="twitter" class="icon"> <div class="twitter1 draw"></div> <div class="twitter2 mask"></div> <div class="twitter3 draw"></div> <div class="twitter4 mask"></div> <div class="twitter5 draw"></div> <div class="twitter6 draw"></div> <div class="twitter7 draw"></div> <div class="twitter8 mask"></div> <div class="twitter9 draw"></div> <di
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方
こんばんは、企画の林です。 今回は iPad 専用ウェブアプリ、Sleipnir Start for iPad の開発で学んだ CSS3 でのアニメーション処理についてお話します。 iPhone / iPad 向けのウェブアプリを作ろうと考えている方で jQuery 使いの人に優しい内容です。 ※ Sleipnir Start for iPad が何か分らない方は前回の記事をどうぞ。 iPad 上のブラウザで、ネイティブアプリのように滑らかにのアニメーションさせるためには jQuery.animate() を使ってはいけません。 CSS3 の transform:translate3d を使って GPU 上で処理させる必要があります。 （jQuery.animate() 関数はお話にならないくらいカクカクした動きになってしまいます。） 上下左右どの動きも transform:transla
DHTML hack expression をスクリプトの実行手段としてのみ利用する
ダイナミック・プロパティ本来の機能を利用せず、単にスクリプトを実行させる手段として expression を使う場合、イベントが発生するたびにスクリプトが呼び出される仕様は逆にナンセンスである。これを避けるため、スクリプトの最後にダイナミック・プロパティを解除するコードを追加する。具体的には expression を設定したプロパティをスタティックな値で上書きする。 #dummy { display: expression((function () { statement1; statement2; statement3; statement4; statement5; this.style.display = "none"; }).call(this)); } 以前のエントリーでも少し触れたが、ダイナミック・プロパティ関連の機能のひとつに、イベントのバインドを解除するための remove
Pure CSS GUI icons – Nicolas Gallagher
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraintSeveral months ago I was experimenting with the creation o
CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex
Latest topics > CSS3セレクタとXPathでの表現の対応表 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « getElementsByなんちゃら の代わりにXPathを使う Main Mozilla 24 » CSS3セレクタとXPathでの表現の対応表 - Sep 13, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 XPathをノードの検索に活用する方法を紹介したけど、肝心のXPathが書けなきゃ意味がないわけで。でもXPathって、ノードセットがどうとかノードテストがどうとか軸がどうとか修飾がどうとか、い
Selectors APIのmatchesSelectorと、動的なページでのイベント処理 - 素人がプログラミングを勉強していたブログ
Selectors APIのDraftに、matchesSelectorというAPIが定義されていて、現在、WebKitとMinefieldのNightlyに搭載されている。 ただし、ドラフトなのでベンダープレフィックスがついていて、Element#webkitMatchesSelectorやElement#mozMatchesSelectorを使わなければいけない（というより、まだ直接使うには時期尚早だ）。 使い方は簡単。 var paragraphs = document.getElementsByTagName("p"); paragraphs.item(0).webkitMatchesSelector("p"); // true paragraphs.item(1).webkitMatchesSelector("div#main > p"); // <div id="main"><
[CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス
YUI、Blueprint、YAMLなどのCSSのフレームワークでも利用されているブラウザのスタイルを初期化するスタイルシートのサンプル集です。 Blueprint YAML YUI Tripoli meyerweb warpspire christianmontoya crucialwebhost 下記のスタイルシートは、記述スタイルを同様のスタイルに全て変更しています。また、コメントも削除しています。 Blueprint Blueprint Based:Reset Reloaded <textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
![[CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
JavaScript と CSS でプレゼンするライブラリを作ってみた(二番煎じ) - zyxwvの日記
一覧表示 スライドショー中 ちょっと前に最近の CSS のおもしろさを知ったので、プレゼンテーションを作れるライブラリ的なものを作ってみた。ページの切り替えや一覧表示のときにぬるっと動きます。id:amachang さんの作った s6 と比べると、(CSS さえ書ければ)オブジェクトにいろんなアニメーションが設定できます。それから、iPhoneOS でもある程度高速に動作するのも利点です。(ipod touch 2G で確認) ただし "-webkit-*" みたいなスタイルを指定しまくりなので、現在のところ対応ブラウザは Safari や Chrome といった webkit 系だけです。スタイルの名前を変えれば mozilla 系でも大丈夫だと思いますが。 ちなみにレポジトリは http://github.com/shimomura1004/presen です。 デモ: http://
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS-Tricks - A Website About Making Websites
Components · Twitter Bootstrap
SASSIENCE ～ 世界が嫉妬するCSSへ