CSSでつまづいたポイント ― transparent, transition, box-sizing
DingbatのWebフォント
将来的にブラウザでJavaScriptのリサイズや移動の許可・不許可設定みたいにWebフォントを使う・使わないを設定できるようになると思うんですよ(CSSアニメーションやトランスフォームとかも)。そうなるとDingbatのWebフォントを使った場合、その部分は普通のフォントで表示される可能性が高く、無意味な文字列が表示されるんではないかなと。既に現状でもドキュメントで指定されたフォントを使用しないという設定を有効にしているとそうなります。 例えばDingbatのWebフォントの利用デモであるCSS-TricksのIcon Fonts are Awesomeで使われているFicoではBに吹き出しの絵が割り当てられています。この吹き出しは以下のようなコメント数の表示などに対して使うことになるでしょう。 <a href="#comments" class="icon comment-info">
CSS 2.1 Advent Calendar '11
基礎以上ベスト・プラクティス未満。 CSSハックのことは忘れる CSSハックの多くは便利で強力なものだが、それに頼るのは危険だ。まずは普通にCSSを書くことに注力するべきだろう。その上で条件付きコメントやModernizrを使うかCSSハックをあえて使うか決めると良い。 色の書き方は統一する キーワードによる色の指定や#rrggbb、rgb()といくつかの方法で色を指定することができるが、#rrggbbの桁を合わせることも含めていずれかに統一した方が可読性とメンテナンス性が上がるだろう。 %は長さの単位ではない border-widthなどで使用できない理由はそれだ。他にも使用することができないプロパティがいくつかある。また%はコンテキストによって基準になる単位が大きく変わる他継承においてもある意味不可解な挙動を起こすことがある(line-heightなど)ので、使用には注意を払う必要があ
Closure Stylesheets で CSS を最適化する (1) - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 これまで Closure Library を使っていろいろと開発をしてきましたが、 CSS の扱いについてはいつも不満でした。 JavaScript コードについては Closure Compiler との組み合わせで極限まで最適化できるのに、 CSS についてはほとんどサポートがなく、仕方がないので自作の Rakefile と YUI Compressor を使
CSSでMacBook Airを購入（CSSで加算演算） - jsdo.it - Share JavaScript, HTML5 and CSS
counter-incrementを利用しての加算演算。 加算演算といっても加算した数値を表示するだけです。 iPhone Safariでも動くようにlabelにクリック属性を加えました。 Chrome15 : ok Firefox8 : ok Opera11.5 : ok Safari5 : 演算が動かない（原因不明） iOS5 Safari → ok IE9 : counter-incrementも使えchecked疑似要素も使えるが、疑似要素によるcounter-incrementが効かない IE10 : wakaranaiyon todo ・iPhone最適化 <input name="mba" id="mba-none" type="radio" value="0" checked><div id="div-mba-none"> <input name="mba" id="mba
サブセクションにあるh1要素のフォントサイズ
全然知らなかったのですが、Chrome 15やFirefox 8ではベンダー拡張プリフィックス付きの:any擬似クラスを使ってサブセクションのh1要素のフォントサイズを調節するようになっているようです。Internet Explorer 9も見た感じそうなっているようですが、UAスタイルシートによるものなのかよくわかりません……。なんか変なことやってそう(偏見)。 Chrome 15の場合は、 h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold } :-webkit-any(article,aside,nav,s
SVGのフィード・アイコン
背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 Demo: SVG Feed Icon SVGファイルのソースはデモ・ページの最後に載せてあるのでそれをHTMLファイルにコピペしても良いですし、普通にドラッグ・アンド・ドロップや右クリックで保存してimg要素で参照しても良いでしょう。このページやデモ・ページではData URIスキーム化したものを直接使っています。500バイト強の小さなものなのでData URIスキーム化して使うのが良いと思います。 アイコンの丸
Reset vs Normalize
CSSの記述法として、ブラウザごとの違いを「Reset」して一から指定するという方法が長らくマジョリティを占めていました。まだまだその方向で書いている人が大半ですが、「Normalize」するという方法を採る人達も増えています。なぜリセットではなくノーマライズなのかというような話をなんとなくダラダラ書いてみたい感じです。 以下、リセットはYUI 2のCSS Resetを、ノーマライズはNormalize.cssをイメージして読んでみてください。 リセットとノーマライズ まずは両者の違いから。リセットはなかったことにするというもので、ほぼ全ての要素に対するスタイル指定を排除しブラウザごとの違いを吸収するものです。対してノーマライズはブラウザのデフォルト・スタイルシートを生かしつつ、各ブラウザ間の挙動を擦り合わせるものです。リセットが負の方向で統一しているとすれば、ノーマライズは正の方向で統一
pointer-eventsで画像ギャラリーやLightbox
画像表示でよくあるフェードして切り替えとかLightboxっぽい全画面表示とかもpointer-eventsプロパティと:target擬似要素の組み合わせで「っぽいもの」なら簡単に出来ます。最近はCSSで出来そうだなーと思うと、普通に出来るようになってて幸せですね！ Demo: Image Gallery by pointer-events まずは画像を並べるHTMLから。 <ol> <li id="img1"><a href="#img2"><img src="img1.png"></a></li> <li id="img2"><a href="#img3"><img src="img2.png"></a></li> <li id="img3"><a href="#img4"><img src="img3.png"></a></li> <li id="img4"><a href="#im
hr要素を文字で入れ替える
HTML5になってhr要素はセクション内での区切りに使うものなどと役割が割りとはっきりと決められました。今までもそんな感じで使ってた人が多いですけど。ただhr要素のCSSによる装飾はなかなか難しいところがあります。そこを擬似要素を利用してゴニョゴニョすることにより、あまり罫線々々してない区切りを作って頑張ろうとかそういうお話です。 Demo: Swap HR Element with Character(s) 単純に元のスタイルを消して背景を透明にし、そこに擬似要素を重ねてやるという最近良く使われるテクニックです。 hr { margin: 2em auto; border: none; position: relative; clear: both; width: 100%; height: 48px; background-color: transparent; box-sizing:
CSSでモーダル・ウィンドウ
pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ Demo: Pure CSS Modal Window .window { opacity: 0; pointer-events: none; } で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。 .window:target { opacity: 1; pointer-events: auto; } 簡単！ デモのようにposition: fixed;とかしておくとよりら
Grid Overlay: The Lasy Way
before擬似要素を利用したグリッド・オーバーレイを作成してみました。pointer-eventsプロパティでnoneを指定することによって、グリッド画像が手前にあるのにも関わらず普通に文字列を選択したりリンクをクリックしたりできるようになります。 Demo: Grid Overlay: The Lazy Way 詳しくはデモページを読んでください。グリッド画像はCSSグラデーションなので、最後にちょろっと書いてあるようにグリッドサイズは変更可能です。溝とカラムの比率は変更できませんが……。 poiner-eventsプロパティはなかなか奥が深そうです。 追記 ダブルクリックでグリッドをトグル出来るようにしてみたのでデモにも反映させました。 <style> body.hide-grid::before { background-image: none; } </style> <scrip
CSSグラデーションとSVGグラデーションのサイズの比較
単純なものならあまり変わらないような気がしたので実際に比較してみます。 比較するグラデーションはCSSグラデーションで書くと linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%) という縦方向に半透明の赤から半透明の青に変化するものです。 CSSグラデーションでは、各ベンダー拡張プリフィックスを並べることになります。 background-image: -moz-linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%); background-image: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%);
こんにちは！ SVGグラデーション！
複雑でないCSSグラデーションの代わりにSVGグラデーション(をData URIスキーム化したもの)を利用するようにしました。懸念していたFirefoxのバグも直る(直った？)みたいだし、ちょっとやってみたかったので。 SVGの作成はエディタでやってます。 <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.0"> <defs> <linearGradient x1="0" y1="0" x2="0" y2="100%" id="gradient"> <stop offset="0%" style="stop-color: ${from:rgb()}; stop-opacity: 1;"/> <stop offset="100%" style="stop-color: ${to:rgb()}; s
CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog
突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディング時のコスト CSSのセレクタは、body .contents .header span aというように、左から右により詳細になっていくように指定するかたちが一般的です。 しかしブラウザはこれとは逆に、右から左にセレクタを解釈しながら描画していきます。 そのため、より負荷のすくないCSSを書くために、 スタイルを当てる要素にはできるだけclass又はIDを指定する 子孫セレクタは重いので、
CSS shaders
30 September 2011 Editors: Vincent Hardy, Adobe Systems, vincent_hardy@yahoo.com Dean Jackson, Apple Inc., dino@apple.com Erik Dahlström, Opera Software ASA, ed@opera.com Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply. Abstract This document describes a proposed feature called "CSS shaders". CSS shaders are a complement to the F
CSS shaders: Cinematic effects for the web | Adobe Developer Connection
Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0 to become available in CSS and HTML, in addition to SVG, and will bring effects such as grayscale, sepia tone, or hue-rotate to all web content. Note: Since CSS Sh
【お願い】background-colorを指定してください - hogehoge @teramako
文字列を選択した時の挙動というかハイライト周りについて。 ブラウザ毎に挙動が違って面白いというか迷惑。 id:FTTH さんが画像がないとは何事だ。とコメントをくれたのでキャプチャしたよ。これでOK? 上下で背景が黒、白で分けて、それぞれに記述のスタイルを割り当てている。 divに背景色：黒、文字色：白 none: スタイルなし 背景色：画像で白、文字色：黒 背景色：白、文字色：黒 divに背景色：白、文字色：黒 none: スタイルなし 背景色：画像で黒、文字色：白 背景色：黒、文字色：白 Firefoxの場合 背景色によってハイライトが変わる。一番見やすい。 白地の場合 背景色：青、文字色：白 黒字の場合 背景色：白、文字色：青 GoogleChromeの場合 常に背景色：青、文字色：白 黒字の背景色が指定されていると、ハイライトされているか分かりにくかったりする。 そして、複数行選択
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Good night, Posterous
「金融機関等コンピュータシステムの安全対策基準」（FISC 安全対策基準）に対する Azure の対応状況リストを公開 - MSDN Blogs
