CSSの勉強中に困ったら
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
box-shadowでグラデーションっぽいボーダーを作る
CSS3のbox-shadowを使ってグラデーションっぽいボーダーを作ります。 まず、box-shadowは、以下のような指定ができます。 box-shadow: (horizontal offset) (vertical offset) (blur distance) (spread distance) (inset);これらを順に説明すると以下のようになります。 シャドウの水平方向オフセットシャドウの垂直方向オフセットぼかし広がりinsetを指定するかどうか詳しいことは以下のページに書いてあります。 CSS Backgrounds and Borders Module Level 3 - The ‘box-shadow’ property とりあえず、今回作ったのはこんな感じになっています。 box-shadowでグラデーションっぽいボーダーを作る デモページ 指定は以下。 #grad
CSSを拡張して記述できるPHPベースのプリプロセッサPCSSとCSS Crush
CSSを拡張して記述できるものと言えば、SassとLESSが有名ですね。 これらはHTML/CSSフレームワークなどでも使われていたり、日本語での解説も多くあります。 ですが、今回はそのどちらでもない、PHPベースのプリプロセッサである「PCSS」と「CSS Crush」の簡単な説明をしてみたいと思います。 誤解のないように言っておきますが、これは「Rubyとか入れなくてもいいしこっち使おうぜ」という内容の記事ではありません。 こういうものもある、という程度に見ておくといいかもしれません。 また、この記事内の解説は公式ドキュメントを簡単にまとめたものです。 詳しく見たい方は公式サイトをご覧ください。 PCSS – CSS Server-side Preprocessor 「ショートカット志向サーバーサイドCSS3プリプロセッサ」とタイトルに書かれています。 PCSSではどんなことができるの
CSS Animationsを使ってローディング用アニメーション
なんとなく思いついたので、CSSでローディングアニメーションを作ってみました。 画像とかcanvas使えよって話ではあるんですけどね……。まあアニメーションの練習ってことで。 今回は『jsdo.it』で作ったので、それを置いておきます。 Firefox 5以上、またはWebkit系のブラウザで動きます。 2020年1月8日 追記： 『jsdo.it』は2019年に閉鎖されましたので、回収できた自分のコードだけデモページに移行しました。 CSS Loading Animation 簡単にですが解説してみたいと思います。 まずHTMLから。 <div class="loading style-1">Now Loading...</div>使うのはdiv1個です。 class名が2つ付いてるのは、最初いくつか作ろうと思ってたからです。 （結局思いつかなかったので諦めましたが……） では次にCSS
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
CSSで使用できる角度の単位
degdegree、度数法。 360で円を一周するお馴染みの表し方。 gradグラード。ゴン（gon）、グレード（grade）、グラディアン（gradian）とも。 1直角を100とする単位。 つまり90degの1/100が1gradになる。360degは400gradで表すことができる。 radラジアン（radian）。弧度法。 円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値だそうです。 360degは2πradで表すことができる。 degreeからの変換はdegree * π / 180で行う。 2011年9月6日版でWho is going to use this anyway?とか言われてた単位。 turn1回転を1つの単位として扱う。 1turnは360degと等しい。 まとめ1deg = 約1.1111111111grad = 約0.0174532925ra
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
自サイトのTwitterでの注目エントリーをTopsy APIを使ってランキング形式で表示
JavaScriptの勉強その4。 TopsyのAPIを使ってTwitterでの自サイト注目エントリーをランキング形式で表示したい。 今回デモページはありません。 JSONPサイトごとの注目エントリーのJSONPはhttp://otter.topsy.com/search.js?q=site:example.comで取得できます。 パラメータなどは下記のリンク先を参照してください。 Resources - otterapi - Project Hosting on Google Code 並び順はTopsyが出したスコア順なので、Tweetの多さ順にならない場合もあります。 JSONPは以下のようなものになります。 今回はYahoo!ニュースを全期間指定で取ってみました。 ({ "request": { "parameters": { "window": "a", "q": "site:h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでつまづいたポイント ― transparent, transition, box-sizing